how to disable rotation in React Native?

Question

I would like to support only portrait view. How can I make a React Native app not to autorotate? I tried searching documentation and Github issues, but I didn\'t find anythi

Answer 1

2017 Update: {"orientation": "portrait"}

Currently many official React Native guides like this one recommend using Expo when building React Native apps so in addition to existing answers I'll also add an Expo-specific solution which is worth noting because it works for both iOS and Android and you only need to set it once with no need to mess with XCode config, AndroidManifest.xml etc.

Setting orientation at build time:

If you're building your React Native apps with Expo then you can use the orientation field in your app.json file - for example:

{
  "expo": {
    "name": "My app",
    "slug": "my-app",
    "sdkVersion": "21.0.0",
    "privacy": "public",
    "orientation": "portrait"
  }
}

It can be set to "portrait", "landscape" or "default" which means to autorotate with no orientation lock.

Setting orientation at runtime:

You can also override that setting at runtime by running, for example:

Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.LANDSCAPE);

where the argument can be:

• ALL — All 4 possible orientations
• ALL_BUT_UPSIDE_DOWN — All but reverse portrait, could be all 4 orientations on certain Android devices.
• PORTRAIT — Portrait orientation, could also be reverse portrait on certain Android devices.
• PORTRAIT_UP — Upside portrait only.
• PORTRAIT_DOWN — Upside down portrait only.
• LANDSCAPE — Any landscape orientation.
• LANDSCAPE_LEFT — Left landscape only.
• LANDSCAPE_RIGHT — Right landscape only.

Detecting the rotation:

When you allow more than one orientation then you can detect the changes by listening to the change events on the Dimensions object:

Dimensions.addEventListener('change', (dimensions) => {
  // you get:
  //  dimensions.window.width
  //  dimensions.window.height
  //  dimensions.screen.width
  //  dimensions.screen.height
});

or you can also just get the dimensions anytime with Dimensions.get('window') and Dimensions.get('screen') like this:

const dim = Dimensions.get('window');
// you get:
//  dim.width
//  dim.height

or:

const dim = Dimensions.get('screen');
// you get:
//  dim.width
//  dim.height

When you listen to the event you get both window and screen at the same time so that's why you access it differently.

Documentation:

For more info see:

• https://docs.expo.io/versions/latest/guides/configuration.html#orientation
• https://docs.expo.io/versions/latest/sdk/screen-orientation.html
• https://facebook.github.io/react-native/docs/dimensions.html