CODEWITHSUNDEEP
javascriptreact-nativereact-native-ios
Hazim Ali
Hazim Ali

Reputation: 1095

Lock video to landscape fullscreen orientation (react-native-video)

I want to work on some apps that will navigate into video.js file that will automatically trigger the video to play in fullscreen with landscape orientation.

I'm using react-native-video link: https://github.com/react-native-community/react-native-video

render() {

    return (
      <View style={styles.container}>
        <View style={styles.fullScreen}>
          <Video
            ref={(ref) => {
              this.player = ref
            }}  
            source={require('../vid/intro-video.mp4')}
            style={styles.nativeVideoControls}
            rate={this.state.rate}
            paused={this.state.paused}
            volume={this.state.volume}
            muted={this.state.muted}
            resizeMode={this.state.resizeMode}
            onLoad={this.onLoad}
            onLoadStart={this.loadStart}
            onBuffer={this.onBuffer}
            onProgress={this.onProgress}
            onEnd={debounce(this.onEnd, 100)}
            repeat={false}
            controls={this.state.controls}
          />
        </View>
      </View>
    );
  }

I try to add this belo code inside loadStart function but it's not working.. and when I rotate the video appear at the bottom of my screen if not in fullscreen mode. 

this.player.presentFullscreenPlayer()

enter image description here

solution that I tried: 1) using onLayout on the view tag but nothing happened. 2) using this.player.presentFullscreenPlayer() still did not fix the problem.

Upvotes: 4

Views: 9763

Answers (1)

Hazim Ali
Hazim Ali

Reputation: 1095

I still did not find a fix solution for this problem but I just want to share workaround that I did for temporary.

I'm using another package react-native-orientation and trigger lockToLandscape() inside the componentWillMount and then I get the width and height of the device using dimension

Orientation.lockToLandscape();
height = Dimensions.get('window').height;
width = Dimensions.get('window').width;

and I also add the presentFullScreenPlayer inside onLoad method

this.player.presentFullscreenPlayer();

and that I set the width and the height of the video player using the width and height get from the Dimensions of the device...

If you guys have another ways, do share :) Thanks

Upvotes: 1

Related Questions