Creating a GridView from a List in ReactNative? (Without using libraries)

Question

Consider a simple application in React Native that extracts lists from a remote JSON source and displays them on the screen.

So far, I have managed to display the results using ListView components in rows (i.e. 2 results per row, see screenshot).

in one line. either the grids display the data of one person, I want the details in a sequential order are not repeated.

</Content> <View style={{backgroundColor: 'white'}}> <Text style={{color: 'black',fontSize: 17,marginTop: 25,marginLeft: 15}}>Employees</Text> </View> <List dataArray={currentContext.props.employeeList} renderRow={(data) => <ListItem> {this.renderRow(data)} </ListItem> } /> </Content> 

The renderRow function (data) is set

 renderRow(data){ return( typeOne() ) function typeOne(){ return( <View style={styles.gridContainer}> <Content contentContainerStyle={{ padding:6, paddingBottom:0 }}> <View style={{flex:1,}}> <Row> {renderCell(data.photo_url, 0,data.name)} {renderCell(data.photo_url, 1,data.name)} </Row> </View> </Content> </View> ) function renderCell(bg,pos,title){ if (pos%2==0) { return( <Col style={[{marginRight:3},styles.colStyle]}> {cellContent(bg,title)} </Col> ) }else{ return( <Col style={[{marginLeft:3},styles.colStyle]}> {cellContent(bg,title)} </Col> ) } function cellContent(bg,title){ if(bg==null){ return null } return( <Button style={{flex:1,alignSelf:'stretch'}} underLayouColor='red'> <View style={styles.cellContent}> <Image style={{height:230,alignItems: 'stretch'}} source={{uri:bg}} blurRadius={1}/> <View style={[styles.cellTitleBg,{opacity: 0.5,marginTop: 10}]}> <Text style={[styles.cellTitle,{position:'absolute',bottom:0,right:5}]}>{title}</Text> </View> </View> </Button> ) } } } } 

How to get a list view for returning 2 data per row?

I will give you a similar question for the link in the link below

ListView Grid in React Native

please help me solve this problem.

Part of style

 const styles = StyleSheet.create({ container: { flex:1, backgroundColor:'white', }, button:{ color:'white' }, overLayView: { position:'absolute', alignSelf:'center', }, gridContainer: {backgroundColor:'#EDF0F2',flex:1,}, colStyle:{height:210,flex:1,marginBottom:6,marginRight:10,marginLeft:10}, cellContent:{position:'absolute',left:0,right:0,top:0,bottom:0}, cellTitleBg:{bottom:65,backgroundColor:'#778899',height:35}, cellTitle:{bottom:65,color:'white',fontWeight:'bold',fontSize:17,right:0,textAlign:'right',right:0} }) 

Answer 1

Maybe use a wrapper library, I recommend this one: https://www.npmjs.com/package/react-native-easy-listview-gridview

Answer 2

Try it...

pass the index from the renderRow function to this function where that view is defined.

 <Button key={index} style={{flex:1,alignSelf:'stretch'}} underLayouColor='red'> <View key={index} style={styles.cellContent}> <Image key={index} style={{height:230,alignItems: 'stretch'}} source={{uri:bg}} blurRadius={1}/> <View key={index} style={[styles.cellTitleBg,{opacity: 0.5,marginTop: 10}]}> <Text key={index} style={[styles.cellTitle,{position:'absolute',bottom:0,right:5}]}>{title}</Text> </View> </View> </Button>