Lock device orientation - React Native (Android)

Question

I'm using React Native 0.29 and developing for Android. I'm trying to lock the device orientation. What I need is to lock the screen in portrait mode. I tried with this repository https://github.com/yamill/react-native-orientation but it is not supporting RN 0.29 yet.

Is there any way I can lock the device orientation? Maybe any native Android hack with android studio?

Caban

Answer 1

Just add android:screenOrientation="portrait" to the activity in the AndroidManifest.xml.

Densmore

The how to add see this: #15719369 – Greenbelt

android/app/src/main/AndroidManifest.xml in a react-native project – Fourwheeler

Answer 2

2017 Update

Currently, there is also another way to do it once for both Android and iOS by adding:

"orientation": "portrait"

in app.json if you're using Expo:

{
  "expo": {
    "name": "My app",
    "slug": "my-app",
    "sdkVersion": "21.0.0",
    "privacy": "public",
    "orientation": "portrait"
  }
}

Or at runtime:

ScreenOrientation.allow()

Example:

ScreenOrientation.allow(ScreenOrientation.Orientation.PORTRAIT);

Note that it only works if you're building with Expo but since this is currently (as of 2017) recommended in official guides on React Native Blog then probably a lot of people are using it so it's worth mentioning as an interesting solution in addition to hacking the Android-specific XML configuration files.

More info:

For more info see: how to disable rotation in React Native?

Mulderig

Answer 3

There is a pull request for this to work on 0.29.2 and above: https://github.com/yamill/react-native-orientation/pull/85

If you use his version, it should work on 0.29.2 and above: https://github.com/youennPennarun/react-native-orientation

Steps:

1. unlink the previous installation with rnpm unlink react-native-orientation

2. rm -rf node_modules/react-native-orientation

3. in your package.json edit the entry of react-native-orientation to be as:

   "react-native-orientation": "youennPennarun/react-native-orientation"

4. npm install

5. react-native link react-native-orientation

Things should work after this. You can track the progress of the PR and switch to main repo when it has been merged.

Lanoralanose

Answer 4

react-native-orientation - is no longer compatible with new version (I have tried 0.39.2). After linking this module I have the compiler's error. As I got it, now we should use react-native-orientation-listener

npm install --save react-native-orientation-listener
rnpm link

Elissa

I don't really know. I ran into strange issue with this module. Either it's my lack of experience with React or it's buggy... #41407729 – Elissa

Answer 5

Step:1

npm install git+https://github.com/yamill/react-native-orientation.git --save

Step2: react-native link Step:3 Modify the MainApplication.java file with:

import com.github.yamill.orientation.OrientationPackage;// import

@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new OrientationPackage() //add this
);
}

Stlouis

Answer 6

You can use react-native-orientation-locker.

The 'react-native-orientation' has been deprecated. Using the 'react-native-orientation-locker' component, you would be able to detect the current orientation, as well as locking it to Portrait/Landscape by using:

Orientation.lockToPortrait();

Orientation.lockToLandscapeLeft();

Even release the locks using

Orientation.unlockAllOrientations();

Jemma