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 anythi
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
Answer for disable rotation in React Native.
For Android :
Go to the Androidmenifest.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
{"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.
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.
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 orientationsALL_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.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.
For more info see:
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.
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
});
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>