react-native-dimension-aware

A react native library that allows you to easily respond to device dimension changes.

Installation

yarn add react-native-dimension-aware

Or if you prefer npm:

npm install --save react-native-dimension-aware

Usage

Dimension Context

Place the provider component in your react tree. For example:

import { DimensionProvider } from "react-native-dimension-aware";
 
<DimensionProvider>
  <App />
</DimensionProvider>;

Use the consumers in descendants of the provider component.

import { ScreenConsumer, WindowConsumer } from "react-native-dimension-aware";
 
<View>
  <ScreenConsumer>
    {(width, height) => {
      <Text>Width {width}</Text>
      <Text>Height {height}</Text>
    }}
  </ScreenConsumer>
  <WindowConsumer>
    {(width, height) => {
      <Text>Width {width}</Text>
      <Text>Height {height}</Text>
    }}
  </WindowConsumer>
</View>

The dimension provider will take care of updates and broadcast to any consumers in your react tree.

DimensionAware

import {
  DimensionAware,
  getWindowWidth,
  getWindowHeight
} from "react-native-dimension-aware";
 
<DimensionAware
  render={dimensions => (
    <View>
      <Text>Width {getWindowWidth(dimensions)}</Text>
      <Text>Height {getWindowHeight(dimensions)}</Text>
    </View>
  )}
/>;