React Native upgrade breaks video background layering on Android (react-native-video 6.14.0)

I’m upgrading a React Native app from version 0.74.3 to 0.79.2, and also updating react-native-video from 6.3.0 to 6.14.0.

Before this upgrade, a full-screen background video rendered correctly behind the rest of the content. After the upgrade, on Android only, the video seems to cover all child content. Nothing renders above it, even though the content is present in the component tree.

Here’s a simplified version of the setup:

OnboardingVideoPlayer

const OnboardingVideoPlayer = ({ children, ...props }: Props) => {
  const [pause, setPause] = useState(true);
  const appState = useAppState();
  const videoRef = useRef<VideoRef>(null);

  useFocusEffect(
    useCallback(() => {
      videoRef.current?.seek(0);
      videoRef.current?.resume();
      setPause(false);
      return () => setPause(true);
    }, [appState])
  );

  return (
    <VideoContainer>
      <Video
        ref={videoRef}
        source={props.video}
        repeat={props.repeat}
        style={style.container}
        resizeMode="cover"
        controls={false}
        fullscreen
        playInBackground={false}
        paused={pause || appState !== 'active'}
      />
      {children}
    </VideoContainer>
  );
};

styles:

import styled from '@emotion/native';
import { StyleSheet } from 'react-native';


export const VideoContainer = styled.View(() => ({
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
}));

export const style = StyleSheet.create({
  container: {
    height: '100%',
    width: '100%',
    position: 'absolute',
    backgroundColor: 'black',
  },
});

Usage example:

<OnboardingVideoPlayer video={OpenerVideo} repeat>
  <Text>This should render above the video</Text>
</OnboardingVideoPlayer>

What’s going wrong

After the upgrade:

• The video covers the entire screen and all children passed to OnboardingVideoPlayer are hidden.
• If I comment out the component or replace it with a , the child content renders as expected.
• This only happens on Android. iOS behaves correctly.

Conclusion

It seems the Video component now renders on top of the React view hierarchy, even when position: 'absolute' is set. Has anyone encountered similar behavior in react-native-video after upgrading?

Any idea how to ensure content renders above the video again?

Thanks in advance!

I was able to fix the issue — posting the solution in case it helps someone else.

The problem was caused by the fullscreen prop in the <Video /> component. Simply removing fullscreen resolved the issue:

<Video
  ref={videoRef}
  repeat={props.repeat}
  source={props.video}
  style={style.container}
  resizeMode="cover"
  controls={false}
  playInBackground={false}
  enterPictureInPictureOnLeave={false}
  ignoreSilentSwitch="obey"
  paused={pause || appState !== 'active'}
  // fullscreen     ⛔️ this caused the layering issue on Android
/>

Once I removed that prop, the background video rendered correctly behind other components on Android. No need to change useTextureView or other props.