Expo

Get Started

Guides

API Reference

Get Started

Guides

API Reference

ScreenOrientation

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.

Portrait orientation in different physical orientations

ScreenOrientation from expo allows changing supported screen orientations at runtime, and subscribing to orientation changes. This will take priority over the orientation key in app.json.

On both iOS and Android 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 support has limited support. For improved resize detection on mobile Safari, check out the docs on using Resize Observer in Expo web.

Platform Compatibility

Android Device	Android Emulator	iOS Device	iOS Simulator	Web

Installation

expo install expo-screen-orientation

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Warning

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 the iOS, your iPad is always in the landscape mode unless you open two applications side by side. In order 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.

Managed workflow

Open your app.json and add the following inside of the "expo" field:

{
  "expo": {
    ...
    "ios": {
      ...
      "requireFullScreen": true,
    }
  }
}

Bare workflow

Tick the Requires Full Screen checkbox in Xcode. It should be located under Project Target > General > Deployment Info.

API

import * as ScreenOrientation from 'expo-screen-orientation';

Methods

`ScreenOrientation.lockAsync(orientationLock)`

Lock the screen orientation to a particular OrientationLock.

Arguments

orientationLock (OrientationLock) -- The orientation lock to apply. See the OrientationLock enum for possible values.

Returns

Returns a promise with void value, resolving when the orientation is set.

Error Codes

ERR_SCREEN_ORIENTATION_INVALID_ORIENTATION_LOCK - an invalid OrientationLock was passed in.
ERR_SCREEN_ORIENTATION_UNSUPPORTED_ORIENTATION_LOCK - the platform does not support the orientation lock policy.
ERR_SCREEN_ORIENTATION_MISSING_ACTIVITY - could not get the current activity (Android only).

Example

async function changeScreenOrientation() {
  await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_LEFT);
}

`ScreenOrientation.lockPlatformAsync(platformInfo)`

Arguments

platformInfo (PlatformOrientationInfo) -- The platform specific lock to apply. See the PlatformOrientationInfo object type for the different platform formats.

Returns

Returns a promise with void value, resolving when the orientation is set and rejecting if an invalid option or value is passed.

Error Codes

ERR_SCREEN_ORIENTATION_INVALID_ORIENTATION_LOCK - an invalid OrientationLock was passed in (iOS only).
ERR_SCREEN_ORIENTATION_UNSUPPORTED_ORIENTATION_LOCK - the platform does not support the orientation lock policy.
ERR_SCREEN_ORIENTATION_MISSING_ACTIVITY - could not get the current activity (Android only).

`ScreenOrientation.unlockAsync()`

Sets the screen orientation back to the OrientationLock.DEFAULT policy.

Error Codes

ERR_SCREEN_ORIENTATION_MISSING_ACTIVITY - could not get the current activity (Android only).

Returns

Returns a promise with void value, resolving when the orientation is set.

`ScreenOrientation.getOrientationAsync()`

Gets the current screen orientation.

Returns

Returns a promise that resolves to an Orientation value that reflects the current screen orientation.

Error Codes

ERR_SCREEN_ORIENTATION_GET_ORIENTATION_LOCK - An unknown error occurred when trying to get the system lock. (Android only)
ERR_SCREEN_ORIENTATION_MISSING_ACTIVITY - could not get the current activity (Android only).

`ScreenOrientation.getOrientationLockAsync()`

Gets the current screen orientation lock type.

Returns

Returns a promise with an OrientationLock value.

Error Codes

ERR_SCREEN_ORIENTATION_MISSING_ACTIVITY - could not get the current activity (Android only).

`ScreenOrientation.getPlatformOrientationLockAsync()`

Gets the platform specific screen orientation lock type.

Returns

Returns a promise with a PlatformOrientationInfo value.

Error Codes

ERR_SCREEN_ORIENTATION_GET_PLATFORM_ORIENTATION_LOCK
ERR_SCREEN_ORIENTATION_MISSING_ACTIVITY - could not get the current activity (Android only).

`ScreenOrientation.supportsOrientationLockAsync(orientationLock)`

Returns whether the OrientationLock policy is supported on the device.

Returns

Returns a promise that resolves to a boolean value that reflects whether or not the orientationLock is supported.

`ScreenOrientation.addOrientationChangeListener(listener)`

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.

Arguments

listener (OrientationChangeListener)
- Each orientation update will pass an object with the new OrientationChangeEvent to the listener.

