A Short Note – How To Disable Screen Rotation In React Native ?

|

CoolMonkTechie

React Native Disable Screen Rotation
by

Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (How To Disable Screen Rotation In React Native).

In this note series, we will learn how to Disable Screen Rotation In React Native. Handheld mobile devices always have two orientation mode Portrait mode and Landscape mode because of their design to hold in the hand. Portrait mode is by default mode in mobile devices, and if we rotate the device, it turns into Landscape mode.

So Let’s begin.

For Android Devices

  • Open Project -> android -> app -> src -> main ->AndroidManifest.xml .
  • Now, we have to put android:screenOrientation=“portrait” in AndroidManifest file. 
  • After changing AndroidManifest.xml file, we need to re-run our project. This would disable the landscape mode in our current application in android devices.

Android Manifest file - Landscape Mode
Android Manifest file – Landscape Mode

For iOS Devices

  • Open Project ->ios -> Project_Name.xcodeproj file in XCode.
  • After opening the project in XCode, select project name.
  • Now Goto -> General -> Deployment Info and only select the Portrait mode.
  • Now Re-run our project. This would disable the landscape mode in our current application in iOS devices.

iOS XCode - Landscape Mode
iOS XCode – Landscape Mode

Conclusion

In this note series, we understood how to Disable Screen Rotation in React Native. This article showed the Disable Screen Rotation Steps in React Native.

Thanks for reading ! I hope you enjoyed and learned about Disable Screen Rotation Concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.

Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

You can find Other articles of CoolmonkTechie as below link :

You can also follow official website and tutorials of React Native as below links :

If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.

Thanks again Reading. HAPPY READING!!???

Loading

Summary
A Short Note - How To Disable Screen Rotation In React Native ?
Article Name
A Short Note - How To Disable Screen Rotation In React Native ?
Description
In this note series, we will learn how to Disable Screen Rotation In React Native. Handheld mobile devices always have two orientation mode Portrait mode and Landscape mode because of their design to hold in the hand. Portrait mode is by default mode in mobile devices, and if we rotate the device, it turns into Landscape mode.
Author

Leave a Comment