How to Disable Rotation in React Native on iOS

 

This video shows how to disable rotation in React Native iOS apps.

Transcript

You may have noticed that by default React Native apps can be rotated. You can see this in the iOS simulator if you click command-left, or command-right to rotate the simulated device. There we go, rotating to the right. Now you can see that the orientation gives quite a different sort of layout that you have to deal with. This landscape orientation is really quite different from the portrait one.

When you’re developing your app, the best practice would be to develop in a way that it will look good in either orientation, but that can be difficult to do at time. If you want to just disable that rotation and make it so that the app can only be used in perhaps the portrait orientation, here’s how you can do that.

What you want to do is go to Xcode, open the project in Xcode. What you’re going to do is the same that you do with in fact any IOS app. This isn’t going to be something that’s specific to React Native. What you do is your open up the app here, project, and you want to make sure that you’ve got the general tab selected. Go down here and make sure you’ve got awesome projects as the target. You got a number of different device orientations here under the deployment info section – portrait, upside down, landscape left and landscape right. What you want to do is just to disable the two landscape modes. There we go. Rebuild your app.

When this starts up again, we will try again doing the rotation, so command-left and command-right arrow to rotate the simulated device. Here we go, so now we’ll rotate left, and you can see that the display stays in the same orientation. It doesn’t follow the physical rotation, the rotation of the device. We can rotate it to the right, and there we go. It’s the same that way as well.

So you can see, that keeps your life a lot simpler when you’re first developing an app. You don’t have to worry about two different orientations.

1 comment on “How to Disable Rotation in React Native on iOS”

  1. Amy Falconer Reply

    This solution seems a little heavy handed. We’re going to disable rotations for the entire app just to disable rotations in react native? What if I’m presenting the react native view from another view controller, but I still want other views in the app to support landscape mode?

Leave A Reply

Your email address will not be published. Required fields are marked *