3

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

  • Expo SDK 40.0.0
  • 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.

BusinessDundee
  • 61
  • 5
  • is this a react native question ? if so, please tag it accordingly – a_local_nobody Mar 04 '21 at 10:20
  • we are running into similar issues. Something my logcat notices is that expo-av will cause ExoPlayer to throw this error: 2021-04-19 08:36:06.565 10559-10559/? W/SimpleExoPlayer: Player is accessed on the wrong thread. See https://google.github.io/ExoPlayer/faqs.html#what-do-player-is-accessed-on-the-wrong-thread-warnings-mean Check your logcat as well. There likely is some low level issue with expo, or unimodules where its not properly releasing memory for cleanup by the VM – Jono Apr 19 '21 at 12:37
  • UPDATE: I switched to RecyclerListView (https://github.com/Flipkart/recyclerlistview) - highly recommended. Ok, much more effort in the details, but at the end of the day it was more than worth it. – BusinessDundee Jun 15 '21 at 18:40

1 Answers1

0

I had the same problem with expo-av and react native. I used the solution from here I am sure is not the best one but at least is working.

Felix
  • 41
  • 3