react-native-sizable-context v0.0.1

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

SizableProvider - support Props

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;