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.
