react-native-utils-toolkit

Provide solutions to make your app flexible for different screen sizes, different devices. When developing with react-native, you need to manually adjust your app to look great on a variety of different screen sizes. This package provides some simple tooling to make your scaling a whole lot easier.

Getting started

    yarn add react-native-utils-toolkit

or

    npm i react-native-utils-toolkit

RN Version < 0.60

    react-native link react-native-utils-toolkit

Run IOS

    cd ios && pod install
    react-native run-ios

Run Android

    react-native run-android

Jest setup

    jest.mock('react-native-utils-toolkit', () => {
        const UtilsToolkit = require('react-native-utils-toolkit/mock');
        return UtilsToolkit;
    });

Documents

| API | Type | Description | | ------------------ | -------------------- | ----------------------------------------------------------------------- | | scale | Function | Will return a linear scaled result of the provided size | | fontScale | Function | Will return a linear scaled result of the font size provided | | deviceInch | Number | Inch of device | | hasNotch | Boolean | Tells if the device has a notch | | isAndroid | Boolean | Tells if the device is Android operating system | | isIOS | Boolean | Tells if the device is IOS operating system | | isSmallDevice | Boolean | Tells the device has a screen size smaller than 4.8 inches | | isTablet | Boolean | Tells if the device is a tablet | | width | Number | Screen width | | height | Number | Screen height | |useDeviceOrientation| Hooks API | Device orientation detection | | useBackHandler | Hooks API | Detects hardware button presses for back navigation | | useAppState | Hooks API | Can tell you if the app is in the foreground or background, and notify you when the state changes |

Source code demo

react-native-template-components A beautiful template for React Native.

Demo

Usage

    import React from 'react';
    import {SafeAreaView, ScrollView, StyleSheet, Text, View} from 'react-native';
    import {useBackHandler, useAppState, useDetectDevice, useScale, useDeviceOrientation} from 'react-native-utils-toolkit';
    
    const {scale, fontScale} = useScale;
    const {
        deviceInch,
        hasNotch,
        height,
        width,
        isAndroid,
        isIOS,
        isSmallDevice,
        isTablet,
    } = useDetectDevice;

    const App = () => {
        const deviceOrientation = useDeviceOrientation();
        console.log('deviceOrientation', deviceOrientation); // PORTRAIT or LANDSCAPE

        useBackHandler(() => {
            console.log('On goback');
        }, []);

        useAppState(state => {
            console.log('App State', state);
        }, []);
        
        return (
            <ScrollView>
                <SafeAreaView style={styles.container}>
                    <Text style={styles.fontScale}>Device width: {width}</Text>
                    <Text style={styles.fontScale}>Device height: {height}</Text>
                    <Text style={styles.fontScale}>Device inch: {deviceInch}</Text>
                    <Text style={styles.fontScale}>isAndroid: {isAndroid.toString()}</Text>
                    <Text style={styles.fontScale}>isIOS: {isIOS.toString()}</Text>
                    <Text style={styles.fontScale}>hasNotch: {hasNotch.toString()}</Text>
                    <Text style={styles.fontScale}>isTablet: {isTablet.toString()}</Text>
                    <Text style={styles.fontScale}>isSmallDevice: {isSmallDevice.toString()}</Text>
                    <View style={styles.box}>
                        <Text style={[styles.color, {fontSize: fontScale(14)}]}>150x150</Text>
                        <Text style={[styles.color, {fontSize: fontScale(14)}]}>
                            Scale: {scale(150)}x{scale(150)}
                        </Text>
                    </View>
                </SafeAreaView>
            </ScrollView>
        );
    };

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
        },
        fontScale: {
            fontSize: fontScale(16),
        },
        box: {
            width: scale(150),
            height: scale(150),
            backgroundColor: 'black',
            alignItems: 'center',
            justifyContent: 'center',
            margin: scale(16),
        },
        color: {
            color: 'white',
        },
    });

    export default App;