react-native-orientation

Listen to device orientation changes in react-native and set preferred orientation on screen to screen basis.

Installation

via rnpm

Run rnpm install react-native-orientation

Note: rnpm will install and link the library automatically.

via npm

Run npm install react-native-orientation --save

Linking

Using rnpm (iOS + Android)

rnpm link react-native-orientation

Using CocoaPods (iOS Only)

pod 'react-native-orientation', :path => 'node_modules/react-native-orientation'

Consult the React Native documentation on how to install React Native using CocoaPods.

Manually

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 MainActivity.java)

   import com.github.yamill.orientation.OrientationPackage; // <--- import
   public class MainActivity extends ReactActivity {
   ......
   @Override
   protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
   new MainReactPackage(),
   new OrientationPackage(this) <------- Add this
   );
   }
   ......
   }
   

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)

 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);
this.sendBroadcast(intent);
}
......
}

Usage

Whenever you want to use it within React Native code now you can: var Orientation = require('react-native-orientation');

 _orientationDidChange: function(orientation){if(orientation=='LANDSCAPE'){//do something with landscape layout}else{//do something with portrait layout}},componentWillMount: function(){//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.varinitial=Orientation.getInitialOrientation();if(initial==='PORTRAIT'){//do stuff}else{//do other stuff}},componentDidMount: function(){Orientation.lockToPortrait();//this will lock the view to Portrait//Orientation.lockToLandscape(); //this will lock the view to Landscape//Orientation.unlockAllOrientations(); //this will unlock the view to all OrientationsOrientation.addOrientationListener(this._orientationDidChange);},componentWillUnmount: function(){Orientation.getOrientation((err,orientation)=>{console.log("Current Device Orientation: ",orientation);});Orientation.removeOrientationListener(this._orientationDidChange);}

Events

• addOrientationListener(function(orientation))

orientation can return either LANDSCAPEPORTRAITUNKNOWN also PORTRAITUPSIDEDOWN is now different from PORTRAIT

• removeOrientationListener(function(orientation))

• addSpecificOrientationListener(function(specificOrientation))

specificOrientation can return either LANDSCAPE-LEFTLANDSCAPE-RIGHTPORTRAITUNKNOWNPORTRAITUPSIDEDOWN

• removeSpecificOrientationListener(function(specificOrientation))

Functions

• lockToPortrait()
• lockToLandscape()
• lockToLandscapeLeft()
• lockToLandscapeRight()
• unlockAllOrientations()
• getOrientation(function(err, orientation)

orientation can return either LANDSCAPEPORTRAITUNKNOWNPORTRAITUPSIDEDOWN

• getSpecificOrientation(function(err, specificOrientation)

specificOrientation can return either LANDSCAPE-LEFTLANDSCAPE-RIGHTPORTRAITUNKNOWNPORTRAITUPSIDEDOWN

TODOS

• Add some way to allow setting a preferred orientation on a screen by screen basis.
• Make API Cleaner to Orientation Locking
• Android Support