react-native-orientation-maintained

React Native Orientation

Listen to device orientation changes in React Native applications and programmatically set preferred orientation on a per screen basis. Works on both Android and iOS.

Installing

This was tested with

npx react-native info

  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.1
    wanted: 0.72.1

npm install react-native-orientation-maintained --save

Linking Native Dependencies

Automatic Linking

react-native link react-native-orientation-maintained

Please note that you still need to manually configure a couple files even when using automatic linking. Please see the 'Configuration' section below. You will also need to restart your simulator before the package will work properly.

Manual Linking

iOS

• Add node_modules/react-native-orientation-maintained/iOS/RCTOrientation.xcodeproj to your xcode project, usually under the Libraries group
• Add libRCTOrientation.a (from Products under RCTOrientation.xcodeproj) to build target's Linked Frameworks and Libraries list
• Add $(SRCROOT)/node_modules/react-native-orientation-maintained/iOS/RCTOrientation/ to Project Name -> Build Settings -> Header Search Paths

Android

• In android/setting.gradle

  ...
  include ':react-native-orientation-maintained', ':app'
  project(':react-native-orientation-maintained').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation-maintained/android')
  

• In android/app/build.gradle

  ...
  dependencies {
      ...
      implementation project(':react-native-orientation-maintained')
  }
  

• Register module in MainApplication.java

  import com.github.alinrzv.orientation.OrientationPackage;  // <--- import
  
  public class MainApplication extends Application implements ReactApplication {
    ......
  
  @Override
  protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      //packages.add(new OrientationPackage()); // <--- uncomment if is not working without this line, it should be auto loaded
      return packages;
  }
  
    ......
  
  }
  

Configuration

iOS

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

#import "Orientation.h" // <--- import

@implementation AppDelegate

  // ...

  - (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
    while ([[UIDevice currentDevice] isGeneratingDeviceOrientationNotifications]) {
        [[UIDevice currentDevice] endGeneratingDeviceOrientationNotifications];
    }
  
    return [Orientation getOrientation];
  }

@end

Android

Implement onConfigurationChanged method in MainActivity.java

    import android.content.Intent; // <--- import
    import android.content.res.Configuration; // <--- import

    public class MainActivity extends ReactActivity {
      ......
	    @Override
	    public void onConfigurationChanged(Configuration newConfig) {
	        super.onConfigurationChanged(newConfig);
	        Intent intent = new Intent("onConfigurationChanged");
	        intent.putExtra("newConfig", newConfig);
	        sendBroadcast(intent);
	    }

    }

      ......

    }

Usage with the required updated methods based on your react version

To use the react-native-orientation-maintained package in your codebase, you should use the Orientation module:

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

export default class AppScreen extends Component {
  // ...

  componentWillMount() {
    // The getOrientation method is async. It happens sometimes that
    // you need the orientation at the moment the JS runtime starts running on device.
    // `getInitialOrientation` returns directly because its a constant set at the
    // beginning of the JS runtime.

    const initial = Orientation.getInitialOrientation();
    if (initial === 'PORTRAIT') {
      // do something
    } else {
      // do something else
    }
  },

  componentDidMount() {
    // this locks the view to Portrait Mode
    Orientation.lockToPortrait();

    // this locks the view to Landscape Mode
    // Orientation.lockToLandscape();

    // this unlocks any previous locks to all Orientations
    // Orientation.unlockAllOrientations();

    Orientation.addOrientationListener(this._orientationDidChange);
  },

  _orientationDidChange = (orientation) => {
    if (orientation === 'LANDSCAPE') {
      // do something with landscape layout
    } else {
      // do something with portrait layout
    }
  },

  componentWillUnmount() {
    Orientation.getOrientation((err, orientation) => {
      console.log(`Current Device Orientation: ${orientation}`);
    });


    // Remember to remove listener
    Orientation.removeOrientationListener(this._orientationDidChange);
  }

  render() {
    // ...

    return (
      // ...
    )
  }
}

Orientation Events

addOrientationListener((orientation) => {});

orientation will return one of the following values:

• LANDSCAPE
• PORTRAIT
• PORTRAITUPSIDEDOWN
• UNKNOWN

removeOrientationListener((orientation) => {});

addSpecificOrientationListener((specificOrientation) => {});

specificOrientation will return one of the following values:

• LANDSCAPE-LEFT
• LANDSCAPE-RIGHT
• PORTRAIT
• PORTRAITUPSIDEDOWN
• UNKNOWN

removeSpecificOrientationListener((specificOrientation) => {});

API

• lockToPortrait()
• lockToLandscape()
• lockToLandscapeLeft()
• lockToLandscapeRight()
• unlockAllOrientations()
• getOrientation((err, orientation) => {})
• getSpecificOrientation((err, specificOrientation) => {})