Video Player in a Flatlist(Feed behavior) Slows app performance

[tdammy92]

What are you trying to do?

I am currently working on an app similar to tiktok feeds, but i noticed performance deeps when you have watched some certain amount of videos. the app becomes slower and way more worst on android, it leads to out of memory issue and tends to crash.

am open to any suggestion.

What have you tried?

i have tried different technics to resolve this issue.

• controlling the playing and pausing using ref so as to play only the current video in view.
• setting seek to 0 when the user scrolls to a new item on the feed.
• tried using different bufferConfig to see if it makes any difference.

Relevant code

No response

Version

No response

Platforms

Android

[thedev204]

Hi, i'm working on a feature-rich short reels library for react native. react-native-flash-reels

using just Flatlist will not help, you can give a try to @shopify/flash-list.
also you need to work on buffering and recycling.

[tdammy92]

@thedev204 Thank you for the suggestion. i switched to Flashlist, scrolling the list was a little bit better but as the user continues scrolling the performance starts degrading. have also tried playing around the bufferConfig, but it tends to affect the video load time and not much on the performance. can you explain more on the recycling bit.

[thedev204]

Hey! @tdammy92 So the core idea with FlashList is that it reuses the exact same component instances as you scroll instead of destroying and creating new ones.

The catch is that <Video> components are extremely heavy (due to hardware decoders, textures, and buffers). If you just drop videos into a FlashList, you'll still hit OOM crashes on Android because too many video players are being kept alive in the background.

To handle the "recycling" part correctly, try these two things:

1. Lazy Mount the Videos: Only render the actual <Video> component for the currently active index (and maybe ±1 item away). For all other items in the list, just render a lightweight poster <Image>. This instantly drops your memory footprint.
2. Add a Recycling Guard: Because FlashList reuses the cell, the React component doesn't unmount when it gets a new video to play—it just gets new props. Keep a useRef of the item.id. When you detect that the id has changed inside that component, forcefully seek(0) and pause the player so the previous video's buffer doesn't leak into the new item.

Give the poster-image trick a shot; it usually stops those Android OOM crashes completely!

[TWG-AI]

FlatList + react-native-video in a TikTok-style feed is a common challenge. Key techniques that help:

1. Use FlashList (@shopify/flash-list) instead of FlatList for better view recycling
2. Pause off-screen videos via the paused prop tied to the current visible index — never let more than 1–2 videos play simultaneously
3. Limit mounted players: unmount videos that are >2 items away from the current position to free memory (critical on Android to prevent OOM crashes)
4. v7 is better suited for feed UIs — useVideoPlayer with replaceSourceAsync is faster for source swapping than unmounting/remounting, and VideoPlayer.preload(source) preloads the next item
5. Set a memory budget: tune bufferConfig.maxBufferMs to avoid keeping too much video data in memory across multiple players