How to Make your React Native App Restricted to Portrait Orientation

Some famous apps out there such as Instagram are restricted to portrait orientation. You may also want your react native app to support portrait orientation only.

By default, react native works on both orientations- portrait and landscape. Let’s check how to restrict the app to portrait in react native.

To make the app portrait only you need to make changes specifically for Android as well as iOS.

React Native Android Portrait Only

First, open the Android manifest file which is located at YourProject/android/app/src/main/AndroidManifest.xml
Inside the activity tag, add the following attribute:
android:screenOrientation=”portrait”
Now the AndroidManifest.xml file looks below:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.sample">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:networkSecurityConfig="@xml/network_security_config"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

That’s enough, android devices will get restricted to portrait orientation.