Navigate back to the homepage

How to lock orientation in react native

React Native
August 22nd, 2021 · 1 min read
How to lock orientation in react native

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to make your react native application rotation lock. here we will learn how lock orientation in react native for ios, and android both.

React Native provide orientation handler but default it will depend upon phone ( auto rotate or not ). but when mantion your application orientation in your project every time it will open on same orientation mode, it will no longer depend on user orientation settings.

let’s see how we will disable orientation in react native ios and android.

Lock orientation in React Native android

For android, React Native provide orientation option in AndroidManifest.xml it will located in your project/android/app/src/main/AndroidManifest.xml.

In AndroidManifest.xml search application tag and add screenOrientation attribute android:screenOrientation="portrait" like below example.

2 <application
3 android:name=".MainApplication"
4 android:label="@string/app_name"
5 android:icon="@mipmap/ic_launcher"
6 android:roundIcon="@mipmap/ic_launcher_round"
7 android:allowBackup="false"
8 android:usesCleartextTraffic="true"
9 android:screenOrientation="portrait"
10 android:theme="@style/AppTheme"
11 android:requestLegacyExternalStorage="true"
12 >
13 ...
14 </application>

Lock orientation in React Native iOS

For ios, React Native provide orientation settings in Project/Genral/DeploymentInfo tab. check below highlighted path to navigate DeploymentInfo Tab.

React Native, orientation, lock, Example

Thanks for Reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide



More articles from Infinitbility

How to solve RecordRTC recorded video seekable issue

How to solve RecordRTC recorded video seekable issue

React RecordRTC save seekable recorded video example

August 21st, 2021 · 1 min read
how to set keyboard type in react native

how to set keyboard type in react native

React Native keyboardType example

August 20th, 2021 · 1 min read
© 2020–2022 Infinitbility
Link to $ to $ to $ to $ to $ to $mailto:[email protected]