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;