react-native-size-class

React Native library that allows you to get an information about size class changes on device.

Getting started

Install the library using npm:

npm install --save react-native-size-class

Using React Native >= 0.60

Linking the package manually is not required anymore with Autolinking.

• iOS Platform:

  $ npx pod-install # CocoaPods on iOS needs this extra step

  Using React Native < 0.60

You then need to link the native parts of the library for the platforms you are using. The easiest way to link the library is using the CLI tool by running this command from the root of your project:

react-native link react-native-size-class

If you can't or don't want to use the CLI tool, you can also manually link the library using the instructions below (click on the arrow to show them):

Either follow the instructions in the React Native documentation to manually link the framework or link using Cocoapods by adding this to your Podfile:

pod 'react-native-size-class', :path => '../node_modules/react-native-size-class'

Usage

First, wrap your app in 'SizeClassProvider' component:

import { SizeClassProvider } from 'react-native-size-class';
const App = () => {
  return (
    <SizeClassProvider>
      <YourApp>
    </SizeClassProvider>
  );
}

Then, inside YourApp component call 'useSizeClass' hook:

import { useSizeClass } from 'react-native-size-class';

Receive updates on size class changes

 const {horizontal, vertical} = useSizeClass();

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Maintainers

• Nikita Tiufiakov - React Native/iOS Developer at Pipedrive

License

MIT