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?

Answer 1

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

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

Answer 2

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 3

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 4

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

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