React Native lazy loading 250 images in a Scroll View

Question

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

Answer 1

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.