In today's article, I will be showing you two different ways to handle screen orientation in your React Native app. The first way will be using the expo-screen-orientaiton package and the second way will be allowing expo to handle when our app should be rotated.
Project Setup
Adding App Boilerplate
Before we start reading our devices orientation. We first need an app to work with. Paste the following boilerplate code into your app.js file:
Your screen should look like this:
Screenshot of what your HomeScreen should look like
Importing Expo Screen Orientation
Before we can start reading our device's screen orientation we first have to install the expo-screen-orientaiton package. Run the following command in your terminal:
expo install expo-screen-orientation
And add the following import statement to the top of your app.js file:
import * as ScreenOrientation from 'expo-screen-orientation'
Reading the Screen Orientation
Storing our Devices Orientation
We will be using the getOrientaitonAsync function to read our screen's orientation. getOrientationAsync returns a promise that specifies if our device is in landscape or portrait mode.
We will need a way to save our device's orientation. To accomplish this, we will be using the useState hook.
Import useState at the top of your project:
import {useState} from 'react'
And add the following code:
const [orientationIsLandscape,setOrientation]=useState(true)
Your code should look like this:
There are actually two ways to rotate your app.
The first way is changing the layout manually by calling the getOrientationAsync function. This can be accomplished by creating and calling an async function once our button has been clicked.
The second way is to let expo handle rotating our app when the user tilts their device. This only requires a small change in the app.json file.
I will be showing you both ways.
Changing Orientation using getOrientationAsync
To change our screen orientation use getOrientaiton async we will need two functions: a toggleOrientation function and an async changeScreenOrientation function.
Our toggleOrientaiton function will set the orientationIsLandscape state to its opposite value.
If it is true orientationIsLandscape will become false and vice versa. This function will also call changeScreenOrientation.
changeScreenOrientation will be what actually handles rotating our screen.
The code for this is below:
And now we have to add our toggleOrientation function to our button's onPress.
<Button title="Change Orientation" onPress={toggleOrientation} />
Now once the button is clicked our app will rotate from portrait mode to landscape. If you press the button again the app will rotate back to portrait mode.
Letting Expo Handle the Screen Orientation
To allow expo to handle changing the screen orientation we have to edit the app.json file. Go into your app.json file and delete the line titled orientation.
Now if you tilt your device, your app will automatically rotate. If your app does not rotate you may have to enable auto-rotate in your device's settings.
Conclusion
Thank you for reaching the end of my article on ‘How to Change a Devices Screen Orientation using Expo in React Native'.