Ipad Orientation landscape mode is not working

Question

I'm trying to implent the Ipad Landscape mode but the device orientation is not being detected. We have made all the necessary changes in info.plist file.Still we are not able to get the windowWidth and windowHeight value according to the device orientation. All the time the windowWidth and windowHeight values remains the same.

Below is the code we tried...

const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;
const isIpad = windowWidth >= 768;  
const [orientation, setOrientation] = useState(getInitialOrientation());

  useEffect(() => {
    const updateOrientation = () => {
      const newOrientation = getOrientation();
      if (newOrientation !== orientation) {
        setOrientation(newOrientation);
      }
    };

    Dimensions.addEventListener('change', updateOrientation);

    return () => {
      Dimensions.removeEventListener('change', updateOrientation);
    };
  }, [orientation]);

  const getInitialOrientation = () => {
    return windowWidth < windowHeight ? 'PORTRAIT' : windowWidth > 768 ? 'LANDSCAPE' : 'PORTRAIT'; // Adjust the width condition as per your requirement
  }

  const getOrientation = () => {
    return windowWidth < windowHeight ? 'PORTRAIT' : windowWidth > 768 ? 'LANDSCAPE' : 'PORTRAIT'; // Adjust the width condition as per your requirement
  }

We expected the windowWidth and windowHeight values to change when we turned the device orientation but it is not happening.

Answer 1

This code would execute only once initially:

const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;

Use the parameter passed to the callback updateOrientation -> ({ window: { width, height } })

    const updateOrientation = (({ window: { width, height } })) => {
      const newOrientation = getOrientation(width, height);
      if (newOrientation !== orientation) {
        setOrientation(newOrientation);
      }
    };

I have created an example:

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

// You can import supported modules from npm
import { Card } from 'react-native-paper';

// or any files within the Snack
import AssetExample from './components/AssetExample';

export function useOrientation() {
  const [orientation, setOrientation] = useState('undetermined');

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

  return orientation;
}

export default function App() {
  const orientation = useOrientation();

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.paragraph}>{orientation}</Text>
      <Card>
        <AssetExample />
      </Card>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Answer 2

The Dimensions module in React Native does not provide real-time updates for the window dimensions. It only provides the initial dimensions when the app starts & use the useWindowDimensions hook from the react-native package. This hook provides the current window dimensions and updates whenever the window dimensions change.

import React, { useState } from 'react';
import { useWindowDimensions } from 'react-native';

const App = () => {
  const { width, height } = useWindowDimensions();
  const isIpad = width >= 768;
  const [orientation, setOrientation] = 
  useState(getInitialOrientation(width, height));

  const getInitialOrientation = (windowWidth, windowHeight) => {
    return windowWidth < windowHeight ? 'PORTRAIT' : 'LANDSCAPE';
  };

  const getOrientation = (windowWidth, windowHeight) => {
    return windowWidth < windowHeight ? 'PORTRAIT' : 'LANDSCAPE';
  };

  useEffect(() => {
    const updateOrientation = () => {
      const newOrientation = getOrientation(width, height);
      if (newOrientation !== orientation) {
        setOrientation(newOrientation);
      }
    };

    updateOrientation(); // Call it initially to set the correct initial orientation

    return () => {
      // No need to remove the event listener as useWindowDimensions hook takes care of it
    };
  }, [width, height, orientation]);

  // Your component logic here
};