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.addListener("change", state => {
  // state.width
  // state.height
  // state.orientation = one of Values.OrientationValues
  // state.layout = one of Values.LayoutValues
  // state.fontScale
});

// 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 = useScreenUtils();

  return <Text>{"Screen width: " + screenState.width}</Text>;
};

License

MIT