useWindowDimensions fix for https://github.com/facebook/react-native/issues/29290

useWindowDimensions.ts

import {
  Orientation,
  addOrientationChangeListener,
  getOrientationAsync,
  removeOrientationChangeListener,
} from 'expo-screen-orientation'
import { useEffect, useState } from 'react'
import { Dimensions } from 'react-native'

/**
 * Return actual window dimensions even when orientation changes.
 *
 * @see https://github.com/facebook/react-native/issues/29290
 * @returns window dimensions
 */
export function useWindowDimensions() {
  const [dimensions, setDimensions] = useState(Dimensions.get('window'))

  useEffect(() => {
    getOrientationAsync().then((orientation) => {
      setDimensions(fixDimensions(orientation))
    })

    const listener = addOrientationChangeListener(({ orientationInfo }) => {
      setDimensions(fixDimensions(orientationInfo.orientation))
    })

    return () => {
      removeOrientationChangeListener(listener)
    }
  }, [])

  return dimensions
}

function fixDimensions(orientation: Orientation) {
  let window = Dimensions.get('window')

  if (
    (orientation === Orientation.LANDSCAPE_LEFT ||
      orientation === Orientation.LANDSCAPE_RIGHT) &&
    window.width < window.height
  ) {
    return { ...window, width: window.height, height: window.width }
  } else if (
    (orientation === Orientation.PORTRAIT_UP ||
      orientation === Orientation.PORTRAIT_DOWN) &&
    window.width > window.height
  ) {
    return { ...window, width: window.height, height: window.width }
  }

  return window
}