Create-react-native-app: Orientation does not work

Created on 4 Jul 2017  Â·  12Comments  Â·  Source: expo/create-react-native-app

Description

This is the content of my app.json

{
  "expo": {
    "sdkVersion": "18.0.0",
    "orientation" : "portrait",
    "description" : "..."
  }
}

Expected Behavior

According to the Expo documentation the orientation property should act as:
"Lock your app to a specific orientation with portrait or landscape"

Observed Behavior

It DOES NOT lock the orientation to portrait as expected.

Environment

Please run these commands in the project folder and fill in their results:

  • npm ls react-native-scripts:
    _npm ERR! peer dep missing: react@>=15.4.0, required by [email protected]_
  • npm ls react-native:
    _npm ERR! peer dep missing: react@>=15.4.0, required by [email protected]_
  • npm ls expo:
    _npm ERR! peer dep missing: react@>=15.4.0, required by [email protected]
    npm ERR! peer dep missing: react@>=15.4.0, required by [email protected]
    npm ERR! peer dep missing: react@>=15.3.1, required by [email protected]
    npm ERR! peer dep missing: react@>=15.4.0, required by [email protected]_
  • node -v: _6.11.0_
  • npm -v: _4.1.2_
  • yarn --version: _0.24.6_
  • watchman version: NA

Reproducible Demo

Tried on both a real Android device and a real ios device (Iphone 5)

Most helpful comment

I found that a way to get arround this is to use Expo's: ScreenOrientation component, like:

Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.PORTRAIT_UP );

This solves my problem, but does not change the fact that the orientation property in app.json, does not seem to be read

All 12 comments

I found that a way to get arround this is to use Expo's: ScreenOrientation component, like:

Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.PORTRAIT_UP );

This solves my problem, but does not change the fact that the orientation property in app.json, does not seem to be read

Hello. I just created a new project and tried this, but was unable to reproduce this bug. I tested on both iOS, Android real devices and simulators, with both potrait and landscape modes.

Can you DM me the code on slack @satya164 so I can take a look?

Is this a duplicate of https://github.com/expo/expo/issues/323 ?

Seems so. Weird how @ccheever could repro this, but I couldn't. Could it have something to do with some library version?

Yes, a mentioned by terribleben, this seems to be a duplicate of https://github.com/expo/expo/issues/323

I am having the same issue: but before I begin typing out all of my versions and so on: is the syntax { "expo": { "sdkVersion": "18.0.0", "orientation" : "portrait", "description" : "..." } }

or { "expo": { "sdkVersion": "17.0.0", "name": "Compass", }, "orientation": "portrait" }

Because I've seen both online. Thanks so much!

The first one

Thank you!

On Mon, Jul 17, 2017 at 9:46 AM Satyajit Sahoo notifications@github.com
wrote:

The first one

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/react-community/create-react-native-app/issues/292#issuecomment-315807391,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AUMvuw5etiJtOTyr78_6kmBx7vjBqQNOks5sO46qgaJpZM4ONTzk
.

I found that upon restarting my expo dev server, the property took effect.

@Lars-m which file did you make the change(s) in?

@ToJen I know it's late but it's in app.json root level of the project.
Someone please edit this with above code so beginners like me have better time using react native. When react native doc promotes the usage of CRNA, the ios and android folders have not been generate thus there was no way to change orientation.
https://facebook.github.io/react-native/docs/improvingux.html#screen-orientation-lock
BTW, how could I change orientation of a single screen in app? E.g Video player.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Hareesh007 picture Hareesh007  Â·  4Comments

ArashMotamedi picture ArashMotamedi  Â·  3Comments

liyanxi picture liyanxi  Â·  3Comments

THPubs picture THPubs  Â·  4Comments

anp picture anp  Â·  3Comments