Files
react-native/Libraries/Utilities/useWindowDimensions.js
T
Test User 0b4f4eec8e chore: update Dimensions API Flow types (#31898)
Summary:
This small PR updates the Flow types used in Dimensions. The following changes has been made:
* generic types has been replaced with types from `NativeDeviceInfo` (which already were used in event subscription update)
* ~simplification of `DisplayMetricsAndroid` by spreading via intersection with `DisplayMetrics` type and removing shared properties~
  > I have tried both notations, but according to the lint, it looks like a Native Modules typing limitation which requires redundancy / code duplication in cases like this.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Internal] [Changed] - update Dimensions API Flow types

Pull Request resolved: https://github.com/facebook/react-native/pull/31898

Test Plan: Running `yarn flow` in the workspace yields no errors.

Reviewed By: yungsters

Differential Revision: D29932940

Pulled By: GijsWeterings

fbshipit-source-id: bf97bb972964c585207e2450ccf71d932555e291
2021-08-03 03:15:42 -07:00

44 lines
1.3 KiB
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow strict-local
*/
import Dimensions from './Dimensions';
import {
type DisplayMetrics,
type DisplayMetricsAndroid,
} from './NativeDeviceInfo';
import {useEffect, useState} from 'react';
export default function useWindowDimensions():
| DisplayMetrics
| DisplayMetricsAndroid {
const [dimensions, setDimensions] = useState(() => Dimensions.get('window'));
useEffect(() => {
function handleChange({window}) {
if (
dimensions.width !== window.width ||
dimensions.height !== window.height ||
dimensions.scale !== window.scale ||
dimensions.fontScale !== window.fontScale
) {
setDimensions(window);
}
}
const subscription = Dimensions.addEventListener('change', handleChange);
// We might have missed an update between calling `get` in render and
// `addEventListener` in this handler, so we set it here. If there was
// no change, React will filter out this update as a no-op.
handleChange({window: Dimensions.get('window')});
return () => {
subscription.remove();
};
}, [dimensions]);
return dimensions;
}