react-native-sizable-context

Context Provider for Component and Font Sizing with various options!!

Feature

SizableProvider, SizableContext: Size helper functions for width, height, fontSize (support specific size and percentage size)

useDeviceSize: Use device width and height with rotate detection

• Rotate detection

Detects screen rotation and automatically changes width and height.

• Sizing with specific dp / pt size (Sync with Zeplin size)

You can set defaultDeviceSize prop to SizableProvider as your Zeplin board size

and just use like scaleWidth(240), scaleHeight(48), scaleFont(18) with your dp / pt unit !

It exactly matches the Zeplin design screen, and the size is responsive.

default device size is 375 x 812 (iPhone X,Xs)

[Button] 240pt x 48pt size [Left Image] iPhone 11 (414x896) [Right Image] : Zeplin (360x886)

• Sizing with percentage of screens

Installation

npm install react-native-sizable-context

yarn add react-native-sizable-context

SizableContext - support size helper functions

• All functions value is detect screen rotation

|Function |Param |Description | |:--- |:--- |:--- | |width |number |Device Width | |height |number |Device Height | |wPer |number |N% of Device Width | |hPer |number |N% of Device Height | |scaleWidth |number |Get Exactly width size (Responsive, Calculated based on size designed) | |scaleHeight |number |Get Exactly height size (Responsive, Calculated based on size designed) | |scaleFont |number |Get Exactly font size (Responsive, Calculated based on size designed) |

SizableProvider - support Props

|Prop |Type |Default |Description | |:--- |:--- |:--- |:--- | |rotate? |boolean |true |Remove screen rotate listener | |defaultDeviceSize? |{width, height} |{width:375, height:812} |Set default device size (for sync with Zeplin design) |

Example

import * as React from "react";
import { Text, View } from "react-native";
import { SizableContext, SizableProvider } from "react-native-sizable-context";
import { useContext } from "react";

function Screen() {
    const { scaleWidth, scaleFont, hPer } = useContext(SizableContext);
    return (
        <View
            style={{
                width: scaleWidth(240),
                height: scaleWidth(48),
                marginTop: hPer(70),
                backgroundColor: "#1f7eff",
                alignSelf: "center",
                alignItems: "center",
                justifyContent: "center"
            }}
        >
            <Text style={{ fontSize: scaleFont(18), color: "white" }}>DONE</Text>
        </View>
    );
}

function App() {
    return (
        <SizableProvider defaultDeviceSize={{ width: 360, height: 800 }}>
            <Screen />
        </SizableProvider>
    );
}

export default App;