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

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

Android

1. 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')

2. In android/app/build.gradle

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

3. 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) => {})