VideoTrack Surface conflict on Android when rendering in FlatList with multi-column layout

[arekkubaczkowski]

Describe the bug

When rendering LiveKit’s VideoView components in a paginated FlatList with multiple tiles per screen (e.g. two columns or a grid of video tiles), we are experiencing severe rendering glitches on Android: • The same participant’s video appears in multiple tiles, even though each tile is meant to render a different participant. • Occasionally, a tile shows a blend or flicker of multiple video streams. • In some cases, a tile appears black or blank. • The issue only happens on Android, and does not occur on iOS. • If we switch to rendering a single column (1 tile per page), the problem disappears entirely.

Context & Observations • We are rendering a horizontal FlatList with paging enabled. • Each page shows up to 6 participants in a 2-column layout (e.g. 2x3 grid). • We suspect the issue is related to how Android handles SurfaceView, possibly due to view recycling or overlapping surfaces.

I am entirely sure that there is no issue with any missing keys or something like that. On iOS it works perfectly smooth.

https://github.com/user-attachments/assets/ca1dca70-1691-4013-a3fc-b085c603f449

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Device Info:

• Device:
• OS: Android

Dependencies Info (please reference your package-lock.json or yarn.lock file, not just your package.json):

"@livekit/react-native": "2.6.5" "livekit-client": "2.9.8" "@livekit/react-native-expo-plugin": "^1.0.1" "@livekit/react-native-webrtc": "125.0.9"

Additional context Add any other context about the problem here, such as crash logs and stack traces if applicable.