There are 2 types of screen orientation mode available in mobiles First is Portrait which is the default screen orientation in which the height of screen is bigger then width and Second is Landscape which shows after rotating the screen in which the screen width is screen is bigger then height. So in this tutorial we would going to create a react native application and find at run time whether the device is in Portrait mode or Landscape mode android iOS tutorial without restarting the app using onLayout={} View method to find out the screen width and height.
Note : There is no need to restart the application after rotating the screen to detect the orientation, I have already created this code to detect run time orientation without restarting the app. So after rotating the screen it will automatically detect orientation and show it on screen using Text component.
How we are detecting the orientation :
We are using the simple formula to detect the screen orientation using screen Width and Height. If the screen width is grater then its height then its Landscape Mode or if the device width is less then it height then it is Portrait Mode.
Contents in this project Detect Device Screen Orientation is Portrait or Landscape Android iOS Tutorial :
1. Import StyleSheet, View and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text } from ‘react-native’;
|
2. Create constructor in your project with super() method and inside the state create 3 state variables named as OrientationStatus, Height_Layout and Width_Layout and set their default values is empty .
OrientationStatus is used to Store the Screen Orientation Status like Portrait Mode or Landscape Mode.
Height_Layout is used to store the device screen height.
Width_Layout is used to store the device screen width.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
constructor(){
super();
this.state = {
OrientationStatus : ”,
Height_Layout : ”,
Width_Layout : ”,
}
}
|
3. Create a function named as DetectOrientation() .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
DetectOrientation(){
if(this.state.Width_Layout > this.state.Height_Layout)
{
// Write Your own code here, which you want to execute on Landscape Mode.
this.setState({
OrientationStatus : ‘Landscape Mode’
});
}
else{
// Write Your own code here, which you want to execute on Portrait Mode.
this.setState({
OrientationStatus : ‘Portrait Mode’
});
}
}
|
4. Create a Root View in render’s return block. This is our Main View and using this view we would calculate the screen Height and Width using onLayout={} method and set the height in Height_Layout and width in Width_Layout state. Now we would call the DetectOrientation() function inside the setState method. So every time when onLayout function will call it will update the state and also call the DetectOrientation() which would allow us to detect orientation without restarting the application.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() {
return (
<View style={styles.MainContainer} onLayout={(event) => this.setState({
Width_Layout : event.nativeEvent.layout.width,
Height_Layout : event.nativeEvent.layout.height
}, ()=> this.DetectOrientation())}>
</View>
);
}
|
5. Now add a Text component inside the root view. This would show us the Orientation name using OrientationStatus state.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() {
return (
<View style={styles.MainContainer} onLayout={(event) => this.setState({
Width_Layout : event.nativeEvent.layout.width,
Height_Layout : event.nativeEvent.layout.height
}, ()=> this.DetectOrientation())}>
<Text style={styles.TextStyle}> { this.state.OrientationStatus } </Text>
</View>
);
}
|
6. Create componentDidMount() method and call the DetectOrientation() function inside it.
|
1
2
3
4
5
|
componentDidMount(){
this.DetectOrientation();
}
|
7. Create Style for Root View and Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 10
},
TextStyle :{
fontSize : 20,
color : ‘#000’
}
});
|
8. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text } from ‘react-native’;
export default class App extends Component<{}> {
constructor(){
super();
this.state = {
OrientationStatus : ”,
Height_Layout : ”,
Width_Layout : ”,
}
}
componentDidMount(){
this.DetectOrientation();
}
DetectOrientation(){
if(this.state.Width_Layout > this.state.Height_Layout)
{
// Write Your own code here, which you want to execute on Landscape Mode.
this.setState({
OrientationStatus : ‘Landscape Mode’
});
}
else{
// Write Your own code here, which you want to execute on Portrait Mode.
this.setState({
OrientationStatus : ‘Portrait Mode’
});
}
}
render() {
return (
<View style={styles.MainContainer} onLayout={(event) => this.setState({
Width_Layout : event.nativeEvent.layout.width,
Height_Layout : event.nativeEvent.layout.height
}, ()=> this.DetectOrientation())}>
<Text style={styles.TextStyle}> { this.state.OrientationStatus } </Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
margin: 10
},
TextStyle :{
fontSize : 20,
color : ‘#000’
}
});
|
Screenshot in Android application :
Screenshot in iOS Application :
