React Native Disable Screen Rotation

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

2 thoughts on “React Native Disable Screen Rotation”

  1. 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?


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.