React Native Detect Device Screen Orientation is Portrait or Landscape

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.

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.

3. Create a function named as DetectOrientation() .

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.

5. Now add a Text component inside the root view. This would show us the Orientation name using OrientationStatus state.

6. Create componentDidMount() method and call the DetectOrientation() function inside it.

7. Create Style for Root View and Text component.

8. Complete source code for App.js File :

Screenshot in Android application :

Detect Device Screen Orientation

Screenshot in iOS Application :

11 Comments

  1. 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?

  2. 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.

  3. 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

  4. 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 .

  5. 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.

  6. Just need to catch change of orientation.

Leave a Reply

Your email address will not be published. Required fields are marked *