How to disable landscape mode in React Native Android dev mode?

AndroidReact NativeReact Native-Android

Android Problem Overview


I am new to android environment. I know iOS can be done in Xcode to disable device orientation. How can I disable landscape mode or any orientation mode in React Native Android?

Thanks.

Android Solutions


Solution 1 - Android

Add android:screenOrientation="portrait" to the activity section in android/app/src/main/AndroidManifest.xml file, so that it end up looking like this:

<activity
    android:name=".Activity"
    android:label="Activity"
    android:screenOrientation="portrait"
    android:configChanges="keyboardHidden|orientation|screenSize">
</activity>

There are several different values for the android:screenOrientation property; for a comprehensive list take a look at the following: https://developer.android.com/guide/topics/manifest/activity-element.html

Solution 2 - Android

http://developer.android.com/guide/topics/manifest/activity-element.html

add android:screenOrientation="portrait" to your activity xml

Solution 3 - Android

As @morenoh149 stated above the property name and value to do this is android:screenOrientation="portrait". React Native generates a file called AndroidManifest.xml in your project directory under the Android folder. Within that xml file under the tag manifest/application/activity you would add the line android:screenOrientation="portrait"

An example is shown below

http://schemas.android.com/apk/res/android" package="com.dtm">

<uses-permission android:name="android.permission.INTERNET" />

<application
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    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>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

Solution 4 - Android

Harry Moreno's comment is correct. Add it to android/app/src/main/AndroidManifest.xml in the 'activity' section. Also change

android:configChanges="keyboard|keyboardHidden|orientation|screenSize"

to android:configChanges="keyboard|keyboardHidden|screenSize"

removing orientation so it doesn't conflict with the new line added, android:screenOrientation="portrait"

Solution 5 - Android

2017 Update

In addition to the solutions posted above if you're using Expo to build your app (as is currently recommended in official guides on React Native Blog) then all you need is to set orientation in app.json to "portrait" or "landscape" and make it work on both iOS and Android at the same time with no need to edit iOS/Android-specific XML configuration files:

"orientation": "portrait"

Example:

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

You can also use this at runtime:

ScreenOrientation.allow()

Example:

ScreenOrientation.allow(ScreenOrientation.Orientation.PORTRAIT);
More details:

For more info see: https://stackoverflow.com/questions/32176548/how-to-disable-rotation-in-react-native/46671734#46671734

Solution 6 - Android

The accepted answer doesn't work if you're using react-native-navigation. Use this instead:

Navigation.setDefaultOptions({
    layout: {
        orientation: ["portrait"],
    },
});

Check the docs here.

Solution 7 - Android

You can simply the logic by adding a lifecycle callback in ReactApplication class:

public class MyApplication extends Application{

@Override
    public void onCreate() {
        super.onCreate();  

  registerActivityLifecycleCallbacks(new ActivityLifecycleCallbacks() {
            @Override
            public void onActivityCreated(Activity activity, Bundle bundle) {
                // Here we specify to force portrait at each start of any Activity
                activity.setRequestedOrientation(
                        ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

            }

            @Override
            public void onActivityStarted(Activity activity) {

            }

            @Override
            public void onActivityResumed(Activity activity) {

            }

            @Override
            public void onActivityPaused(Activity activity) {

            }

            @Override
            public void onActivityStopped(Activity activity) {

            }

            @Override
            public void onActivitySaveInstanceState(Activity activity, Bundle bundle) {

            }

            @Override
            public void onActivityDestroyed(Activity activity) {

            }
        });
}

So you don't need to configure AndroidManifest

Solution 8 - Android

Just open your android/app/src/main/AndroidManifest.xml

And add this line android:screenOrientation="portrait" and android:configChanges="keyboard|keyboardHidden|orientation|screenSize inside activity section

It looks something like that

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

If it does not work than you can use react-native-orientation

Solution 9 - Android

For React Native Navigation it could be fixed with defining orientation as described here:

Navigation.setDefaultOptions({
  layout: {
    orientation: ['portrait']
  }
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsunglView Question on Stackoverflow
Solution 1 - AndroidGem UbaldoView Answer on Stackoverflow
Solution 2 - AndroidHarry MorenoView Answer on Stackoverflow
Solution 3 - AndroidbretView Answer on Stackoverflow
Solution 4 - AndroidmixophrygianView Answer on Stackoverflow
Solution 5 - AndroidrspView Answer on Stackoverflow
Solution 6 - Androidromin21View Answer on Stackoverflow
Solution 7 - AndroidodemolliensView Answer on Stackoverflow
Solution 8 - AndroidBhupendra DangiView Answer on Stackoverflow
Solution 9 - AndroidIvan VerevkinView Answer on Stackoverflow