CODEWITHSUNDEEP
react-native
Adam Katz
Adam Katz

Reputation: 6962

React Native landscape mode for only one page

Is it possible in react native to have the app run in portrait mode but have one page run in landscape mode? I know in xcode you have to select portrait or landscape at the beginning so I am a little confused as to how to make all pages in the app portrait except one.

Upvotes: 16

Views: 22403

Answers (4)

Jo Momma
Jo Momma

Reputation: 1307

if you are using expo try this package: https://docs.expo.dev/versions/latest/sdk/screen-orientation

Upvotes: 1

Ajmal Hasan
Ajmal Hasan

Reputation: 1569

In react navigation v6 you can do this:

  <AppStack.Screen
    name="VehiclesDetailsAuction"
    component={VehiclesDetailsAuction}
    options={{ orientation: 'portrait' }}
  />
  <AppStack.Screen
    name="VehicleImageView"
    component={VehicleImageView}
    options={{ orientation: 'all' }}
  />

Upvotes: 17

Naved Khan
Naved Khan

Reputation: 1947

I Hope this answer will help you

Project->_text->android->app->src->main->AndroidManifest.xml

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

    <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:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="landscape"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        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>

only this one line add on your project in your 

android:screenOrientation="landscape"

Upvotes: 4

G. Hamaide
G. Hamaide

Reputation: 7106

There is a very well built package : react-native-orientation

The only downside is that you'll need to specify in every scene of your app the orientation with :

Orientation.lockToPortrait();

or

Orientation.lockToLandscape();

Upvotes: 10

Related Questions