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

npm install react-native-orientation --save

Linking Native Dependencies

Automatic Linking

react-native link react-native-orientation

Manual Linking

iOS

1. Add node_modules/react-native-orientation/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

Android

1. In android/setting.gradle

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

2. In android/app/build.gradle

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

3. Register module in MainApplication.java

   importcom.github.yamill.orientation.OrientationPackage; // <--- importpublicclassMainApplicationextendsApplicationimplementsReactApplication {
   ......
   @OverrideprotectedList<ReactPackage> getPackages() {
   returnArrays.<ReactPackage>asList(
   newMainReactPackage(),
   newOrientationPackage() <------- Addthis
   );
   }
   ......
   }

Configuration

iOS

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

#import"Orientation.h"// <--- import@implementationAppDelegate// ...
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
return [Orientation getOrientation];
}
@end

Android

Implement onConfigurationChanged method in MainActivity.java

importandroid.content.Intent; // <--- importimportandroid.content.res.Configuration; // <--- importpublicclassMainActivityextendsReactActivity {
......
@OverridepublicvoidonConfigurationChanged(ConfigurationnewConfig) {
super.onConfigurationChanged(newConfig);
Intentintent = newIntent("onConfigurationChanged");
intent.putExtra("newConfig", newConfig);
this.sendBroadcast(intent);
}
......
}

Usage

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

importOrientationfrom'react-native-orientation';

exportdefaultclassAppScreenextendsComponent{// ...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.constinitial=Orientation.getInitialOrientation();if(initial==='PORTRAIT'){// do something}else{// do something else}},componentDidMount(){// this locks the view to Portrait ModeOrientation.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 listenerOrientation.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) => {})