Customize X control on react-native-video

Question

Is there any possibility to customise the event on X for react-native-video? To summarise my problem i have an app when on press play it will trigger a modal with a fullscreen video and starts to play automatically, this is the behavior i was seeking. Video example

But then my issue is when i close the video it looks like is still playing on background. I tried to pass a onClose prop to close the modal but still facing the same issue.

This is what i tried: Parent component:

              <Modal
                style={{justifyContent: 'center', alignItems: 'center'}}
                animationType="slide"
                transparent={false}
                visible={modalVisible}
                supportedOrientations={['portrait', 'landscape']}
                onRequestClose={() => {
                  setModalVisible(!modalVisible);
                }}>
                 {modalVisible && <View
                  style={{
                    backgroundColor: colors.background,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <VideoPlayer onClose={() => setModalVisible(!modalVisible)}/>
                </View>}    
              </Modal>

Video player:

import React, {
  Component
} from 'react';

import {
  StyleSheet,
  Dimensions,
} from 'react-native';


import Video from 'react-native-video';

// Dimensions
const {width, height} = Dimensions.get('screen');

class VideoPlayer extends Component {
  constructor(props) {
    super(props);

    const isPortrait = () => {
      const dim = Dimensions.get('screen');
      return dim.height >= dim.width;
    };

    this.state = {
      orientation: isPortrait() ? 'portrait' : 'landscape'
    }

     // Event Listener for orientation changes
     Dimensions.addEventListener('change', () => {
      this.setState({
        orientation: isPortrait() ? 'portrait' : 'landscape'
      });
    });
  }

  render() {

    return (
        <Video
        fullscreen={true}
        onFullscreenPlayerWillDismiss={() => this.props.onClose()}
        onEnd={() => this.props.onClose()}
        playWhenInactive={false}
        playInBackground={false}
        ref={p => { this.videoPlayer = p; }}
        source={{uri: 'https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4'}}
        style={{width: this.state.orientation === 'landscape' ? height : width, height: this.state.orientation === 'landscape' ? width : height }}
        controls={true}
        fullscreenOrientation="all"
      />
    )
     
  }

}

const styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

export default VideoPlayer;

If anyone faced similar issue please let me know. Thanks in advance.

score 0 · Answer 1 · answered Apr 24 '21 at 09:19

Solved by using the package react-native-video-controls and customise the onBack prop:

<VideoPlayer
        onBack={() => this.props.onClose()}
        fullscreen={true}
        onExitFullscreen={() => this.props.onClose()}
        onEnd={() => this.props.onClose()}
        playWhenInactive={false}
        playInBackground={false}
        source={{uri: 'https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4'}}      
        fullscreenOrientation="all"
      />

Customize X control on react-native-video

1 Answers1