How to detect landscapeRight to landscapeLeft orientation change in react native?

Question

I need to apply different styles on orientation change between two landscape positions i.e landscapeRight to landscapeLeft or vice versa in React Native? I know how to detect between portrait and landscape, just need a listener between two landscape positions in REACT NATIVE! Thanks!

Answer 1

You would have to use an external dependency to manage this. Something like react-native-orientation-locker can give you what you want. This option requires you to be using a full react-native project as it will require you to link native code, so it will not work in Expo. You can read more about it here. Below are the basic usage instructions from the repo.

You can install it in the following way:

npm install react-native-orientation-locker --save
react-native link react-native-orientation-locker

There are a few extra steps that you need to do after you have linked it.

Configuration

iOS

Add the following to your project's AppDelegate.m:

+#import "Orientation.h"

@implementation AppDelegate

// ...

+- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
+  return [Orientation getOrientation];
+}

@end

Android

Add following to android/app/src/main/AndroidManifest.xml

<activity
  ....
  + android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
  ....
</activity>

Implement onConfigurationChanged method (in MainActivity.java)

// ...

+import android.content.Intent;
+import android.content.res.Configuration;

public class MainActivity extends ReactActivity {

+   @Override
+   public void onConfigurationChanged(Configuration newConfig) {
+       super.onConfigurationChanged(newConfig);
+       Intent intent = new Intent("onConfigurationChanged");
+       intent.putExtra("newConfig", newConfig);
+       this.sendBroadcast(intent);
+   }

    // ......
}

Getting the orientation:

Then you can set a listener where you want to access the orientation, usually you add this in the componentDidMount and remove move it in componentWillUnmount.

Here is some example code that you can use to set it up.

import Orientation from 'react-native-orientation-locker';


_onOrientationDidChange = (orientation) => {
  if (orientation === 'LANDSCAPE-LEFT') {
    //do something with landscape left layout
  } 
  if (orientation === 'LANDSCAPE-RIGHT') {
    //do something with landscape right layout
  } 
};

componentWillMount() {
  //The getOrientation method is async. It happens sometimes that
  //you need the orientation at the moment the js starts running on device.
  //getInitialOrientation returns directly because its a constant set at the
  //beginning of the js code.
  var initial = Orientation.getInitialOrientation();
  if (initial === 'PORTRAIT') {
    //do stuff
  } else {
    //do other stuff
  }
},

componentDidMount() {

  Orientation.getAutoRotateState((rotationLock) => this.setState({rotationLock}));
  //this allows to check if the system autolock is enabled or not.

  Orientation.lockToPortrait(); //this will lock the view to Portrait
  //Orientation.lockToLandscapeLeft(); //this will lock the view to Landscape
  //Orientation.unlockAllOrientations(); //this will unlock the view to all Orientations

  //get current UI orientation
  /*
  Orientation.getOrientation((orientation)=> {
    console.log("Current UI Orientation: ", orientation);
  });

  //get current device orientation
  Orientation.getDeviceOrientation((deviceOrientation)=> {
    console.log("Current Device Orientation: ", deviceOrientation);
  });
  */

  Orientation.addOrientationListener(this._onOrientationDidChange);
},

componentWillUnmount () {
  Orientation.removeOrientationListener(this._onOrientationDidChange);
}

This will mean that in your _onOrientationDidChange function it will receive on of the following:

• 'PORTRAIT'
• 'LANDSCAPE-LEFT' camera left home button right
• 'LANDSCAPE-RIGHT' camera right home button left
• 'PORTRAIT-UPSIDEDOWN'
• 'UNKNOWN'