A React Native module to retrieve interface/device orientation, listen to orientation changes, and lock screen to a specific orientation.
npm install react-native-orientation-managerA React Native module to retrieve interface/device orientation, listen to orientation changes, and lock screen to a specific orientation.
- [x] iOS
- [x] Android
- [x] Windows
``sh`
npm install react-native-orientation-manager
`sh`
yarn add react-native-orientation-manager
sh
bundle exec pod install
`Additional Configuration
To ensure that the module is fully initialized during app startup, include this import statement in your app's entry file (
index. or App.):
`js
import "react-native-orientation-manager";
`
For example:
`ts
import "react-native-orientation-manager";
import { AppRegistry } from "react-native";
import App from "./src/App";
import { name as appName } from "./app.json";AppRegistry.registerComponent(appName, () => App);
`$3
Add the following code to
MainApplication.java which is probably located at android/app/src/main/java/
`java
// ... code
import com.kroosx4v.orientationmanager.OrientationManagerActivityLifecycleCallbacks;public class MainApplication extends Application implements ReactApplication
{
// ...code
@Override
public void onCreate()
{
// ...code
registerActivityLifecycleCallbacks(new OrientationManagerActivityLifecycleCallbacks());
}
}
`$3
Add the following code to your project's
AppDelegate.mm
`objectivec
// ...code
#import "RNOrientationManager.h"@implementation AppDelegate
// ...code
- (UIInterfaceOrientationMask)application:(UIApplication )application supportedInterfaceOrientationsForWindow:(UIWindow )window
{
return [RNOrientationManager getSupportedInterfaceOrientations];
}
@end
`
Usage
$3
`ts
import Orientations from "react-native-orientation-manager";
import type { InterfaceOrientation, DeviceOrientation } from "react-native-orientation-manager";const currentInterfaceOrientation: InterfaceOrientation = Orientations.interfaceOrientation;
const currentDeviceOrientation: DeviceOrientation = Orientations.deviceOrientation;
`$3
`tsx
import { Text } from "react-native";
import { useInterfaceOrientation, useDeviceOrientation } from "react-native-orientation-manager";function OrientationValues(): React.JSX.Element
{
const interfaceOrientation = useInterfaceOrientation();
const deviceOrientation = useDeviceOrientation();
return (
<>
Interface orientation: {interfaceOrientation.getName()}
Device orientation: {deviceOrientation.getName()}
>
);
}
`$3
$3
`ts
import { lockToLandscape, lockToPortrait, unlockAllOrientations, resetInterfaceOrientationSetting } from "react-native-orientation-manager";lockToLandscape();
// ...or
lockToPortrait();
// ...or
unlockAllOrientations();
// remove lock
resetInterfaceOrientationSetting();
`
$3
`tsx
import { View } from "react-native";
import { OrientationLocker } from "react-native-orientation-manager";function LandscapeOnlyScreen(): React.JSX.Element
{
return (
);
}
`$3
`ts
import { addInterfaceOrientationChangeListener, addDeviceOrientationChangeListener } from "react-native-orientation-manager";
import type { InterfaceOrientation, DeviceOrientation } from "react-native-orientation-manager";const listenerRemover = addInterfaceOrientationChangeListener((interfaceOrientation: InterfaceOrientation) => {
if (interfaceOrientation.isPortrait())
{
// ...do something
}
});
const listenerRemover2 = addDeviceOrientationChangeListener((deviceOrientation: DeviceOrientation) => {
if (deviceOrientation.isPortrait())
{
// ...do something
}
});
`$3
`ts
import { useInterfaceOrientationWhenFocusedEffect } from "react-native-orientation-manager";
import type { InterfaceOrientation } from "react-native-orientation-manager";
import { useNavigation } from "@react-navigation/native";function SomeComponent(): React.JSX.Element
{
const navigation = useNavigation();
useInterfaceOrientationWhenFocusedEffect((interfaceOrientation: InterfaceOrientation) => {
if (!interfaceOrientation.isLandscape())
{
// Only allow landscape orientation in this screen with the possibility of leaving it when orientation changes to portrait
navigation.goBack();
return;
}
// optionally return a cleanup function
return () => {
// ...do something
};
});
}
`API
Class InterfaceOrientation
| Function | Return Type |
| --- | --- |
|
isUnknown() | boolean |
| isPortrait() | boolean |
| isPortraitUpsideDown() | boolean |
| isLandscapeLeft() | boolean |
| isLandscapeRight() | boolean |
| isEitherPortrait() | boolean |
| isLandscape() | boolean |
| getName() | string |
| equals(interfaceOrientation: InterfaceOrientation) | boolean |Class DeviceOrientation
| Function | Return Type |
| --- | --- |
|
isUnknown() | boolean |
| isPortrait() | boolean |
| isPortraitUpsideDown() | boolean |
| isLandscapeLeft() | boolean |
| isLandscapeRight() | boolean |
| isFaceUp() | boolean |
| isFaceDown() | boolean |
| isEitherPortrait() | boolean |
| isLandscape() | boolean |
| isFace() | boolean |
| getName() | string |
| equals(deviceOrientation: DeviceOrientation) | boolean |Default Export: An object with the following properties:
| Property | Type | Represents |
| --- | --- | --- |
|
interfaceOrientation | InterfaceOrientation | Current interface orientation |
| deviceOrientation | DeviceOrientation | Current device orienation |Listener Registrar Functions:
| Function | Returns |
| --- | --- |
|
addInterfaceOrientationChangeListener((interfaceOrientation: InterfaceOrientation) => void) | Listener remover function |
| addDeviceOrientationChangeListener((deviceOrientation: DeviceOrientation) => void) | Listener remover function |Interface Orientation Locking Functions:
| Function | Return Type | Notes |
| --- | --- | --- |
|
async lockToPortrait() | Promise\ ||
| async lockToPortraitUpsideDown() | Promise\ ||
| async lockToLandscapeLeft() | Promise\ ||
| async lockToLandscapeRight() | Promise\ ||
| async lockToLandscape() | Promise\ ||
| async lockToAllOrientationsButUpsideDown() | Promise\ | Not supported on Android |
| async unlockAllOrientations() | Promise\ ||To remove interface orientation lock:
| Function | Return Type |
| --- | --- |
|
async resetInterfaceOrientationSetting() | Promise\ |Component OrientationLocker
| Prop | Type | Value |
| --- | --- | --- |
| lock | string | Can be one of the following:
"Portrait": Locks to portrait only. Same as lockToPortrait()"PortraitUpsideDown": Locks to portrait upside down only. Same as lockToPortraitUpsideDown()"LandscapeLeft": Locks to landscape left only. Same as lockToLandscapeLeft()"LandscapeRight": Locks to landscape right only. Same as lockToLandscapeRight()"Landscape": Locks to landscape left or right only. Same as lockToLandscape()"AllButUpsideDown": Locks to all orientations except portrait upside down. Same as lockToAllOrientationsButUpsideDown(). Not supported on Android"All": Unlocks all orientations. Same as unlockAllOrientations() |Hooks:
| Hook | Return Type | Functionality
| --- | --- | --- |
|
useInterfaceOrientation() | InterfaceOrientation | Uses current interface orientation as a state |
| useDeviceOrientation() | DeviceOrientation | Uses current device orientation as a state |
| useInterfaceOrientationEffect(
effect: (interfaceOrientation: InterfaceOrientation) => CleanupFunction \| undefined,
dependencies: any[] = [],
) | void | This runs on mount and subsequently whenever the interface orientation changes or when dependencies change during a re-render |
| useDeviceOrientationEffect(
effect: (deviceOrientation: DeviceOrientation) => CleanupFunction \| undefined,
dependencies: any[] = [],
) | void | This runs on mount and subsequently whenever the device orientation changes or when dependencies change during a re-render |
| useInterfaceOrientationWhenFocusedEffect(
effect: (interfaceOrientation: InterfaceOrientation) => CleanupFunction \| undefined,
dependencies: any[] = [],
)` | void | This hook runs under three conditions: