Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native lazy loading 250 images in a Scroll View

I have 250 objects in state, that I'm trying to load in a scroll view with an image for each one. I'm using react-native-lazyload, and it works for about the first 75 images, then the scrolling starts slowing down to a halt, almost at the same spot every time.

Is there a different way I can load these images? It seems like a Flatlist would be a better option than a Scrollview, but I have no function I can call onEndReach

like image 344
peter Avatar asked Mar 06 '19 21:03

peter


1 Answers

I found a really good write-up on improving performance of Flatlists here. I ended up using a Flatlist with these setting:

  <FlatList
    containerContentStyle={styles.container}
    data={countries}
    renderItem={({ item }) => (
      <View style={styles.results}>
        <Results 
          {...this.props} 
          country={item} 
          handleUpdate={this.handleUpdate}
          pendingCountry={pendingCountry}
        />
      </View>
    )}
    keyExtractor={item => item.alpha2code}
    ListHeaderComponent={() => this.renderHeader()}

    // Performance settings
    removeClippedSubviews={true} // Unmount components when outside of window 
    initialNumToRender={2} // Reduce initial render amount
    maxToRenderPerBatch={1} // Reduce number in each render batch
    updateCellsBatchingPeriod={100} // Increase time between renders
    windowSize={7} // Reduce the window size
  />

I can now scroll through my entire list of 250 images at a reasonable pace with no issues. When I start scrolling back up from the bottom, the screen gets a little jerky, but this is the best solution I've gotten to work.

like image 159
peter Avatar answered Sep 28 '22 01:09

peter