Creating a GridView From Listview in ReactNative?(Without using libraries)

Question

Consider a simple app in React Native that fetches listings from a remote JSON source and displays them on screen.

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

in one row.both the grids display data of a single person,i want details in a consecutive manner not repeating.

        </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 function renderRow(data) is given by

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 can get the list-view to return 2 data's per row ?

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

ListView grid in React Native

please help me solve this issue.

The style part

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}
})

your listview is scrolling horizontally or vertically? – Codesingh Jun 06 '17 at 09:50 — Codesingh, Jun 06 '17 at 09:50
@Codesingh scrolling vertically – Amal p Jun 06 '17 at 10:09 — Amal p, Jun 06 '17 at 10:09

score 0 · Answer 1 · answered Jun 06 '17 at 10:10

0

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

answered Jun 06 '17 at 10:10

RJiryes

951
10
25

Can you give me logical answer without the library,a for loop maybe – Amal p Jun 06 '17 at 10:14

score 0 · Answer 2 · answered Jun 06 '17 at 10:30

Try this out...

pass index from the renderRow function down to this function where this 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>

Not Working,suggest me a for loop if you can. – Amal p Jun 06 '17 at 10:49 — Amal p, Jun 06 '17 at 10:49

Creating a GridView From Listview in ReactNative?(Without using libraries)

2 Answers2

Linked