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"; { const scaleWidth scaleFont hPer = ; return <View = > <Text =>DONE</Text> </View> ;} { return <SizableProvider => <Screen /> </SizableProvider> ;} ;