Lock device orientation - React Native (Android)

react-native-orientation-locker
get device orientation react native
react native lock orientation programmatically
react native-orientation change
react native disable rotation android
react native enable rotation
expo-screen orientation
react-native-orientation npm

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?

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

How to lock device orientation for React Native apps (Android & iOS , Why lock application orientation mode? Many applications have their User Interface (UI) designed to contain a lot of elements. To have these� Android 1. Load the iOS part of your React Native project 2. Navigate to tab General from the horizontal menu 3. Go to down to Deployment Info section and check/uncheck the desired device orientation modes.

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?

react-native-orientation-locker, Feature. lock screen orientation to RN 0.58 + Android target SDK 27 maybe cause Issue: java.lang.IllegalStateException: and below). yarn add react-native -orientation-locker react-native link react-native-orientation-locker� For iOS platform we need to open Xcode, and select the desired orientation modes from the Device Orientation section. As shown below: 1. Load the iOS part of your React Native project 2. Navigate to tab General from the horizontal menu 3. Go to down to Deployment Info section and check/uncheck the desired device orientation modes.

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.

Lock device orientation - React Native (Android), On both iOS and Android platforms, changes to the screen orientation will override If you're installing this in a bare React Native app, you should also follow In order to be able to lock screen orientation using this module you will need to� Lock device orientation in React Native 🔒The different methods for locking orientation on iOS, Android, Expo and React Native Navigation.

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

ScreenOrientation, Listen to device orientation changes in react-native and set preferred www. npmjs.com/package/react-native-orientation Works on both Android and iOS. else } }, componentDidMount() { // this locks the view to Portrait Mode Orientation. react-native-orientation-locker. A react-native module that can listen on orientation changing of device, get current orientation, lock to preferred orientation. (cross-platform support) Feature. lock screen orientation to PORTRAIT|LANDSCAPE-LEFT|PORTRAIT-UPSIDEDOWN|LANDSCAPE-RIGHT. listen on orientation changing of device

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
);
}

yamill/react-native-orientation: Listen to device orientation , React Native Disable Screen Rotation. Contents. 1 Disable Screen Rotation; 2 For Android Users; 3 For IOS Users� TLDR => By default React Native apps rotate with the device orientation. Often this isn’t desired and you just want to lock to portrait. This quick tutorial shows how to do just that.

React Native Disable Screen Rotation, You may also want your react native app support portrait orientation only. Android. First of open Android manifest file which is located at In the general settings, look for Device Orientation under Deployement Info. 2017 Update. In addition to the solutions posted above if you're using Expo to build your app (as is currently recommended in official guides on React Native Blog) then all you need is to set orientation in app.json to "portrait" or "landscape" and make it work on both iOS and Android at the same time with no need to edit iOS/Android-specific XML configuration files:

How to Make your React Native App Restricted to Portrait Orientation, Yup, if I lock orientation in Android Studio/Xcode, I won't rotate on Ipad or Tablet. Continue this thread. React Native app is pretty much just a normal iOS application, so you can do it in exactly the same way as you do for all other apps. Simply uncheck (in XCode) the "Landscape Left" and "Landscape Right" as allowed Device Orientations in the General application properties:

Disabling screen rotate in React native (both android & iOS), React Native Detect Device Screen Orientation is Portrait or Landscape. There are 2 types of screen orientation mode available in mobiles First is Portrait which is the default screen orientation in which the height of screen is bigger then width and Second is Landscape which shows after rotating the screen in which the screen width is screen is bigger then height.

Comments
  • The how to add see this: stackoverflow.com/questions/15718869/…
  • android/app/src/main/AndroidManifest.xml in a react-native project
  • 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... stackoverflow.com/questions/41407229/…