Returns

Returns an Subscription object that can later be used to unsuscribe updates to the listener.

`ScreenOrientation.removeOrientationChangeListeners()`

Removes all listeners subscribed to orientation change updates.

`ScreenOrientation.removeOrientationChangeListener(subscription)`

Unsubscribes the listener associated with the subscription object from all orientation change updates.

Arguments

subscription (Subscription)
- A subscription object that manages the updates passed to a listener function on an orientation change.

Enum types

`ScreenOrientation.Orientation`

Orientation.UNKNOWN - An unknown screen orientation. For example, the device is flat, perhaps on a table.
Orientation.PORTRAIT_UP - Right-side up portrait interface orientation.
Orientation.PORTRAIT_DOWN - Upside down portrait interface orientation.
Orientation.LANDSCAPE_LEFT - Left landscape interface orientation.
Orientation.LANDSCAPE_RIGHT - Right landscape interface orientation.

`ScreenOrientation.OrientationLock`

An enum whose values can be passed to the lockAsync method.

OrientationLock.DEFAULT -- The default orientation. On iOS, this will allow all orientations except Orientation.PORTRAIT_DOWN. On Android, this lets the system decide the best orientation.
OrientationLock.ALL -- All four possible orientations
OrientationLock.PORTRAIT -- Any portrait orientation.
OrientationLock.PORTRAIT_UP -- Right-side up portrait only.
OrientationLock.PORTRAIT_DOWN -- Upside down portrait only.
OrientationLock.LANDSCAPE -- Any landscape orientation.
OrientationLock.LANDSCAPE_LEFT -- Left landscape only.
OrientationLock.LANDSCAPE_RIGHT -- Right landscape only.
OrientationLock.OTHER -- A platform specific orientation. This is not a valid policy that can be applied in lockAsync.
OrientationLock.UNKNOWN -- An unknown screen orientation lock. This is not a valid policy that can be applied in lockAsync.

Note OrientationLock.ALL and OrientationLock.PORTRAIT are invalid on devices which don't support OrientationLock.PORTRAIT_DOWN.

`ScreenOrientation.SizeClassIOS`

Each iOS device has a default set of size classes that you can use as a guide when designing your interface.

SizeClassIOS.REGULAR
SizeClassIOS.COMPACT
SizeClassIOS.UNKNOWN

`ScreenOrientation.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.

PORTRAIT_PRIMARY
PORTRAIT_SECONDARY
PORTRAIT
LANDSCAPE_PRIMARY
LANDSCAPE_SECONDARY
LANDSCAPE
ANY
NATURAL
UNKNOWN

Object Types

`ScreenOrientation.PlatformOrientationInfo`

screenOrientationConstantAndroid (integer): A constant to set using the Android native API. For example, in order to set the lock policy to unspecified, -1 should be passed in. (Android only)
screenOrientationArrayIOS (Array[Orientation]): An array of orientations to allow on the iOS platform (iOS only)
screenOrientationLockWeb (WebOrientationLock): A web orientation lock to apply in the browser (web only)

`ScreenOrientation.ScreenOrientationInfo`

orientation (Orientation): The current orientation of the device
verticalSizeClass (SizeClassIOS): The vertical size class of the device (iOS only)
horizontalSizeClass (SizeClassIOS): The horizontal size class of the device (iOS only)

`ScreenOrientation.OrientationChangeEvent`

orientationLock (OrientationLock): The current OrientationLock of the device.
orientationInfo (ScreenOrientationInfo): The current ScreenOrientationInfo of the device.

event (OrientationChangeEvent): An update with the most recent OrientationChangeEvent.

Returns

void

Error Codes

Code	Description
ERR_SCREEN_ORIENTATION_UNSUPPORTED_ORIENTATION_LOCK	The platform does not support the `OrientationLock` policy.
ERR_SCREEN_ORIENTATION_INVALID_ORIENTATION_LOCK	An invalid `OrientationLock` was passed in.
ERR_SCREEN_ORIENTATION_GET_ORIENTATION_LOCK	An unknown error occurred when trying to get the system lock. (Android only)
ERR_SCREEN_ORIENTATION_GET_PLATFORM_ORIENTATION_LOCK	An unknown error occurred when trying to get the system lock. (Android only)
ERR_SCREEN_ORIENTATION_MISSING_ACTIVITY	Could not get the current activity. (Android only)