Disable Screen Rotation Landscape Mode in Android iOS React Native

Both android and iOS devices has 2 different orientation mode means the application area can be changeable in 2 different shapes. The Portrait mode is default mode in mobile phone and the Landscape mode is the 2nd mode in which screen will rotate 90°. By default we can manage both orientations from mobile phone setting options and all the apps is enabled both modes, But sometimes which specific user requirement developer need to Disable Screen Rotation Landscape Mode in Android iOS React Native application. We can do this by simply putting 1 line of code in android and in iOS we have to perform a specific step. So let’s get started 🙂 .

Contents in this project Disable Screen Rotation Landscape Mode in Android iOS React Native App example :

Disable Landscape mode in Android Apps :

1. Open Your_React_Native_Project -> android -> app -> src -> main -> AndroidManifest.xml file.

2. Find activity area in AndroidManifest.xml and put android:screenOrientation="portrait"  line inside it like i did in below screenshot.

3. After making changes in AndroidManifest.xml file you need to run  react-native run-android command to see the effects. This would disable the landscape mode in your current application in android devices.

Screenshot of Android app after disabling the rotation :

Disable Landscape mode in iOS iPhone Apps :

1. Open Your_React_Native_Project -> ios -> Project_Name.xcodeproj file in X-Code.

2. After opening the project in Xcode select your project name like i did in below screenshot.

3. Now Goto -> General -> Deployment Info and only select the Portrait mode.

4. Execute the react-native run-ios  command and compile the complete project and to see the effect 🙂 .

Screenshot of iOS app after disabling the rotation :