# react-native-rn-drawer

> react-native-rn-drawer

Latest version **0.1.9** (published 2022-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-rn-drawer
pnpm add react-native-rn-drawer
yarn add react-native-rn-drawer
bun add react-native-rn-drawer
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2022-09-21 |
| First published | 2022-09-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 67.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | fb.bachkhanh@gmail.com |
| Maintainers | khanhbachnguyen |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/react-native-rn-drawer
- Repository: https://github.com/khanhbachnguyen/react-native-rn-drawer
- Homepage: https://github.com/khanhbachnguyen/react-native-rn-drawer#readme
- Issues: https://github.com/khanhbachnguyen/react-native-rn-drawer/issues
- npm.io page: https://npm.io/package/react-native-rn-drawer

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.1.9 (latest) — 2022-09-21
- 0.1.8 — 2022-09-20
- 0.1.6 — 2022-09-14
- 0.1.5 — 2022-09-13
- 0.1.4 — 2022-09-13
- 0.1.3 — 2022-09-12
- 0.1.1 — 2022-09-12

## README

# react-native-rn-drawer
A React Native component for free-hand drawing on both iOS and Android.
## Feature
+ Draw with your finger and export an image from it.
+ Change the stroke color and thickness of the pen easily.
+ Full-customize UI.
## Installation


```sh
npm install --save react-native-rn-drawer

yarn add react-native-rn-drawer
```

## Usage

```jsx
// ...import
import Drawer from 'react-native-rn-drawer';

export default function DrawerExample(){
    const [isAnimated, setIsAnimated] = React.useState(true);
    let drawerRef = React.useRef();
    //...
    const toggleDrawer = () => {
        if (drawerRef.current) {
          drawerRef.current.toggleDrawer();
        };
    }
    
    
    return (
        <Drawer
            // backgroundAnimation={["red", "blue"]}
            // backgroundColor= "red"
            // width={200}
            acceptPan={true}
            openDrawerOffset={12}
            useNativeDriver={false}
            isAnimated={isAnimated}
            ref={drawerRef}
          >
                // your component
        </Drawer>
    )
}


// ...

```
## :star2: Props
| **Property** | **Type** | **Require** | **Default** | **Description** |
|-------------|------|-------|--------|--------------|
| style | style |  |  | you can change the style of drawer with style property |
| isAnimated | boolean |  | true | If true active animation drawer |
| width | number |  | `window.width - 70` | Width content drawer |
| duration | number |  | 250 |  The duration of the open/close animation |
| backgroundAnimation | [string,string] |  | ["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.2)"] | Background ouside animation combined with isAnimation . attribute |
| acceptPan | boolean |  | true  | Allow for drawer pan (on touch drag). Set to false to effectively disable the drawer while still allowing programmatic control. if isAnimated attribute = false, acceptPan auto set = false |
| openDrawerOffset | `number`, `(viewport: {width: number, height: number})=> number`  |  | 20 |Can either be a integer (pixel value) or decimal (ratio of screen width).Defines the right hand margin when the drawer is open.  |
|useNativeDriver | boolean |  | false | Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.| 

## :memo: Creators 
* :four_leaf_clover:  [https://github.com/khanhbachnguyen](https://github.com/khanhbachnguyen)

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

---
_Source: https://npm.io/package/react-native-rn-drawer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._