Flatlist with video streaming runs into memory problems on Android

SDK Version: 40.0.0
Platform: Android

Expo app with flatlist and one video per line. (cf. TikTok)

  • Flatlist - optimised (shouldComponentUpdate) + see props, max 2 lines are rendered at the same time. There is a clean unmount of the lines not in the field of view. Only the video in the field of view runs, the 2nd one pauses.
  • Expo-AV
  • Google-Firebase Cloudstorage: the videos are also generated and uploaded by the app.

Problem : At the latest after the 4th video is rendered the app runs into a memory problem on Android. From the beginning NO problems on IOS devices. Error message/warning: VirtualizedList: You have a large list that is slow to update … After that, the videos do not load at all for a long time, only after a few minutes do the two videos to be rendered appear again.

Component structure:

  • VideoStream - React.Component => all data available and stored in the Redux store.
  • Flatlist => only 7 records are passed, see flatlist props
  • Item => via renderItem
  • VideoItem - React.Component> => incl. GestureHandle, Background
  • TouchableOpacity>
  • Video => Expo-AV
 <View style={styles.container}>
     <FlatList
       snapToAlignment={'start'}
       snapToInterval={screenHeight}
       decelerationRate={'fast'}
       scrollEventThrottle={250}
       pagingEnabled
       showsVerticalScrollIndicator={false}
       vertical={true}
       scrollEnabled={true}
       style={{flex: 1}}
       data={videos}
       renderItem={this.renderItem}
       keyExtractor={this.keyExtractor}
       onViewableItemsChanged={this.onViewableItemsChanged}
       initialNumToRender={0}
       maxToRenderPerBatch={1}
       windowSize={2}
       getItemLayout={this.getItemLayout}
       onEndReached={this.onEndReached}
       onEndReachedThreshold={0.1}
       viewabilityConfig={viewabilityConfig}
       removeClippedSubviews={true}
     />
 </View>
  viewabilityConfig = {
     itemVisiblePercentThreshold: 75,
  };

Tested:

  • both Stream and loadAsync => same behaviour.
  • alternative public data sources => same behaviour
  • no videos to load => no problem

Hypotheses:

  • Android - and Expo-AV: on IOS without problems stacks have been regularly found since about 2018, unfortunately so far without solutions, based on a connection between Expo player and Android
  • Upload - which errors/optimisations are possible
  • Download - which errors/optimisations are possible?

After 10 days of optimisation & search for causes, now my call for help … Many thanks in advance.

1 Like

I am facing a similar memory challenge with a flatlist of videos - so help or advice would be really appreciated. :+1:

Flatlist has really bad performance problems on Android.

I use the native recyclerlistview

But you can try this library to see if there is improvement

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.