Disabling screen rotation in React Native (iOS)

These days, only a handful of applications (minus games) seem to support landscape mode. Application builders are aware of how users interact with their devices as the majority of the public hold their devices in one hand during their daily commutes, buying their groceries and other common day-to-day tasks. Holding your phone in landscape mode is pretty impractical and with JavaScript currently taking over the world, more apps are being built using React Native than ever before.

A common question asked in the React Native community is “how do I prevent/disable screen rotation?” What most React Native developers are actually forgetting to understand is that your React Native application compiles down to a Native application and so what you’re actually building is a native iOS application.

There are no fancy JavaScript one-liners required to prevent the rotation of your React Native application, it’s actually really simple. Enter Xcode.

Select your project in the project navigator in Xcode and then click “General”, scroll down to “Deployment info” and uncheck the device orientations that you don’t want.