All Items are not being rendered

[zayantharani]

I am trying to use react-native-super-grid for Instagram like image grid. However, it's not rendering all the images.I used flat list before and it was working fine but its performance was slow.

This is my code:

 const renderPictures = ({item, index}) => {
    console.log(allPictures.length);
    return (
      <TouchableOpacity style={styles.pictureItem} onPress={imageClicked(index)}>
        <FastImage style={styles.imageThumbnail} source={{uri: item.thumbnailUrl}} />
      </TouchableOpacity>
    );
  };
  
  
 <FlatGrid
          keyExtractor={(item, index) => item.uri}
          numColumns={3}
          itemDimension={100}
          style={[{marginTop: 20}, styles.defaultStyle]}
          data={allPictures}
          contentContainerStyle={{paddingBottom: 20}}
          getItemLayout={getItemLayout}
          ListHeaderComponent={renderHeader}
          renderItem={renderPictures}
          showsVerticalScrollIndicator={false}
        />

   The console log is also showing correct length

[saleel]

I think it is because of the numColumns={3} prop. You don't need it when you are using FlatGrid. FlatGrid automatically calculate required columns from the provided itemDimension.
And since unused props are passed down to internal FlatList, I think it is causing an issue.

[zayantharani]

Ahan! Spot on! This was the issue.

Thanks a lot

[saleel]

Not sure on that. Is it because the images are too large? Maybe you can try thumbnails for the grid.
I believe only rendered images are kept in the memory since the key is setup correctly