Skip to main content
Logo Appt Light

Screen orientation on React Native

Apps should adapt to the preferred display orientation of the user. Most apps restrict the screen to portrait orientation, but they should also support landscape orientation. Some users have their devices mounted in a fixed orientation (e.g. on the arm of a wheelchair). Therefore, apps need to support both orientations.

In React Native, multiple screen orientations are enabled by default. Locking screen orientation is handled in native code:

  • For Android, remove instances of the android:screenOrientation attribute.

  • For iOS, check if 4 orientations have been added to UISupportedInterfaceOrientations.

You can use the Dimensions API to listen to orientation changes.

Dimensions.addEventListener('change', () => {
    this.setState({
        orientation: Platform.isPortrait() ? 'portrait' : 'landscape'
    });
});

Feedback?

Let us know!