Dimensions.js

// @flow

import * as React from 'react';
import { Dimensions as RNDimensions } from 'react-native';
import hoistStatics from 'hoist-non-react-statics';

export type Metrics = $ReadOnly<{|
  width: number,
  height: number,
|}>;

export type EdgeInsets = $ReadOnly<{|
  left: number,
  top: number,
  right: number,
  bottom: number,
|}>;

type Props = $ReadOnly<{|
  children: (Metrics, EdgeInsets) => React.Node,
|}>;

type State = {
  window: Metrics,
  safeAreaInsets: EdgeInsets,
};

export default class Dimensions extends React.Component<Props, State> {
  state = {
    window: RNDimensions.get('window'),
    safeAreaInsets: RNDimensions.get('safeAreaInsets'),
  };

  componentDidMount() {
    RNDimensions.addEventListener('change', this._handleDimensionsChange);
  }

  componentWillUnmount() {
    RNDimensions.removeEventListener('change', this._handleDimensionsChange);
  }

  _handleDimensionsChange = ({ window, safeAreaInsets }) => {
    this.setState({ window, safeAreaInsets });
  };

  render() {
    return this.props.children(this.state.window, this.state.safeAreaInsets);
  }
}

export function withDimensions(Component: any): React.ComponentType<any> {
  class WithDimensionsComponent extends React.Component<any> {
    static displayName = `withDimensions(${Component.displayName ||
      Component.name})`;

    render() {
      return (
        <Dimensions>
          {(dimensions, safeAreaInsets) => (
            <Component
              {...this.props}
              dimensions={dimensions}
              safeAreaInsets={safeAreaInsets}
            />
          )}
        </Dimensions>
      );
    }
  }
  return hoistStatics(WithDimensionsComponent, Component);
}