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 and has been re-written in Typescript.
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
$ npm install @lightbase/react-native-orientation --save
$ yarn add @lightbase/react-native-orientation
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.
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 ); } ...... }
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);
}
......
}
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 (
// ...
)
}
}
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) => {});
lockToPortrait()
lockToLandscape()
lockToLandscapeLeft()
lockToLandscapeRight()
unlockAllOrientations()
getOrientation((error: string, orientation: OrientationType) => {})
getSpecificOrientation((error: string, specificOrientation: OrientationType) => {})