Medium Gist

Context.jsx

const { Provider, Consumer } = React.createContext(buildInitialContext());

export class DimensionProvider extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: buildInitialContext()
    };
  }

  componentDidMount() {
    Dimensions.addEventListener("change", this.dimensionHandler);
  }

  componentWillUnmount() {
    Dimensions.removeEventListener("change", this.dimensionHandler);
  }

  dimensionHandler = ({ window, screen }) => {
    this.setState(({ data }) => ({
      data: updateState(data, window, screen)
    }));
  };

  render() {
    return <Provider value={this.state.data}>{this.props.children}</Provider>;
  }
}

export const WindowConsumer = ({ children }) => {
  return (
    <Consumer>
      {dimensions =>
        children(getWindowWidth(dimensions), getWindowHeight(dimensions))
      }
    </Consumer>
  );
};