How to Make your React Native App Restricted to Portrait Orientation

By Rashid •  Updated on: January 8th, 2023 • 

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

<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.

React Native iOS Portrait Only

react native portrait only

That’s how you restrict a react native app to portrait orientation for Android and iOS devices.

Rashid

Keep Reading