How to lock device orientation for React Native apps (Android & iOS) — 2x02

Tasos Maroudas
Building With React Native
3 min readOct 9, 2018

--

This story is part of a series where I am sharing my experiences on React Native, hoping it will prove useful to the React Native community and provide helpful insights. For app development enquiries check us out or contact me here.

Image 1: Abstract smartphone image that changes orientation gradually

Why lock application orientation mode?

Many applications have their User Interface (UI) designed to contain a lot of elements. To have these applications change their orientation (i.e. from portrait to landscape), it would mean that users will have a bad UI experience and also a lot of scrolling to deal with. A typical example of that case is games.

In these cases, app creators make a decision to visualize this information either vertically or horizontally, not both. Instead they prefer to “lock” orientation to one mode and optimize for it.

How to perform the configuration

There is no exposed API from React Native to achieve that (although there is one from ExpoKit), so in order to achieve our goal we can either configure it directly on the native apps or use third party packages that have been built to help with this purpose, like react-native-orientation.

--

--

Tasos Maroudas
Building With React Native

❤ React Native. Part time blogger. CTO & Founder of Coded Lines Ltd