react native Video with flatList (with multiple video) on Scrolling App not responding and crashed the app

[iasreact1]

I am using react-native-video-5.2.1, don't know whether use android exo-Player or mediaPlayer. There are so many videos in the flatlist and when get Scrolled it get stuck the UI and app not responding error, Please help what to do for solving it, but if i use the video plaer to another page for playing the video then it working fine but when playing the video within the Flatlist ANR is coming every time & every Device, Please help ...to overcome it..

[LucasHimelfarb]

Your UI was blocked because Your UI is likely freezing because the listing is not optimized, either because you are displaying many heavy elements or because there is a design anti-pattern in your code causing multiple renders depending on state variables that are being updated. But without a code sample, it's difficult to know for sure.

[iasreact1]

@LucasHimelfarb i have an api call 10 data per page and there is multiple state variable for video play/pause, mute/unmute etc loading opacity, and if i use a log that will print 10 times for the first rendering ...how can i improve the performance?

[krunalinfynno]

i am getting same issue as well.

[LucasHimelfarb]

@iasreact1 @krunalinfynno Im sorry for the late answer. The Flatlist`ve many props to improve perfomance, for example the props "removeClippedSubviews" and "getItemLayout". You can see all props here: https://reactnative.dev/docs/flatlist

If anyone have some issue please share some code to detect common problems

[trubnikovr]

@LucasHimelfarb
I'm using a modal with a FlatList inside it as a horizontal slider. I've noticed that if I slide and the video is still playing, then the app crashes.

[freeboub]

If someone can provide a sample app, it would be very useful to reproduce (and fix) the issue!

[EuSet]

here is a stack trace if it can be helpful. version 6.1.1

[freeboub]

@KrzysztofMoch can you please have a quick look to this callstack ?

[freeboub]

regarding to the initial issue, I created a flat list sample here: https://github.com/freeboub/react-native-video-flatlist-sample
It seems to work fine

[KrzysztofMoch]

@KrzysztofMoch can you please have a quick look to this callstack ?

Seems like crash is caused by setting some metadata properties (probably image)

[freeboub]

@EuSet It would need to be tracked in a dedicated ticket

@KrzysztofMoch On this line, asset is nil ?

let metadata = currentItem.asset.commonMetadata + currentItem.externalMetadata

[KrzysztofMoch]

@freeboub no it would crash differently - it will be lower, probably in place when we are setting NowPlayingInfo data eg artwork

[freeboub]

@EuSet can you please open a new ticket, I close this one.