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

Question

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.

Answer 1

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

Answer 2

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

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

Answer 3

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

<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>

Answer 4

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"

Answer 5

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: how to disable rotation in React Native?

Answer 6

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.

Answer 7

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

Answer 8

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

Answer 9

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

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