<span class="module"><a href="https://github.com/bang9/react-native-sizable-context" title="View this project"><img src="https://img.shields.io/badge/React Native-react--native--sizable--context-black?style=flat-square&logo=react" alt="RNWrappedText" /></a></span>

<span class="npmversion"><a href="https://npmjs.org/package/react-native-sizable-context" title="View this project on NPM"><img src="https://img.shields.io/npm/v/react-native-sizable-context.svg" alt="NPM version" /></a></span>
<span class="npmdownloads"><a href="https://npmjs.org/package/react-native-sizable-context" title="View this project on NPM"><img src="https://img.shields.io/npm/dm/react-native-sizable-context.svg" alt="NPM downloads" /></a></span>

# 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<br/>

Detects screen rotation and automatically changes width and height.

![portrait](screenshots/rotate.png)
![rotate_on](screenshots/rotate_on.png)
![rotate_off](screenshots/rotate_off.png)

---

- 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 <br/>
> [Left Image] iPhone 11 (414x896) <br/>
> [Right Image] : Zeplin (360x886) <br/>
![zeplin](screenshots/zeplin_dp_pt.png)

---

- Sizing with percentage of screens




## Installation
```sh
npm install react-native-sizable-context
```

```sh
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
```jsx
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;
```

![responsive](screenshots/responsive_0.png)
![responsive](screenshots/responsive_1.png)
![responsive](screenshots/responsive_2.png)
![responsive](screenshots/responsive_3.png)
