While checking out the tutorial here: https://facebook.github.io/react-native/docs/flexbox.html#align-items, I was unable to get the alignItems value to align the rows without any space between when I added flexWrap:'wrap' to the parent view (and enough child views such that it'd wrap). Flexbox acted as if it had a 'space-between' requirement for the rows.
<View style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
flexWrap:'wrap',
alignItems: 'flex-start'
}}>
** Enough Views to get a wrap **
</View>
Setting flex:0 gets me the results I wanted:
The same behavior is expressed when I use flexDirection:'column', except no matter what I set the flex value to, I get the unwanted behavior:
Am I using flexbox incorrectly? Or is this a bug inside of react-native's flexbox?
With the newest version of React Native v0.43.1, this issue is fixed and alignContent is exposed in React Native.
Related
I want to put 3 texts on the screen one on the top, one on the middle an one on the bottom. For this I thought about using the space-around property. This is my code
<Screen style={styles.container} backgroundColor={color.transparent}>
<View style={styles.playerContainer}>
<View><Text>text 1</Text></View>
<View><Text>text 2</Text></View>
<View><Text>text 3</Text></View>
</View>
</Screen>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'blue'
},
playerContainer:{
flexDirection: 'column',
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'red',
}
});
This is not working as expected. It looks better is I set a height for playerContainer, but I am enable to calculate the right hight because of the navigation bar etc.. I just need to add three text in the container. I must calculate the hight of playerContainer or I am doing something wrong?
If you want the first entry to be at the start of the container, the second to be at the center, and the last to be at the end, you need justifyContent: 'space-between'. I found this article helpful when learning about flex in React Native https://blog.reactnativecoach.com/understanding-flex-in-react-native-b34dfb4b16d1
Today i have problem with fitting content in the container in react-native. I used this lib. It is about react-native radio buttons but the content inside that doesn't fit well. Here is the screenshot
When the text is too large it is going outside. so i decide to open code of that button and saw container of the text tag.
centerProductBox: {
flexDirection: 'row',
flex: 6,
justifyContent: 'flex-start',
alignItems: 'center',
paddingHorizontal:4,
},
Should i changed something or any suggestions what i should changed to fix that?
Sorry for my bad English!
Use the boxStyle style prop from the https://www.npmjs.com/package/react-native-radio-buttons library.
I'm new to react native and css styling as a whole so sorry if the question is very basic. I want a view to take 100% of the available screen width and when i use the code below my view seems to go outside the screen boundry, though when I use Dimension.get('window').width it work just fine. can someone explain how they differ from each other. any help would be really appreciated. thanks
return(
<TouchableOpacity style = {styles.food_wrapper}
onPress = {()=> this.userAction()}
>
<Text style = {styles.foodname}>
{this.name}
</Text>
<Text style = {styles.foodprice}>
Rs: {this.price}
</Text>
</TouchableOpacity>
);
food_wrapper:{
flex: 1,
flexDirection :'row',
justifyContent:'space-between',
alignItems:'flex-start',
width: '100%',//Dimensions.get('window').width,
minHeight: 50,
marginVertical: '1%',
padding: '2%',
backgroundColor: 'rgb(155,200,200)'
},
You need to understand what is the basic difference from 100% and the width you get using dimension.get('window')
100% means you want to get the container 100% width which mean if your parent container is 50px then 100% will return 50px.
the width from dimension give you a static width of your device width
so be careful to choose what to use to your component
if you want to follow the parent container then it is easier to use 100% then width from dimension but for responsive reasons without any parent container or it is the parent itself then width from dimension will work better
You need to add a wrapper view with flexDirection: 'row', then style the child view (or Touchable or whatever) with flex: 1
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, height: 100, backgroundColor: 'grey' }} />
</View>
Or you could use alignSelf: 'stretch' inside a few with flexDirection: 'column' (which is the default for all views)
Hang in there. Learning flexbox takes some practice. Your first thought when you get stuck should be "do I need to add a wrapper view?"
I am using React Native's flexbox (not css flexbox). I am creating an image gallery and the first image has to be double the size, and the rest of the images smaller. Works good, but I have a problem that the third image is displayed in new row, instead where the blank space is.
Is it possible to achieve such behaviour with flex-box, so that the third image would be below the first small image?
I tried all combinations with aligning items, self aligning, flex directions, but no success. If needed I can provide a small example of the code which I already have.
I don't have a fully responsive answer, but this may be helpful here:
<View style={{ flexDirection: 'column' }}>
<View style={{ flexDirection: 'row' }}>
{this.renderPhoto(0)}
<View>
{this.renderPhoto(1)}
{this.renderPhoto(2)}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
{render rest...}
</View>
</View>
Try this component. Maybe it will help you
https://xudafeng.github.io/autoresponsive-react/
What is the exact purpose of setting rule flex: 1 to many React Native components?
Very often I can see this rules applied to different components. Sometimes this rules obviously redundant. Sometimes no obviously, but layout seems working well without it.
So, what exactly this rule suppose to do?
If the component is rendering fine without using flex: 1 it is obviously not needed. You might as well want to remove the unwanted style. What flex: 1 does is that it tells the component to occupy as much space as it can.
For example:
<View style={{ flex: 1, backgroundColor: '#cccccc' }}>
<Text>Hi</Text>
</View>
This will span the whole screen.
However, if you place another View at the same level in the DOM, both of the Views will occupy equal space i.e. the screen will be divided in two parts.
Like this:
<View style={{ flex: 1 }}>
<View style={{ flex: 1, backgroundColor: '#cccccc' }}>
<Text>View one</Text>
</View>
<View style={{ flex: 1, backgroundColor: '#eaeaea' }}>
<Text>View two</Text>
</View>
</View>
I agree that flexbox is a little bit confusing. But once you get the hang of it, you'll learn how to manipulate the views.
Edit: Always wrap child components with a parent component in order to avoid potential runtime errors.
For layout React Native uses flexbox because display: flex; is extremely well-suited for creating responsive layouts across various screen sizes and devices. All the attribute names and values are listed in the React Native docs.
In other words, instead of using display: block with various floats your layout should be created using flexbox rules.
Modus Create did a nice tutorial on Flexbox in React Native.
Specifically, that rule:
flex: 1
is telling the element to grow to fill the available space.