React Native: Allow only a certain screen to change orientation

Question

I was wondering if it is possible to lock all screens on iOS and Android, except for one screen. I have a video player that I want to show in full screen after rotation, but all other screens need to be the only portrait.

I use react-native-video for this.

I manage to get it rotating when using the samples but I need to set the possible orientations in XCODE and Android studio.

I also tried react-native-orientation and put a .lockToPortrait() on it but after tilting, it changes again.

Any help is appreciated

Answer 1

I've been through something similar. I want to lock only one screen to landscape. I've tested both react-native-orientation and react-native-orientation-locker. Neither of them worked as expected. It locks for the first time, but after going back and forth to the locked landscape screen, it slips to portrait.

However, I managed to register for an addOrientationListener to make a double check and force it to always stay in landscape. See code bellow.

_onOrientationDidChange = (orientation) => {
  if (orientation == 'PORTRAIT') {
    Orientation.lockToLandscapeLeft();
  }
};

componentDidMount() {
  Orientation.lockToLandscapeLeft();
  Orientation.addOrientationListener(this._onOrientationDidChange);
}

componentWillUnmount() {
  Orientation.unlockAllOrientations()
  Orientation.removeOrientationListener(this._onOrientationDidChange);
}

Even if it slips to portrait, it goes back to landscape.

Maybe you could create a Superclass with the above behaviour and make every screen extend it, expect for that one.