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 :
Thank you. It is good one. So for the portrait and landscape mode do we need to write two different UI coding or single code is ok for both mode? How we make it?
Single code should do your work .
The code which is ok in portrait mode is not same as in landscape mode. In portrait mode it UI fit to screen, not need to scroll but in landscape mode, it is not fit. Not even scroll without scrollview and if we give scrollview then portrait mode UI get changed.
Rohit you need to make 2 Views, 1 for landscape and 1 for portrait mode Now using the ternary operator and state value call the Views individually like {State ? portrait view : landscape view}. So if the device in landscape mode it will call the Landscape mode and if the device is in portrait mode it will call the portrait mode.
Hello,
this code helps me alot in understanding Orientation,
actually i make one function for landscape and portrait simple view and i call it into Detect Orientation function,
but when i execute code i got this type of error in device :
“cannot add a child that doesn’t have a yoganode to a parent without a measure function!(Trying to add a ‘ReactRawTextShadowNode’ to a ‘Layout ShadowNode’)”
it would be great if you could help me on this,
thank you
Karan you can send us your code on our mail [email protected] .
Thank you.when I used your code it worked properly but when I added my code in Portrait Mode and Landscape Mode I got a white screen and no thing appeared .
Will this code work in iOS simulator or need to test it real device ? I am testing in iOS simulator its not working, the “DetectOrientation()” is getting called for first time only when screen appears . This is because I think the method has beed called from componentDidMount() method. Please let me know, what I am missing here.
Anup what is your requirement regarding this functionality ?
Just need to catch change of orientation.
Anup the code works on each time when you rotate the device.