React Native Orientation
Handle device orientation events and lock device screen to specific orientations.
Getting started
Install the library using either Yarn:
yarn add react-native-orientation-handler
or npm:
npm install --save react-native-orientation-handler
You then need to link the native parts of the library for the platforms you are using. The easiest way to link the library is using the CLI tool by running this command from the root of your project:
react-native link react-native-orientation-handler
Configuration
iOS
Add the following to your project's AppDelegate.m
:
// <--- import
Android
Implement onConfigurationChanged
method in MainActivity.java
// <--- import // <--- import
Usage
To use the react-native-orientation-handler
package in your codebase, you should use the OrientationHandler module:
;
// ... { // 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 = OrientationHandler; if initial === 'PORTRAIT' // do something else // do something else } { // this locks the view to Portrait Mode OrientationHandler; // this locks the view to Landscape Mode // OrientationHandler.lockToLandscape(); // this unlocks any previous locks to all Orientations // OrientationHandler.unlockAllOrientations(); OrientationHandler; } { if orientation === 'LANDSCAPE' // do something with landscape layout else // do something with portrait layout } { OrientationHandler; // Remember to remove listener OrientationHandler; } { // ... return // ... }
Orientation Events
;
orientation
will return one of the following values:
LANDSCAPE
PORTRAIT
UNKNOWN
;
;
specificOrientation
will return one of the following values:
LANDSCAPE-LEFT
LANDSCAPE-RIGHT
PORTRAIT
PORTRAITUPSIDEDOWN
UNKNOWN
;
API
lockToPortrait()
lockToLandscape()
lockToLandscapeLeft()
lockToLandscapeRight()
unlockAllOrientations()
getOrientation((err, orientation) => {})
getSpecificOrientation((err, specificOrientation) => {})