CODEWITHSUNDEEP
androidreact-native
pstanton
pstanton

Reputation: 36640

React Native - Orientation locked; can I still get the sensor's orientation?

I'm working on a React Native app which is designed to run in portrait mode. The orientation is locked via the manifest:

  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize"
    android:screenOrientation="portrait">

I need to add the ability to take photos which I've done using react-native-camera.

The problem is, I can't get the orientation to change when taking photos since it is locked to portrait.

Is there a way to allow orientation to change in a particular view (ie camera container) so that the camera can detect the correct orientation?

I'm thinking maybe the following is possible:

  1. request orientation directly from sensor
  2. a new activity without the orientation locked

Upvotes: 3

Views: 2312

Answers (1)

Victor
Victor

Reputation: 4199

I had the same issue. I used React-Native-Orientation : https://github.com/yamill/react-native-orientation.

You shouldn't lock the orientation in manifest, instead you u can lock every screen to portrait mode using this lib. Use lockToPortrait()

And for the screens u need to rotate just use unlockAllOrientations or lockToLandscape()

API is great but the problem is u need to do it for every screen .. seems kind of overkill if you have a lot of screens.. but things works great

Additional Tip

Doing this in every screen is going to hectic & very hard to manage. What i did was modularize my navigation functions to a single class. I

import Orientation from 'react-native-orientation';

export const navigateToMainScreen=()=>{
  determineOrientation("Main");
  this.props.navigation.navigate("Main");
}

const determineOrientation=(screenName)=>{
  // ur logic
  if(true){
      Orientation.lockToPortrait();
   }
  else{
   Orientation.lockToLandscape();
   }
}

Upvotes: 2

Related Questions