How to disable landscape mode in React Native Android dev mode?
AndroidReact NativeReact Native-AndroidAndroid 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
<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']
}
});