# @stanislav7766/rn-menu-drawer > menu drawer component for react-native Latest version **1.1.0** (published 2020-12-23) · MIT license · 0 weekly downloads ## Install ```sh npm install @stanislav7766/rn-menu-drawer pnpm add @stanislav7766/rn-menu-drawer yarn add @stanislav7766/rn-menu-drawer bun add @stanislav7766/rn-menu-drawer ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.0 | | Published | 2020-12-23 | | First published | 2020-12-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 58.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | stanislav7766 | | Maintainers | stanislav7766 | | Keywords | react-native, react-component, drawer, side-menu, rn-drawer, rn-menu-drawer, menu, menu-drawer, ios, android | ## Links - npm: https://www.npmjs.com/package/@stanislav7766/rn-menu-drawer - Repository: https://github.com/stanislav7766/rn-menu-drawer - Issues: https://github.com/stanislav7766/rn-menu-drawer/issues - npm.io page: https://npm.io/package/@stanislav7766/rn-menu-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 - 1.1.0 (latest) — 2020-12-23 - 1.0.9 — 2020-12-23 - 1.0.8 — 2020-12-22 - 1.0.7 — 2020-12-21 ## README

React Native Menu Drawer Component

Easy way to present menu side to your app

Attention: before use component see examples and read spec!!



A little bit about implementation.
The component implemented with React Native's PanResponder, Animated.
Depends on external bool(prop - 'open') and cb(prop - 'onShowMenu'). So, added hook for ease of use.(Also, you can write own hook)
Don't worry about scrolling in your app. When 'moving state' detected - applied special mask layer for children(zIndex, pointerEvents).
As a result, no need disabling 'scrollEnabled' prop in your ScrollView, FlatList etc.


- [

Installation

](#h2installationh2) - [

Examples

](#h2examplesh2) - [

Video

](#h2video-usageh2) - [

Props

](#h2propsh2) ##

Installation:


`npm install --save @stanislav7766/rn-menu-drawer`
or
`yarn add @stanislav7766/rn-menu-drawer`

##

Examples:


MenuDrawer usage:

```javascript // body of your component ... // impelementing MenuContent, YourScreen ... const [showMenu, setShowMenu] = useState(false); ... const ScreenWithMenu = ( {YourScreen} ); ... // return return {ScreenWithMenu}; ```

useMenuDrawer(default params) usage:

```javascript // body of your component ... // impelementing MenuContent, YourScreen ... const [ScreenWithMenu] = useMenuDrawer({ MenuContent, children: YourApp, }); ... // return return {ScreenWithMenu}; ```

useMenuDrawer usage:

```javascript // body of your component ... // impelementing MenuContent, YourScreen ... const [ScreenWithMenu, onShowMenu, onHideMenu] = useMenuDrawer({ opacity: 0.35, backgroundColor: '#000', drawerWidth: 300, animationTime: 250, tapToClose: true, paddingGesture: 50, position: 'left', MenuContent, children: YourApp, }); ... //calling onShowMenu, onHideMenu for managing menu side. For example, onPress ... // return return {ScreenWithMenu}; ```

##

Video usage:


see video

##

Props:


MenuDrawer Props:

| Prop | Type | Required | Default Value | Desciption | | ----------------- | ----------------------- | -------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | open | boolean | true | - | If true, shows menu side otherwise hides | | onShowMenu | (show: boolean) => void | true | - | Need for manage open prop | | tapToClose | boolean | true | - | If true, single tap outside of menu area - hides menu otherwise notihing happened | | position | 'left', 'right' | true | - | Set menu position on screen | | paddingGesture | number | true | - | Define area for hand gesture to show menu | | drawerWidth | number | true | - | Set menu width on screen | | allowedSwipeWidth | number | false | width_screen\*0.5 | Set width of hand swipe that manages menu side. If real swipe's width >= 'your_value', menu side will be opened\hidden otherwise will be returned to it's original | | animationTime | number | true | - | Set animation time on show\hide menu side | | opacity | number | true | - | Set max opacity value to children's mask. Opacity will be dynamically changed from 0 to 'your_value' on 'moving state'. Use range 0..1 | | backgroundColor | string | true | - | Set background color to children's mask. Background color will be applied to mask on 'moving state' only. Use hex or rgb colors | | MenuContent | JSX.Element | true | - | It's your component that will be rendered on menu side | | children | React.ReactNode | true | - | It's your app\screen component that will be wrapped by MenuDrawer |

useMenuDrawer params:

| param | Type | Required | Default Value | | ----------------- | --------------- | -------- | ----------------- | | tapToClose | boolean | false | true | | position | 'left', 'right' | false | 'right' | | paddingGesture | number | false | 50 | | drawerWidth | number | false | width_screen\*0.7 | | allowedSwipeWidth | number | false | width_screen\*0.5 | | animationTime | number | false | 250 | | opacity | number | false | 0.35 | | backgroundColor | string | false | '#000' | | MenuContent | JSX.Element | true | - | | children | React.ReactNode | true | - | --- _Source: https://npm.io/package/@stanislav7766/rn-menu-drawer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._