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.
|
1
|
npm install react–native–orientation —save
|
2. The second step is only for iOS users. In iOS we have to install and connect to PODS. So execute below command.
|
1
|
cd ios && pod install && cd ..
|
3. Now open your project’s main App.js file and import View, StyleSheet, Text, TouchableOpacity, ScrollView and Alert component.
|
1
2
3
|
import React, { useState, useEffect } from ‘react’;
import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Alert } from ‘react-native’;
|
4. Importing Orientation from ‘react-native-orientation‘ package.
|
1
|
import Orientation from ‘react-native-orientation’;
|
5. Creating our main functional component class App.
|
1
2
3
4
5
|
export default function App() {
}
|
6. Creating a State named as orientation with State change method setOrientation .
|
1
|
const [orientation, setOrientation] = useState(”);
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
useEffect(() => {
const currentOrientation = Orientation.getInitialOrientation();
setOrientation(‘Current Device Orientation is = ‘ + currentOrientation);
//Listener Calls When Orientation Change.
Orientation.addOrientationListener(OnOrientationChange);
return () => {
// Removing Listener.
Orientation.removeOrientationListener(OnOrientationChange);
};
}, []);
|
8. Creating a function named as getCurrentScreenOrientation(). In this method we would detect current orientation.
|
1
2
3
4
5
6
7
8
9
|
const getCurrentScreenOrientation = () => {
Orientation.getOrientation((err, orientation) => {
Alert.alert(” Current Screen Orientation is : “ + orientation);
});
}
|
9. Creating another function named as OnOrientationChange().
|
1
2
3
4
5
|
const OnOrientationChange = (orientation) => {
setOrientation(“Current Screen Orientation is “ + orientation);
}
|
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 :-
- Orientation.lockToPortrait()
- Orientation.lockToLandscape()
- Orientation.lockToLandscapeLeft()
- Orientation.lockToLandscapeRight()
- Orientation.unlockAllOrientations()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
return (
<View style={styleSheet.MainContainer}>
<Text style={{ color: ‘red’, fontSize: 30, textAlign: ‘center’ }}>
Example of {‘n’} React Native Orientation
</Text>
<ScrollView>
<Text style={{fontSize: 28, textAlign: ‘center’}}>
{orientation}
</Text>
<TouchableOpacity
style={styleSheet.button}
onPress={getCurrentScreenOrientation}>
<Text style={styleSheet.buttonText}> Get Detect Current Screen Orientation </Text>
</TouchableOpacity>
<TouchableOpacity
style={styleSheet.button}
onPress={() => Orientation.lockToPortrait()}>
<Text style={styleSheet.buttonText}> Lock the Orientation to Portrait Mode </Text>
</TouchableOpacity>
<TouchableOpacity
style={styleSheet.button}
onPress={() => Orientation.lockToLandscape()}>
<Text style={styleSheet.buttonText}> Lock the Orientation to Landscape Mode </Text>
</TouchableOpacity>
<TouchableOpacity
style={styleSheet.button}
onPress={() => Orientation.lockToLandscapeLeft()}>
<Text style={styleSheet.buttonText}> Locks the Orientation to Right Landscape Mode </Text>
</TouchableOpacity>
<TouchableOpacity
style={styleSheet.button}
onPress={() => Orientation.lockToLandscapeRight()}>
<Text style={styleSheet.buttonText}> Locks the Orientation to Left Landscape Mode </Text>
</TouchableOpacity>
<TouchableOpacity
style={styleSheet.button}
onPress={() => Orientation.unlockAllOrientations()}>
<Text style={styleSheet.buttonText}> Unlocks All Locked Orientations </Text>
</TouchableOpacity>
</ScrollView>
</View>
);
|
11. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
padding: 10,
justifyContent: ‘center’,
//alignItems: ‘center’
},
button: {
justifyContent: ‘center’,
padding: 8,
marginTop: 15,
backgroundColor: ‘#01d2ff’,
},
buttonText: {
color: ‘#000’,
textAlign: ‘center’,
//fontSize: 24,
fontWeight: ‘bold’
},
});
|
12. Complete Source Code for App.js file :-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
import React, { useState, useEffect } from ‘react’;
import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Alert } from ‘react-native’;
import Orientation from ‘react-native-orientation’;
export default function App() {
const [orientation, setOrientation] = useState(”);
// Call on App Start.
useEffect(() => {
const currentOrientation = Orientation.getInitialOrientation();
setOrientation(‘Current Device Orientation is = ‘ + currentOrientation);
//Listener Calls When Orientation Change.
Orientation.addOrientationListener(OnOrientationChange);
return () => {
// Removing Listener.
Orientation.removeOrientationListener(OnOrientationChange);
};
}, []);
const getCurrentScreenOrientation = () => {
Orientation.getOrientation((err, orientation) => {
Alert.alert(” Current Screen Orientation is : “ + orientation);
});
}
const OnOrientationChange = (orientation) => {
setOrientation(“Current Screen Orientation is “ + orientation);
}
return (
<View style={styleSheet.MainContainer}>
<Text style={{ color: ‘red’, fontSize: 30, textAlign: ‘center’ }}>
Example of {‘n’} React Native Orientation
</Text>
<ScrollView>
<Text style={{fontSize: 28, textAlign: ‘center’}}>
{orientation}
</Text>
<TouchableOpacity
style={styleSheet.button}
onPress={getCurrentScreenOrientation}>
<Text style={styleSheet.buttonText}> Get Detect Current Screen Orientation </Text>
</TouchableOpacity>
<TouchableOpacity
style={styleSheet.button}
onPress={() => Orientation.lockToPortrait()}>
<Text style={styleSheet.buttonText}> Lock the Orientation to Portrait Mode </Text>
</TouchableOpacity>
<TouchableOpacity
style={styleSheet.button}
onPress={() => Orientation.lockToLandscape()}>
<Text style={styleSheet.buttonText}> Lock the Orientation to Landscape Mode </Text>
</TouchableOpacity>
<TouchableOpacity
style={styleSheet.button}
onPress={() => Orientation.lockToLandscapeLeft()}>
<Text style={styleSheet.buttonText}> Locks the Orientation to Right Landscape Mode </Text>
</TouchableOpacity>
<TouchableOpacity
style={styleSheet.button}
onPress={() => Orientation.lockToLandscapeRight()}>
<Text style={styleSheet.buttonText}> Locks the Orientation to Left Landscape Mode </Text>
</TouchableOpacity>
<TouchableOpacity
style={styleSheet.button}
onPress={() => Orientation.unlockAllOrientations()}>
<Text style={styleSheet.buttonText}> Unlocks All Locked Orientations </Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
padding: 10,
justifyContent: ‘center’,
//alignItems: ‘center’
},
button: {
justifyContent: ‘center’,
padding: 8,
marginTop: 15,
backgroundColor: ‘#01d2ff’,
},
buttonText: {
color: ‘#000’,
textAlign: ‘center’,
//fontSize: 24,
fontWeight: ‘bold’
},
});
|
Screenshots :-
Also Read :
Use useEffect as componentwillunmount in React Native Hooks Example
React Native Pass TextInput Entered Value From One Activity Screen to Another
Upgrade React Native 0.64 to 0.65 Guide | Latest Version
React Native Segmented Control Tab Android iOS NPM Example
React Native Password Encryption Decryption using Base64 Method Example
