How to switch to full screen(rotate to landscape on click of full-screen button on YouTube player gui) in React Native youtube iframe?

user_17378821 0
Viewed 801

I want to switch the player to landscape mode on click of the full-screen button on the player gui. I am using expo so i used expo orientation, I am able to switch to the landscape mode by calling a function on onfullscreenchange prop, but after exiting fullscreen mode the app is locked in landscape mode. How do i fix it?

my code:

VideoPlayer.js

    import React from "react";
    import { View, Dimensions } from "react-native";
    import YoutubePlayer from "react-native-youtube-iframe";
    
    import * as ScreenOrientation from "expo-screen-orientation";
    
    const VideoPlayer = () => {
      function setOrientation() {
        if (Dimensions.get("window").height > Dimensions.get("window").width) {
          //Device is in portrait mode, rotate to landscape mode.
          ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
        } else {
          //Device is in landscape mode, rotate to portrait mode.
          ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
        }
      }
    
      return (
        <View
          style={{
            width: "100%",
            height: 220,
          }}
        >
          <YoutubePlayer
            height={300}
            play={false}
            videoId={"Dv7gLpW91DM"}
            onFullScreenChange={setOrientation}
          />
        </View>
      );
    };
    
    export default VideoPlayer;
youtube-iframe-api expo react-native youtube-api iframe
1 Answers

You can use the boolean returned from onFullScreenChange to determine if the player is in fullscreen or not and from there, set the correct orientation, I'm unable to test now but it should be something like that

onFullScreenChange={isFullscreen => { 
    if(isFullscreen) { setOrientationToPortrait() } 
    else { setOrientationToLandscape() }
}
user_31004090
Related