Orientation help

Hi,

I would like my app to remain to Portrait mode apart from one page where i want to force it to be Landscape.
In my app.json i have:

{
  "expo": {
    "sdkVersion": "23.0.0",
    "orientation": "portrait"
  }
}

On the page where i want to force landscape i have:
Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.LANDSCAPE_RIGHT);

However, this is setting the whole application to Landscape instead of just the desired view.

I have put:
Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.PORTRAIT);
On the page it returns to but this has no effect.

Am i missing something?

Thanks
James

hi @jreason, afaik the runtime orientation api will run on the entire application screen and not meant to occur in a particular view. Could you put a basic reproduction into a snack (snack.expo.io)?

is there a way to do this in a particular view? cc: @janic

Currently the only way to do that is to use the ScreenOrientation API like you mentioned. I think the issue is simply that the code in the screen you return to doesn’t get called because of the way stack navigation works. I think the best way to do what you want is to use componentDidMount and componentWillUnmount in the screen that has the different orientation.

class LandscapeScreen extends Component {
  componentDidMount() {
    Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.LANDSCAPE_RIGHT);
  }

  componentWillUnmount() {
    Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.PORTRAIT);
  }

  render() { ... }
}

I think it would be nice to provide a more declarative API, maybe something like React Native’s StatusBar.

2 Likes

@quinlanj @janic thanks both, the code provided has done the trick!

One thing i have noticed though, when using LANDSCAPE_RIGHT, i would except the screen to render the same way on both iOS and Android, however, the screen goes one way on iOS and the other way on Android?

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.