show 2 items per row[react native]

Question

I am learning react native and in all the tutorials i see ListView has been used with only 1 items per row. I have not used ListView, though. I have only 6 items that has to be shown as flat grid with 2 items per row and should be responsive. I know its a basic question, but i have tried from my side too which can be seen in the image

This is my code

 renderDeviceEventList() {     return _.map(this.props.deviceEventOptions, deviceEventOption => (         <View key={deviceEventOption.id}>             <Icon                 name={deviceEventOption.icon_name}                 color="#ddd"                 size={30}                 onPress={() =>                     this.props.selectDeviceEvent(deviceEventOption)                 }             />             <Text style={{ color: "#ff4c4c" }}>                 {deviceEventOption.icon_name}             </Text>         </View>     )); } render() {     return (         <View             style={{                 flex: 1,                 top: 60,                 flexDirection: "row",                 justifyContent: "space-around",                 flexWrap: "wrap",                 marginBottom: 10             }}         >             {this.renderDeviceEventList()}         </View>     ); } 

Answer 1

The correct way to do it would be with flexBasis, with a value set to (1/n)% where n is the desired # of rows > 0. For two rows:

.parent {     flex: 1;     flexWrap: 'wrap';     flexDirecton: 'row'; } .child {     flexBasis: '50%'; } 

Answer 2

You can try the flat list from react native. where in you can specific the number of columns and also can mention the vertical direction or horizontal direction. Sample code:

<FlatList data={this.props.data} keyExtractor={this._keyExtractor}     //has to be unique    renderItem={this._renderItem} //method to render the data in the way you want using styling u need horizontal={false} numColumns={2}           /> 

Refer https://facebook.github.io/react-native/docs/flatlist.html for more.