O'Reilly logo

React Native Cookbook by Crysfel Villa, Stan Bershadskiy

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Detecting orientation changes

When building complex interfaces, it's very common to render different UI components based on the device's orientation. This is especially true when dealing with tablets.

In this recipe, we will render a menu based on the screen orientation. In landscape, we will render an expanded menu with icons and texts, and in portrait we will only render the icons.

Getting ready

To support orientation changes we are going to use a third-party library called react-native-orientation by Yamill Vallecillo. It works for iOS and Android by listening to the native orientation change on each platform. I've been using this library for a couple of projects, and it works pretty well.

We will also use react-native-vector-icons by Joel Arvidsson. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required