Questions tagged [react-native-flexbox]
137 questions
1
vote
1 answer
Flexbox height in React Native
I'm trying to create a simple content-sized dialog box in React Native. Highest in this hierarchy I have my overlay styled so:
{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 100,
…
ed94133
- 1,477
- 2
- 19
- 40
1
vote
1 answer
Fixed View at bottom (variable height) and fill remaining height with other View
I want to build a chat. In the view for the messages are the messages and the input field for the message. The Inputbox should be at the bottom and should use the height it needs. The height of the Inputbox can change if the user enters multi-line…
rakete
- 2,953
- 11
- 54
- 108
1
vote
1 answer
Button inside View with Flex dimensions has his text truncated
I'm new to react-native and mobile app development in general and I'm trying to create a header for my App with a Text and a Button inside it.
Here is my code :
import React from 'react';
import { StyleSheet, Text, View, Button } from…
Ga3tan
- 85
- 1
- 12
1
vote
1 answer
Cannot change width and height of custom component in React-native?
I have a minimal custom stateless component like this:
const ViewBox = (props) => (
{props.children}
)
export default ViewBox;
so I want to import and use it inside…
Joe Aspara
- 1,137
- 1
- 13
- 26
1
vote
2 answers
Flexbox: set child width to 80% while flex-direction is set to column on the parent
I am working on a React Native project. The container's flexDirection is set to column and I want the child's width to span 80% of the parent. If the parent's flexDirection was set to row I would have set the flex value to 0.8 and be done with it.…
Tekeste Kidanu
- 1,950
- 2
- 14
- 22
1
vote
5 answers
react native flex 50% causes errors
I'm trying to learn react native.
I have the following code:
John
- 32,403
- 80
- 251
- 422
1
vote
1 answer
React Native: how to animate Views from being stacked vertically to horizontally
So, essentially, I have two Views stacked vertically to start and on a button press they need to be animated so the first View scoots to the left and the second View goes up and sits to the right of the first one. Seems easy enough to do with…
swimisbell
- 1,419
- 2
- 12
- 19
1
vote
1 answer
React Native IOS/Android style difference
I've been trying to make a function in my React Native app which outputs a paragraph with a dropcap. Here's the code I'm using:
export function returnFirstParagraph(contentRef) {
return (
Sternjobname
- 740
- 1
- 10
- 23
1
vote
0 answers
styling fields with flex not shown
I have a file weatherProject.js :
render() {
return (
You input {this.state.zip}.
…
dtjmsy
- 2,664
- 9
- 42
- 62
1
vote
0 answers
React Native flexWrap stops alignItems from working
I am trying to build a layout for a drag and drop game, I would like the drag placeholders (of which there is an undetermined amount, shown in black) to be laid out in rows with space around and aligned vertically. I can achieve this easily with…
Jamie
- 31
- 5
1
vote
0 answers
React Native: text going out of screen
I have an issue with the text going out of the screen and not wrapping.
Here is the code and stylesheet. Appreciate if someone can let me know what's going on and how to fix.
Referred to this post but couldn't get it to work.
Aman Agarwal
- 589
- 1
- 4
- 22
1
vote
1 answer
In react-native - how to float elements in new line when they can't fit into one?
From the example here I'm wondering if it's possible to float items into new line when they can't fit into one?
haxpanel
- 4,402
- 4
- 43
- 71
1
vote
1 answer
Border around a view leaves some area around the edges in the view color in react native
I may not have done the best job in creating the title for the question. Below is the error demonstrated on rnplay
https://rnplay.org/apps/eNIbjw
The problem is that I want to show some colored tiles on users' avatars to represent their status. So,…
Varun Gupta
- 2,870
- 6
- 33
- 73
1
vote
1 answer
Flexbox 'flex' property in React Native
I'm working my way through the wonderful ReactNativeKatas to learn flexbox layouts in React Native. In the example below, the flex property on the two child views of the parent View (the one using the styles.container) is set to 0.1. Setting both to…
Steed-Asprey
- 2,001
- 7
- 24
- 30
0
votes
1 answer
Problem with lining up contents: react native
I'm currently having a problem with the clickable size of a reusable button which includes an icon and text. When I run this code it seems like the entire row becomes clickable when I only want the icon and text to become clickable. Does anyone know…
