1import { Dimensions } from 'react-native';
2import { useEffect, useState } from 'react';
3
4type DisplayMetrics = {
5  width: number;
6  height: number;
7  scale: number;
8  fontScale: number;
9};
10
11// Copied from https://github.com/facebook/react-native/blob/8d57691a/Libraries/Utilities/useWindowDimensions.js
12// for compatibility with React Native < 0.61.
13export default function useWindowDimensions(): DisplayMetrics {
14  const [dimensions, setDimensions] = useState(() => Dimensions.get('window'));
15  useEffect(() => {
16    function handleChange({ window }: { window: DisplayMetrics }) {
17      if (
18        dimensions.width !== window.width ||
19        dimensions.height !== window.height ||
20        dimensions.scale !== window.scale ||
21        dimensions.fontScale !== window.fontScale
22      ) {
23        setDimensions(window);
24      }
25    }
26    Dimensions.addEventListener('change', handleChange);
27    // We might have missed an update between calling `get` in render and
28    // `addEventListener` in this handler, so we set it here. If there was
29    // no change, React will filter out this update as a no-op.
30    handleChange({ window: Dimensions.get('window') });
31    return () => {
32      Dimensions.removeEventListener('change', handleChange);
33    };
34  }, [dimensions]);
35  return dimensions;
36}
37