Introduction

Disabling rotation in React Native usually means locking the app, or a specific screen, to portrait or landscape. The implementation depends on whether you want a global platform-level setting or a runtime lock that can change from screen to screen.

Lock Orientation for the Entire App

If every screen should stay in portrait, the cleanest solution is to configure the native projects directly.

Android

Edit android/app/src/main/AndroidManifest.xml and set the activity orientation:

1<activity
2    android:name=".MainActivity"
3    android:label="@string/app_name"
4    android:screenOrientation="portrait"
5    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
6    android:launchMode="singleTask"
7    android:windowSoftInputMode="adjustResize"
8    android:exported="true">
9</activity>

This tells Android to keep the main activity in portrait mode.

iOS

Open ios/YourApp/Info.plist and keep only the orientations you support:

1<key>UISupportedInterfaceOrientations</key>
2<array>
3    <string>UIInterfaceOrientationPortrait</string>
4</array>

If you remove landscape entries, iOS will not rotate the app into those modes.

Lock Orientation for Specific Screens

Some apps want portrait almost everywhere but allow landscape for a video player or chart screen. For that case, a runtime library is more flexible.

One common choice is react-native-orientation-locker.

npm install react-native-orientation-locker

Then lock and unlock in screen lifecycle code:

1import React, { useEffect } from "react";
2import { View, Text } from "react-native";
3import Orientation from "react-native-orientation-locker";
4
5export default function DetailsScreen() {
6  useEffect(() => {
7    Orientation.lockToPortrait();
8
9    return () => {
10      Orientation.unlockAllOrientations();
11    };
12  }, []);
13
14  return (
15    <View>
16      <Text>Portrait only screen</Text>
17    </View>
18  );
19}

This is useful when orientation is part of navigation behavior rather than a global app rule.

Expo Projects

If you are using Expo, orientation is often managed in app configuration and with Expo APIs rather than direct native edits.

1{
2  "expo": {
3    "orientation": "portrait"
4  }
5}

That locks the whole Expo app to portrait. For dynamic control, Expo also provides screen-orientation APIs in managed workflows.

When to Use Each Approach

Use native configuration when the app should never rotate. It is simple, reliable, and does not require runtime state management.

Use a library when orientation changes are part of the product design. For example:

• Portrait for forms
• Landscape for video playback
• Temporary lock during a game screen

Trying to force these behaviors only from JavaScript without matching native configuration often leads to inconsistent results.

Testing the Behavior

Orientation issues are easy to miss if you only test one device. Check:

• Android phone and tablet layouts
• iPhone and iPad behavior
• Navigation transitions when a screen unmounts
• Modals and media screens that may set their own rules

A common pattern is to verify that entering a screen applies the lock and leaving it restores the previous policy.

Some teams also lock orientation to simplify layout work, but that should be a product decision rather than a workaround for weak responsive design. If a screen can be made adaptive with proper flexbox rules, that is often better than preventing rotation entirely. Reserve hard locks for flows where orientation directly affects usability, such as cameras, games, or payment entry screens.

Common Pitfalls

One common mistake is locking orientation only in JavaScript while leaving native configuration wide open. The result can be flicker or unexpected rotations during startup.

Another mistake is forgetting cleanup when using screen-specific locks. If you call lockToPortrait() and never unlock on unmount, later screens may inherit that restriction by accident.

A third mistake is assuming the same setup works for bare React Native and Expo. They have overlapping concepts, but the configuration entry points are different.

Summary

• Disable rotation globally by configuring Android and iOS native settings.
• Use a runtime library when only certain screens should be locked.
• Expo projects usually manage app-wide orientation through app configuration.
• Clean up screen-specific locks so one screen does not affect another.
• Test on both platforms because orientation behavior is partly native, not only React Native code.