Disable Screen Rotation
Handheld mobile devices always have two orientation mode Portrait mode and Landscape mode due to there design to hold easily in the hand. Portrait mode is by default mode in mobile devices and if we rotate the device it turns into Landscape mode.
While making an application we normally design for the Portrait mode and let the system manage in Landscape mode (You can manage both) but in some cases, we don’t want the system to change the orientation while the user is using our App. So here is an example of React Native Disable Screen Rotation which will help you to fix the orientation of your app. We can do this by simply putting 1 line of code in android and in iOS we have to perform a specific step.
For this example, you can use already available projects or can take help from here. We will show you the changes that you can do to fix the orientation of your application.
For Android Users
1. Open YourProject -> android -> app -> src -> main -> AndroidManifest.xml
2. Now you need to put android:screenOrientation=“portrait” as shown below
3. After making changes in AndroidManifest.xml file you need to re-run your project. This would disable the landscape mode in your current application in android devices.
For IOS Users
1. Open YourProject -> ios -> Project_Name.xcodeproj file in X-Code.
2. After opening the project in Xcode select your project name.
3. Now Goto -> General -> Deployment Info and only select the Portrait mode.
4. Now Re-run your project. This would disable the landscape mode in your current application in android devices.
This is how you can disable the screen rotation. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!
Hope you liked it. 🙂
Can it be customized for screen size?
I want to have portrait-only on phones, and
both portrait-landscape on tablets/ipad
Any idea how it can be done?
In the case of the iOS app, you can see the options while setting orientation using #3 above but for the Android You need to makes some changes suggested here. You can also see Set Preferred Orientation in React Native which can be the last option as you need to add the code in each screen.