Example of React Native Orientation NPM Package Android iOS

Hello friends, As per some of our user choice we are currently exploring some important NPM package in react native. Now as we all know Orientation has a important role in our mobile application. As basic introduction orientation is the way of showing current generated element on screen. All the mobile devices does support 2 types of orientation Landscape and Portrait. The default orientation is Portrait in all mobile devices. So in this tutorial we would learn about Example of React Native Orientation NPM Package Android iOS.

Question:- Now the first question raise in our mind is what is the Landscape Orientation & What is the Portrait Orientation ?

Answer :- Portrait Orientation :- This is default View angle of our mobile phone where device screen width is less than its height. See the image below for proper understand.

Landscape Orientation :- In Landscape mode the device screen width is grater than its height. See the image below for proper understanding.

Now after seeing both of above images you can easily understand the difference between both of them.

Question : – Why do we need to change mobile device screen orientation ?

Answer :- After understanding orientation, next question comes in our mind is why do we need to change orientation in our apps, Now here is the answer because some apps required full screen mode like video playing apps, Games. For them the best preferred orientation is Landscape.

Contents in this project Example of React Native Orientation NPM Package Android iOS :-

1. First we have to install the react-native-orientation NPM package in our react native project. So open your react native project’s main Root Folder in CMD or Terminal and execute below command.

2. The second step is only for iOS users. In iOS we have to install and connect to PODS. So execute below command.

3. Now open your project’s main App.js file and import View, StyleSheet, Text, TouchableOpacity, ScrollView and Alert component.

4. Importing Orientation from ‘react-native-orientation‘ package.

5. Creating our main functional component class App.

6. Creating a State named as orientation with State change method setOrientation .

7. Creating useEffect() method with empty array, This would works as componentdidmount() usages in class component. Now here we would Orientation.getInitialOrientation() method to get current screen orientation and store the value in orientation State.

8. Creating a function named as getCurrentScreenOrientation(). In this method we would detect current orientation.

9. Creating another function named as OnOrientationChange().

10. Creating return() block, Now here we would make 1 Text component to display current orientation using State and 5 Touchable Opacity button.

List of inbuilt methods in Orientation :-

  1. Orientation.lockToPortrait()
  2. Orientation.lockToLandscape()
  3. Orientation.lockToLandscapeLeft()
  4. Orientation.lockToLandscapeRight()
  5. Orientation.unlockAllOrientations()

11. Creating Style.

12. Complete Source Code for App.js file :-

Screenshots :-

Leave a Reply

Your email address will not be published.