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 anything helpful.
React Native app is pretty much just a normal iOS application, so you can do it in exactly the same way as you do for all other apps. Simply uncheck (in XCode) the "Landscape Left" and "Landscape Right" as allowed Device Orientations in the General application properties:
-
thx! one more question, I checked
portrait
andupside down
, but my app didn't autorotate when I rotate simulator's screen (90 degree twice), what's the problem? – zachguo Aug 24 '15 at 16:04 -
Tried that. Doesn't seem to work with RN 34 when running on an iPad (Pro) simulator. It does, however, work when running on an iPhone simulator. I need it to work on an iPad though. Strange. – Pedram Oct 31 '16 at 20:36
-
1Turns out I need to set "Devices" as iPad and not "Universal" like it was before. That made it work. – Pedram Nov 3 '16 at 13:28
-
Mr @Jarek Potiuk i have a small doubt, actually when i was run my simulater defaultly shows landscapemode, i had use landscapeleft& right . but, rightnow its not show the landscape mode in device. i am using react native orientation module and in xcode select landscape left & right. but, i didn't get – Lavaraju Feb 13 '17 at 5:18
-
3This doesn't work for some reason anymore. At least not in
react-native 0.45.1
– MattyK14 Jul 14 '17 at 18:53
For iOS, Jarek's answer is great.
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:
<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>
See full list of available screenOrientation properties in the docs, here: https://developer.android.com/guide/topics/manifest/activity-element.html
-
2This worked perfectly. Just for the benefit of others who are using VS Code: execute 'Run Android on Device/Simulator' from 'Command Palette...'. Shaking the device to 'Reload' the app will not work. – Rishi Feb 27 '18 at 12:09
2017 Update: {"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.
Setting orientation at build time:
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.
Setting orientation at runtime:
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.
Detecting the rotation:
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.
Documentation:
For more info see:
-
2
-
Is there way to separate it, Like Ipad allow landscape and Iphone only portrait ? – 7urkm3n Nov 29 '18 at 21:29
-
This is the solution that works in my case. My main view make a 180 deg rotation after closing interstitial ad. So I should make a hard coded Expo.ScreenOrientation.allowAsync(Expo.ScreenOrientation.Orientation.LANDSCAPE_LEFT); – Hermann Schwarz Jan 28 '19 at 19:27
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
-
2
-
-
Hi, I changed my orientation in my app.json to "portrait" and still when i rotate my device, the items on the screen dont rotate but when i press of a text input the keyboard is rotated. Why is that happening? – kd12345 Dec 23 '20 at 13:52
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
For Android: In your manifest file put:
xmlns:tools="http://schemas.android.com/tools"
Then inside the application tag put:
tools:ignore="LockedOrientationActivity"
And then in all activity set:
android:screenOrientation="portrait"
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>
use this for ios ipad orientaion issue want to change in plist file https://www.reddit.com/r/reactnative/comments/7vkrfp/disabling_screen_rotate_in_react_native_both/
IOS:
<key>UISupportedInterfaceOrientations</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationPortraitUpsideDown</string> </array>
-
1A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. Answers that are little more than a link may be deleted. – double-beep Feb 21 '19 at 11:31
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.
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>
IOS :
Simple you have to uncheck rotation mode from your XCODE
ref from ANKIT-DETROJ answer.
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
});
sensorPortrait
to work properly. It would never support upside down Portrait (i.e.reversePortrait
). However, usingfullSensor
did work but it had the caveat of also allowing landscape. That ended up being fine for me but if you only wantportrait
andreversePortrait
, you can intercept the orientation change in your Activity withonConfigurationChanged
andnewConfig.orientation
and just ignore or override landscape changes. – Joshua Pinter Apr 6 '19 at 15:06