CODEWITHSUNDEEP
iosreact-native
zachguo
zachguo

Reputation: 6716

how to disable rotation in React Native?

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 anything helpful.

Upvotes: 171

Views: 159881

Answers (13)

Buzzy
Buzzy

Reputation: 1924

<Stack.Navigator initialRouteName="Splash"

    screenOptions={() => ({
      orientation: isTablet() ? 'all' : 'portrait'
    })}>

<Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />

Upvotes: 0

Muhammad Ahmed Hassan
Muhammad Ahmed Hassan

Reputation: 539

If you're using react-navigation then you can simply pass

screenOptions={{ orientation: 'portrait'}}

For Stack Navigation, we can pass this property either like this:

enter image description here

or like this:

enter image description here

Upvotes: 17

ANKIT DETROJA
ANKIT DETROJA

Reputation: 2065

Answer for disable rotation in React Native.

For Android :

Go to the AndroidManifest.xml file and add one line : android:screenOrientation="portrait"

         <activity
            android:name=".MainActivity"

            android:screenOrientation="portrait"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
          </activity>

For IOS :

Simple you have to check or uncheck rotation mode from your XCODE

enter image description here

Upvotes: 53

qqqwerqqq
qqqwerqqq

Reputation: 71

For Android open AndroidManifest.xml file then add android:screenOrientation="portrait" to activity tag and your code should be like that.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustResize"
    android:screenOrientation="portrait" 
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
</application>

Upvotes: 0

Ankit Adlakha
Ankit Adlakha

Reputation: 1486

For Android: In your manifest file put: 

xmlns:tools="http://schemas.android.com/tools"

Then inside the application tag put:

tools:ignore="LockedOrientationActivity"

And then in all activity set:

android:screenOrientation="portrait"

Upvotes: 7

Paresh chavda
Paresh chavda

Reputation: 345

For Android, you need to edit the AndroidManifest.xml file. Add the following line to each activity that you want to lock into portrait mode:

android:screenOrientation="portrait"

So, a full example might look like this:

 <application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme">

  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize"
    android:screenOrientation="portrait">

    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>

  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

Upvotes: 7

Filip Kwiatkowski
Filip Kwiatkowski

Reputation: 665

You can use react-native-orientation-locker module and lockToPortrait() function.
This can be helpful if you would also like to have some of the screens with unlocked orientation - in this case you could also use unlockAllOrientations() function.

Upvotes: 3

Ravindra
Ravindra

Reputation: 113

use this for ios ipad orientaion issue want to change in plist file https://www.reddit.com/r/reactnative/comments/7vkrfp/disabling_screen_rotate_in_react_native_both/

IOS:

<key>UISupportedInterfaceOrientations</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationPortraitUpsideDown</string> </array>

Upvotes: 1

Idan
Idan

Reputation: 4023

If you using Expo you can do it simply with this code:

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

Put it on App.js before render

All options:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

Upvotes: 3

Manoj
Manoj

Reputation: 994

If you are using RN expo project, and app contains react-navigation, then setting up the navigation to the following code helped me.

const AppNavigator = createStackNavigator(
{
    Page1: { screen: Page1}
},
{
    portraitOnlyMode: true
});

Upvotes: -3

rsp
rsp

Reputation: 111316

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:

Upvotes: 83

Jim Wilson
Jim Wilson

Reputation: 1648

For iOS, Jarek's answer is great.

For Android, you need to edit the AndroidManifest.xml file. Add the following line to each activity that you want to lock into portrait mode: 

android:screenOrientation="portrait"

So, a full example might look like this: 

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize"
        android:screenOrientation="portrait">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

See full list of available screenOrientation properties in the docs, here: https://developer.android.com/guide/topics/manifest/activity-element.html

Upvotes: 159

Jarek Potiuk
Jarek Potiuk

Reputation: 20067

React Native app is pretty much just a normal iOS application, so you can do it in exactly the same way as you do for all other apps. Simply uncheck (in XCode) the "Landscape Left" and "Landscape Right" as allowed Device Orientations in the General application properties:

Device orientation

Upvotes: 191

Related Questions