react-native-screenutils
Helpers to adapt your React Native app to screen and orientation changes.
Installation
npm i react-native-screenutils
# or
yarn add react-native-screenutils
Usage
This module exposes a screen state object via various means. The object is structured as follows:
width // Screen Width in pt (number) height // Screen Height in pt (number) orientation // Orientation (see Values.OrientationValues) (string) layout // Layout Type (see Values.LayoutValues) (string) fontScale; // Font Scale, default is 1 (number)
orientation
and layout
are enums.
import Values from "react-native-screenutils"; // Values.OrientationValues.PORTRAIT// Values.OrientationValues.LANDSCAPE // Values.LayoutValues.PHONE// Values.LayoutValues.TABLET
This module allows you to access updates to the screen size, orientation and font scale in three different ways:
Event Emitter
import ScreenEmitter Values from "react-native-screenutils"; ScreenEmitter; // Don't forget to remove the event listener when you no longer require it!
React Context
Wrap your app in ScreenProvider
and access screen state via ScreenConsumer
.
import ScreenProvider ScreenConsumer from "react-native-screenutils"; const App = return <View> <ScreenProvider> <ScreenConsumer> width height orientation layout fontScale <Text>"Screen width: " + width</Text> </ScreenConsumer> </ScreenProvider> </View> ;;
React Hooks
react-native-screenutils
provides the useScreenUtils
hook.
import useScreenUtils from "react-native-screenutils"; const ScreenDetails = const screenState = ; return <Text>"Screen width: " + screenStatewidth</Text>;;
License
MIT