CODEWITHSUNDEEP
react-nativereact-native-ios
Sinan Coskun
Sinan Coskun

Reputation: 111

React Native, Detect screen rotation change using portrait mode

I am using portrait mode in react-native application. But I want to capture the rotation event of the screen. Is there a way to do this?

Thanks...

Upvotes: 11

Views: 42836

Answers (6)

shammi
shammi

Reputation: 1399

this function might help you
create a useOrientation.js file

import {useEffect, useState} from 'react';
import {Dimensions} from 'react-native';

export function useOrientation(){
  const {width, height} = Dimensions.get('window');

  const [orientation, setOrientation] = useState(
    width < height ? 'PORTRAIT' : 'LANDSCAPE',
  );


  useEffect(() => {
    Dimensions.addEventListener('change', ({window:{width,height}})=>{
      if (width<height) {
        setOrientation("PORTRAIT")
      } else {
        setOrientation("LANDSCAPE")
      }
    })
  }, []);

  return orientation;
}

Upvotes: 18

Cosmin
Cosmin

Reputation: 21416

Using React Native 0.73 I just add a listener in useEffect():

useEffect(() => {
  const subscription = Dimensions.addEventListener('change', ({window, screen}) => {
      // code that runs when the orientation changes
    },
  );
  return () => subscription?.remove();
});

Upvotes: 1

Nicolas A. T.
Nicolas A. T.

Reputation: 173

With useWindowDimensions

import {useWindowDimensions} from "react-native"
export function useIsLandscape() {
  const {height, width} = useWindowDimensions()
  return width > height
}

A quick and easy native hook implementation, for 2022.

Upvotes: 5

dies-iris
dies-iris

Reputation: 111

To complete the previous answers, if you simply want your app to be responsive, it is easier to use useWindowDimensions() https://reactnative.dev/docs/usewindowdimensions Just put something like this in your root component :

const SCREEN_WIDTH = useWindowDimensions().width;
const SCREEN_HEIGHT = useWindowDimensions().height;
return (
        <View style={{ width: SCREEN_WIDTH, minHeight: SCREEN_HEIGHT}} >
            //the rest of your app
        </View>
    );

Upvotes: 11

benLondon
benLondon

Reputation: 31

useDeviceOrientation: will return an object which will be updated each time the device will change the orientation "true or false"

import { useDeviceOrientation } from "@react-native-community/hooks";

Example object returned by useDeviceOrientation:

{
  "landscape": false,
  "portrait": true,
}

We can destructure the object:

const { landscape } = useDeviceOrientation();

Than we can use it :

height: landscape ? "100%" : "30%"

Upvotes: 3

Daniel Dimitrov
Daniel Dimitrov

Reputation: 2018

Well, you have several options. You can use the Dimensions API https://reactnative.dev/docs/dimensions

You can add a listener for Dimensions.change and you could do something like

function isPortrait() {
  const dim = Dimension.get("screen")
  return dim.height >= dim.width
}

function isLandscape() {
  const dim = Dimension.get("screen")
  return dim.width >= dim.height
}

now add listen to dimension chagnes with

Dimensions.addEventListener("change", () => {
// orientation has changed, check if it is portrait or landscape here
})

Another posibility is to use the one of the orientation packages available such as https://github.com/wonday/react-native-orientation-locker

Upvotes: 3

Related Questions