A universal library for managing a device's screen orientation.
GitHub
npm
Screen Orientation is defined as the orientation in which graphics are painted on the device. For example, the figure below has a device in a vertical and horizontal physical orientation, but a portrait screen orientation. For physical device orientation, see the orientation section of Device Motion.
On both Android and iOS platforms, changes to the screen orientation will override any system settings or user preferences. On Android, it is possible to change the screen orientation while taking the user's preferred orientation into account. On iOS, user and system settings are not accessible by the application and any changes to the screen orientation will override existing settings.
Web has limited support.
-
npx expo install expo-screen-orientation
If you are installing this in an existing React Native app, start by installing expo
in your project. Then, follow the additional instructions as mentioned by the library's README under "Installation in bare React Native projects" section.
Apple added support for split view mode to iPads in iOS 9. This changed how the screen orientation is handled by the system. To put the matter shortly, for iOS, your iPad is always in landscape mode unless you open two applications side by side. To be able to lock screen orientation using this module you will need to disable support for this feature. For more information about the split view mode, check out the official Apple documentation.
You can configure expo-screen-orientation
using its built-in config plugin if you use config plugins in your project (EAS Build or npx expo run:[android|ios]
). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect.
xed ios
. If you don't have the directory, run npx expo prebuild -p ios
to generate one.Requires Full Screen
checkbox in Xcode. It should be located under Project Target > General > Deployment Info.{
"expo": {
"ios": {
"requireFullScreen": true
},
"plugins": [
[
"expo-screen-orientation",
{
"initialOrientation": "DEFAULT"
}
]
]
}
}
Name | Default | Description |
---|---|---|
initialOrientation | undefined | Only for: iOS Sets the iOS initial screen orientation. Possible values: |
import * as ScreenOrientation from 'expo-screen-orientation';
ScreenOrientation.getOrientationAsync()
Gets the current screen orientation.
Returns a promise that fulfils with an Orientation
value that reflects the current screen orientation.
ScreenOrientation.getOrientationLockAsync()
Gets the current screen orientation lock type.
Returns a promise which fulfils with an OrientationLock
value.
ScreenOrientation.getPlatformOrientationLockAsync()
Gets the platform specific screen orientation lock type.
Returns a promise which fulfils with a PlatformOrientationInfo
value.
ScreenOrientation.lockAsync(orientationLock)
Parameter | Type | Description |
---|---|---|
orientationLock | OrientationLock | The orientation lock to apply. See the |
Lock the screen orientation to a particular OrientationLock
.
Promise<void>
Returns a promise with void
value, which fulfils when the orientation is set.
Example
async function changeScreenOrientation() {
await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_LEFT);
}
ScreenOrientation.lockPlatformAsync(options)
Parameter | Type | Description |
---|---|---|
options | PlatformOrientationInfo | The platform specific lock to apply. See the |
Promise<void>
Returns a promise with void
value, resolving when the orientation is set and rejecting
if an invalid option or value is passed.
ScreenOrientation.supportsOrientationLockAsync(orientationLock)
Parameter | Type |
---|---|
orientationLock | OrientationLock |
Returns whether the OrientationLock
policy is supported on
the device.
Promise<boolean>
Returns a promise that resolves to a boolean
value that reflects whether or not the
orientationLock is supported.
ScreenOrientation.unlockAsync()
Sets the screen orientation back to the OrientationLock.DEFAULT
policy.
Promise<void>
Returns a promise with void
value, which fulfils when the orientation is set.
ScreenOrientation.addOrientationChangeListener(listener)
Parameter | Type | Description |
---|---|---|
listener | OrientationChangeListener | Each orientation update will pass an object with the new |
Invokes the listener
function when the screen orientation changes from portrait
to landscape
or from landscape
to portrait
. For example, it won't be invoked when screen orientation
change from portrait up
to portrait down
, but it will be called when there was a change from
portrait up
to landscape left
.
ScreenOrientation.removeOrientationChangeListener(subscription)
Parameter | Type | Description |
---|---|---|
subscription | Subscription | A subscription object that manages the updates passed to a listener function on an orientation change. |
Unsubscribes the listener associated with the Subscription
object from all orientation change
updates.
void
ScreenOrientation.removeOrientationChangeListeners()
Removes all listeners subscribed to orientation change updates.
void
OrientationChangeEvent
Name | Type | Description |
---|---|---|
orientationInfo | ScreenOrientationInfo | The current |
orientationLock | OrientationLock | The current |
PlatformOrientationInfo
Name | Type | Description |
---|---|---|
screenOrientationArrayIOS (optional) | Orientation[] | Only for: iOS An array of orientations to allow on the iOS platform. |
screenOrientationConstantAndroid (optional) | number | Only for: Android A constant to set using the Android native API.
For example, in order to set the lock policy to unspecified,
|
screenOrientationLockWeb (optional) | WebOrientationLock | Only for: Web A web orientation lock to apply in the browser. |
ScreenOrientationInfo
Name | Type | Description |
---|---|---|
horizontalSizeClass (optional) | SizeClassIOS | Only for: iOS The horizontal size class of the device. |
orientation | Orientation | The current orientation of the device. |
verticalSizeClass (optional) | SizeClassIOS | Only for: iOS The vertical size class of the device. |
Subscription
Name | Type | Description |
---|---|---|
remove | () => void | A method to unsubscribe the listener. |
Orientation
Orientation Values
UNKNOWN
Orientation.UNKNOWN = 0
An unknown screen orientation. For example, the device is flat, perhaps on a table.
OrientationLock
An enum whose values can be passed to the lockAsync
method.
Note:
OrientationLock.ALL
andOrientationLock.PORTRAIT
are invalid on devices which don't supportOrientationLock.PORTRAIT_DOWN
.
OrientationLock Values
DEFAULT
OrientationLock.DEFAULT = 0
The default orientation. On iOS, this will allow all orientations except Orientation.PORTRAIT_DOWN
.
On Android, this lets the system decide the best orientation.
SizeClassIOS
Each iOS device has a default set of size classes that you can use as a guide when designing your interface.
SizeClassIOS Values
UNKNOWN
SizeClassIOS.UNKNOWN = 0
COMPACT
SizeClassIOS.COMPACT = 1
REGULAR
SizeClassIOS.REGULAR = 2
WebOrientation
WebOrientation Values
LANDSCAPE_PRIMARY
WebOrientation.LANDSCAPE_PRIMARY = "landscape-primary"
LANDSCAPE_SECONDARY
WebOrientation.LANDSCAPE_SECONDARY = "landscape-secondary"
PORTRAIT_PRIMARY
WebOrientation.PORTRAIT_PRIMARY = "portrait-primary"
PORTRAIT_SECONDARY
WebOrientation.PORTRAIT_SECONDARY = "portrait-secondary"
WebOrientationLock
An enum representing the lock policies that can be applied on the web platform, modelled after
the W3C specification.
These values can be applied through the lockPlatformAsync
method.
WebOrientationLock Values
ANY
WebOrientationLock.ANY = "any"
LANDSCAPE
WebOrientationLock.LANDSCAPE = "landscape"
LANDSCAPE_PRIMARY
WebOrientationLock.LANDSCAPE_PRIMARY = "landscape-primary"
LANDSCAPE_SECONDARY
WebOrientationLock.LANDSCAPE_SECONDARY = "landscape-secondary"
NATURAL
WebOrientationLock.NATURAL = "natural"
PORTRAIT
WebOrientationLock.PORTRAIT = "portrait"
PORTRAIT_PRIMARY
WebOrientationLock.PORTRAIT_PRIMARY = "portrait-primary"
PORTRAIT_SECONDARY
WebOrientationLock.PORTRAIT_SECONDARY = "portrait-secondary"
UNKNOWN
WebOrientationLock.UNKNOWN = "unknown"