Menu
I'm trying to do a two column layout in React Native from a list of items. It only seems to work if I define the width of the items, I would like to define just a percentage of the parent width (0.5 would make a 2 column layout, but 0.25 would make a 4 column one). Can this be done?
export default class App extends Component { render() { return ( <View style={[styles.container, {width:width}]}> <View style={styles.item}><Text>{'item1'}</Text></View> <View style={styles.item}><Text>{'item2'}</Text></View> <View style={styles.item}><Text>{'item3'}</Text></View> <View style={styles.item}><Text>{'item4'}</Text></View> <View style={styles.item}><Text>{'item4'}</Text></View> <View style={styles.item}><Text>{'item5'}</Text></View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', flexWrap: 'wrap', }, item :{ flex: 0.5, //why this doesnt work??? // width: 150, //using fixed item width instead of flex: 0.5 works height: 100, padding: 10, backgroundColor: 'red', // flexGrow: 1, // flexShrink: 0, } }); You can play with it here: https://snack.expo.io/SyBjQuRxm
Css working equivalent: https://codepen.io/klamping/pen/WvvgBX?editors=110
Obviously I could do something like creating a container for each column, but that's not the point:
render() { return ( <View style={[styles.container, {width:width}]}> <View style={styles.column1}> <View style={styles.item}><Text>{'item1'}</Text></View> <View style={styles.item}><Text>{'item2'}</Text></View> <View style={styles.item}><Text>{'item3'}</Text></View> </View> <View style={styles.column2}> <View style={styles.item}><Text>{'item4'}</Text></View> <View style={styles.item}><Text>{'item4'}</Text></View> <View style={styles.item}><Text>{'item5'}</Text></View> </View> </View> ); } 
445
Approach: To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns.
Flexbox is designed to provide a consistent layout on different screen sizes. You will normally use a combination of flexDirection , alignItems , and justifyContent to achieve the right layout. Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions.
To add a 2 column layout with flexbox on React Native, we can set flexDirection to 'row' and flexWrap to 'wrap' . to set flexDirection and flexWrap so we get a horizontal flex layout and we wrap overflowing components to the next row. Then we set each View 's width to 50% so that they take half the width of the screen.
So, in react-native you can just flex:1 for parent, and set width:'100%' for child, and it will auto divided by two. Save this answer.
It is possible if you use percentage values for the widths:
<View style={styles.container}> <View style={styles.item}> ... </View> </View> const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start' // if you want to fill rows left to right }, item: { width: '50%' // is 50% of container width } }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
