Responsive Grid in React Native & Flex

Question

I want to create a simple table with two columns ListView

item | item item | item 

I saw this post about creating a grid and it worked - ListView Grid in React Native

I could not figure out how to make my grid responsive? How to set item size to 50%?

I know this is a new language, but I would like it to have more detailed manuals / documents.

Answer 1

I just needed to do this, and I could solve it with simple Views actions and the flexWrap rule.

Parent view

 { flex: 1, flexDirection: 'row', flexWrap: 'wrap'} 

Children's view (elements)

 { width: '50%' } 

Hope this can help someone!

Answer 2

You can easily achieve this using react-native-easy-grid .

Since this is a 2X2 layout, you can use it as follows. Import the library first

 import {Grid,Row,Col} from 'react-native-easy-grid' 

Code:

 export default class StackOverflow extends Component { constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ 'item' ]) }; } render() { return ( <View style={{flex:1,padding:50}}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Grid> <Row style={styles.container}> <Col style={[styles.container,{backgroundColor:'yellow'}]}><Text>{rowData}</Text></Col> <Col style={[styles.container,{backgroundColor:'green'}]}><Text>{rowData}</Text></Col> </Row> <Row style={styles.container}> <Col style={[styles.container,{backgroundColor:'skyblue'}]}><Text>{rowData}</Text></Col> <Col style={[styles.container,{backgroundColor:'orange'}]}><Text>{rowData}</Text></Col> </Row> </Grid>} /> </View> ); } } const styles = StyleSheet.create({ container: { alignItems:'center', justifyContent:'center' }, }); 

Result:

Explaination: I created a 2X2 layout using the react-native-easy-grid library using the Grid, Row, Col components. The beauty is that you don’t even have to mention flexDirection attributes, it just works. Then I passed this component to renderRow for the ListView element.

Answer 3

It is very simple, use flex box. Your view of the render method contains strings and use a loop to place the data.

 const rowData=[]; render() { return <View style={styles.container}>{rowData}</View>; } for (let objectData of newArray) { rowData.push(this.renderRowView(objectData)); } renderRowView(objectData) { return( <View style={styles.mainContainer}> <View style={styles.leftView}></View> <View style={styles.rightView}></View> </View> ); } const styles = StyleSheet.create({ mainContainer: { flex:1, }, leftView: { flex:1, }, rightView: { flex:1, } }); 

I do not run this code, but hope it works for you.

Answer 4

try to set the same flexibility value for both elements so that they increase evenly