[BUG] Android: Video overflows container with resizeMode="cover" in grid layouts

[adids1221]

Version
6.13.0

What platforms are you having the problem on?
Android

System Version
[Your Android version, e.g., Android 14 SDK 34]

On what device are you experiencing the issue?
Real device, Simulator - Pixel 9

Architecture
[New architecture with interop layer / Old architecture]
RN 0.77 new arch

What happened?
When using Video component with resizeMode="cover" in a grid layout (multiple videos side-by-side), the video content overflows its container boundaries and bleeds into adjacent video cards, even when the container has overflow: 'hidden' set.

Expected behavior:
Video should be clipped to container boundaries and not overflow into adjacent cards.

Actual behavior:
Video content overflows the container and appears in adjacent video cards, creating visual overlap.

How to reproduce:

1. Create a 2-column grid layout with multiple Video components side-by-side
2. Set resizeMode="cover" on each video
3. Set container width to 48% (or similar) so videos are side-by-side
4. Set overflow: 'hidden' on the container
5. Observe video content overflowing into adjacent cards

**Minimal reproduction code:**sx

import React from 'react';
import {StyleSheet, View} from 'react-native';
import Video from 'react-native-video';

const videoUrls = [
  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
];

export default function TestScreen() {
  return (
    <View style={styles.container}>
      <View style={styles.grid}>
        {videoUrls.map((url, index) => (
          <View key={index} style={styles.card}>
            <Video
              source={{uri: url}}
              style={styles.video}
              resizeMode="cover"
              repeat
              paused={false}
              muted
            />
          </View>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  card: {
    width: '48%',
    height: 200,
    marginBottom: 16,
    borderRadius: 8,
    overflow: 'hidden', // This doesn't prevent overflow on Android
    backgroundColor: '#000',
  },
  video: {
    width: '100%',
    height: '100%',
  },
});

Additional notes:

• Issue only occurs with resizeMode="cover" (works fine with contain or stretch)
• Issue is specific to Android (ExoPlayer) - iOS works correctly
• The overflow happens even with multiple layers of overflow: 'hidden' containers
• This appears to be an ExoPlayer rendering issue where the video surface extends beyond its bounds

[aditya-thummar-devx]

@adids1221 Not sure, if you are still looking for the solutions, But anyone coming for this issue, I have tried this #4635 (comment) and it works for me.