![]() If your app does not rotate you may have to enable auto-rotate in your device's settings. Now if you tilt your device, your app will automatically rotate. Go into your app.json file and delete the line titled orientation. To allow expo to handle changing the screen orientation we have to edit the app.json file. Letting Expo Handle the Screen Orientation If you press the button again the app will rotate back to portrait mode. Now once the button is clicked our app will rotate from portrait mode to landscape. ![]() This function will also call changeScreenOrientation.ĬhangeScreenOrientation will be what actually handles rotating our screen.Īnd now we have to add our toggleOrientation function to our button's onPress. If it is true orientationIsLandscape will become false and vice versa. Our toggleOrientaiton function will set the orientationIsLandscape state to its opposite value. To change our screen orientation use getOrientaiton async we will need two functions: a toggleOrientation function and an async changeScreenOrientation function. Changing Orientation using getOrientationAsync This only requires a small change in the app.json file. The second way is to let expo handle rotating our app when the user tilts their device. This can be accomplished by creating and calling an async function once our button has been clicked. The first way is changing the layout manually by calling the getOrientationAsync function. There are actually two ways to rotate your app. Import useState at the top of your project: import from 'react'Īnd add the following code: const =useState(true) To accomplish this, we will be using the useState hook. We will need a way to save our device's orientation. getOrientationAsync returns a promise that specifies if our device is in landscape or portrait mode. We will be using the getOrientaitonAsync function to read our screen's orientation. Reading the Screen Orientation Storing our Devices Orientation Run the following command in your terminal: expo install expo-screen-orientationĪnd add the following import statement to the top of your app.js file: import * as ScreenOrientation from 'expo-screen-orientation' Screenshot of what your HomeScreen should look likeīefore we can start reading our device's screen orientation we first have to install the expo-screen-orientaiton package. Paste the following boilerplate code into your app.js file: Project Setup Adding App Boilerplateīefore we start reading our devices orientation. ![]() 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. In today's article, I will be showing you two different ways to handle screen orientation in your React Native app. LinkedIn logo for sharing a link Twitter logo for sharing a link Reddit logo for sharing a link ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |