WIP React component to get dimensions of screen.

Dimensions.js

import React, { Fragment } from 'react'
import { Dimensions } from 'react-native'

export default class ScreenMediaQuery extends React.Component {
  state = {
    dimensions: {
      width: Dimensions.get(`window`).width,
      height: Dimensions.get(`window`).height,
      mode: Dimensions.get(`window`).width > Dimensions.get(`window`).height ? `landscape` : `portrait`,
    },
  }

  handleDimensionsChange = dimensions => this.setState({
    dimensions: {
      width: dimensions.window.width,
      height: dimensions.window.height,
      mode: dimensions.window.width > dimensions.window.height ? `landscape` : `portrait`,
    },
  })

  componentWillMount () {
    Dimensions.addEventListener(`change`, this.handleDimensionsChange)
  }

  componentWillUnmount () {
    Dimensions.removeEventListener(`change`, this.handleDimensionsChange)
  }

  render () {
    return (
      <Fragment dimensions={this.state.dimensions}>
        {this.props.children}
      </Fragment>
    )
  }
}