A react-native module that can listen on orientation changing of device, get current orientation, lock to preferred orientation. (cross-platform support)
- lock screen orientation to PORTRAIT|LANDSCAPE-LEFT|PORTRAIT-UPSIDEDOWN|LANDSCAPE-RIGHT.
- listen on orientation changing of device
- get the current orientation of device
v1.0.17
- fix podspec
- fix "Calling UI code from background thread" error
v1.0.16
- restore s.dependency 'React' to podspec
v1.0.15
- remove s.dependency 'React' from podspec
v1.0.14
- remove "sending orientationDidChange with no listener" warning
v1.0.13
- fix android lockToLandscapeXXX return error value
- fix after lockToXXX still can get changed orientation
npm install react-native-orientation-locker --save
react-native link react-native-orientation-locker
pod 'react-native-orientation-locker', :path => '../node_modules/react-native-orientation-locker'
Consult the React Native documentation on how to install React Native using CocoaPods.
Add the following to your project's AppDelegate.m
:
#import "Orientation.h" // <--- import
@implementation AppDelegate
// ...
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
return [Orientation getOrientation];
}
@end
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);
}
......
}
Whenever you want to use it within React Native code now you can:
import Orientation from 'react-native-orientation-locker';
import Orientation from 'react-native-orientation-locker';
_onOrientationDidChange = (orientation) => {
if (orientation == 'LANDSCAPE-LEFT') {
//do something with landscape left layout
} else {
//do something with portrait 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.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 orientation
/*
Orientation.getOrientation((orientation)=> {
console.log("Current Device Orientation: ", orientation);
});
*/
Orientation.addOrientationListener(this._onOrientationDidChange);
},
componentWillUnmount: function() {
Orientation.removeOrientationListener(this._onOrientationDidChange);
}
addOrientationListener(function(orientation))
orientation can return either PORTRAIT
LANDSCAPE-LEFT
LANDSCAPE-RIGHT
PORTRAIT-UPSIDEDOWN
UNKNOWN
removeOrientationListener(function(orientation))
lockToPortrait()
lockToLandscape()
lockToLandscapeLeft()
this will lock to camera left home button rightlockToLandscapeRight()
this will lock to camera right home button leftunlockAllOrientations()
getOrientation(function(orientation))
orientation can return one of:
PORTRAIT
LANDSCAPE-LEFT
camera left home button rightLANDSCAPE-RIGHT
camera right home button leftPORTRAIT-UPSIDEDOWN
UNKNOWN
Notice: PORTRAIT-UPSIDEDOWN not support at iOS now