2.1.0 • Published 6 years ago
react-native-dimension-aware v2.1.0
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>
)}
/>;