Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to make your react native application rotation lock. here we will learn how lock orientation in react native for ios, and android both.

React Native provide orientation handler but default it will depend upon phone ( auto rotate or not ). but when mantion your application orientation in your project every time it will open on same orientation mode, it will no longer depend on user orientation settings.

let’s see how we will disable orientation in react native ios and android.

Lock orientation in React Native android

For android, React Native provide orientation option in AndroidManifest.xml it will located in your project/android/app/src/main/AndroidManifest.xml.

In AndroidManifest.xml search application tag and add screenOrientation attribute android:screenOrientation="portrait" like below example.

...
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:usesCleartextTraffic="true"
      android:screenOrientation="portrait"
      android:theme="@style/AppTheme"
      android:requestLegacyExternalStorage="true"
      >
        ...
    </application>
...

Lock orientation in React Native iOS

For ios, React Native provide orientation settings in Project/Genral/DeploymentInfo tab. check below highlighted path to navigate DeploymentInfo Tab.

React Native, orientation, lock, Example

Thanks for Reading…