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.
Note: This a fork of https://github.com/yamill/react-native-orientation with the intention of keeping up with regular maintenance.
We will be keeping the 3.*.* branch backwards compatible with the most recent version of the original library. You should be able to easily migrate, without touching much of your existing code. See the migration guide
Installing
$ npm install @lightbase/react-native-orientation --save
$ yarn add @lightbase/react-native-orientation
Linking Native Dependencies
Automatic Linking
react-native link @lightbase/react-native-orientation
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/@lightbase/react-native-orientation/ios/RCTOrientation.xcodeproj
to your xcode project, usually under theLibraries
group - Add
libRCTOrientation.a
(fromProducts
underRCTOrientation.xcodeproj
) to build target'sLinked Frameworks and Libraries
list - Add
$(SRCROOT)/../node_modules/@lightbase/react-native-orientation/iOS/RCTOrientation/
toProject Name
->Build Settings
->Header Search Paths
Android
-
In
android/setting.gradle
... include ':@lightbase_react-native-orientation', ':app' project(':@lightbase_react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/@lightbase/react-native-orientation/android')
-
In
android/app/build.gradle
... dependencies { ... implementation project(':@lightbase_react-native-orientation') }
-
Register module in
MainApplication.java
import nl.lightbase.orientation.OrientationPackage; // <--- import public class MainApplication extends Application implements ReactApplication { ...... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new OrientationPackage() <------- Add this ); } ...... }
Configuration
iOS
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
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
To use the @lightbase/react-native-orientation
package in your codebase, you should use the Orientation module:
import Orientation from '@lightbase/react-native-orientation';
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 === Orientation.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 === Orientation.LANDSCAPE) {
// do something with landscape layout
} else {
// do something with portrait layout
}
},
componentWillUnmount() {
Orientation.getOrientation((error, 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"
orOrientation.LANDSCAPE
-
"PORTRAIT"
orOrientation.PORTRAIT
-
"PORTRAITUPSIDEDOWN"
orOrientation.PORTRAIT_UPSIDE_DOWN
-
"UNKNOWN"
orOrientation.UNKNOWN
removeOrientationListener((orientation) => {});
addSpecificOrientationListener((specificOrientation) => {});
specificOrientation
will return one of the following values:
-
"LANDSCAPE-LEFT"
orOrientation.LANDSCAPE_LEFT
-
"LANDSCAPE-RIGHT"
orOrientation.LANDSCAPE_RIGHT
-
"PORTRAIT"
orOrientation.PORTRAIT
-
"PORTRAITUPSIDEDOWN"
orOrientation.PORTRAIT_UPSIDE_DOWN
-
"UNKNOWN"
orOrientation.UNKNOWN
removeSpecificOrientationListener((specificOrientation) => {});
API
lockToPortrait()
lockToLandscape()
lockToLandscapeLeft()
lockToLandscapeRight()
unlockAllOrientations()
getOrientation((error: string, orientation: OrientationType) => {})
getSpecificOrientation((error: string, specificOrientation: OrientationType) => {})