React-Native-Video doesn't show control when it is used inside a modal

Question

In my RN application, I use react-native-video. It works properly when it is used inside a screen. Controls are visible. But when I tried it inside a modal, the video works, but the controls are not displayed.

This is the code.

Video player component.

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

import Logger from 'library/logger';

// import { toggleSpinner } from 'Redux/common/common.actions';
import { store } from 'store';

const VideoPlayer = ({ source, ...otherProps }: IProps) => {
  const handleError = (error: LoadError) => {
    Logger.log('VIDEO_LOADING_ERROR', 'Error occured while loading the video', error);
  };

  const onLoadStart = () => {
    // store.dispatch(toggleSpinner(true));
  };

  const onLoadEnd = () => {
    // store.dispatch(toggleSpinner(false));
  };

  return (
    <Video
      source={{ uri: source }}
      controls={true}
      repeat={otherProps.repeat}
      onLoadStart={onLoadStart}
      onReadyForDisplay={onLoadEnd}
      resizeMode={otherProps.videoResizeMode}
      onError={(error: LoadError) => handleError(error)}
      style={styles.videoPlayer}
    />
  );
};

const styles = StyleSheet.create({
  videoPlayer: {
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    height: 300,
  },
});

interface IProps {
  controls: boolean;
  source: string;
  repeat: false;
  videoResizeMode: 'stretch' | 'contain' | 'cover' | 'none' | undefined;
}

VideoPlayer.defaultProps = {
  videoResizeMode: 'stretch',
  repeat: true,
  controls: true,
};

export default VideoPlayer;

Modal.

const VideoModal = ({ active, data, onClose }: IProps) => (
  <Modal
    visible={active}
    // fullScreen={true}
    // animationType='slide'
    onRequestClose={() => onClose()}>
    {/* <View style={styles.modalContentContainer}> */}
    <VideoPlayer source={data.source} />
    {/* </View> */}
  </Modal>
);

Calling the modal like this.

 <VideoModal
        active={videoModalActive}
        data={{
          source:
            'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
          // 'file:///storage/emulated/0/Movies/campaignVideo.mp4',
        }}
        onClose={toggleVideoModal}
      />

Why is the controls are hidden only when running on a modal?

Answer 1

"react-native-video" has this issue, controls are not shown inside a Modal.

Use: npm i react-native-video-controls It server the purpose.

For more details check here