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.

2 Likes

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

1 Like

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