# react-native-side-drawer

> Simple & lightweight side menu drawer

Latest version **2.1.0** (published 2022-11-08) · MIT license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2022-11-08 |
| First published | 2019-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 90 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 54 |
| Author | Pedre Viljoen |
| Maintainers | pedreviljoen |
| Keywords | react-native, side menu, menu, drawer, drawer component |

## Links

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

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) 15.8.1

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

- 2.1.0 (latest) — 2022-11-08
- 2.0.0 — 2022-02-27
- 1.2.9 — 2021-08-27
- 1.2.8 — 2020-07-23
- 1.2.7 — 2020-07-23
- 1.2.6 — 2020-04-05
- 1.2.5 — 2019-10-10
- 1.2.4 — 2019-10-10
- 1.2.3 — 2019-10-07
- 1.2.1 — 2019-10-03
- 1.2.0 — 2019-09-27
- 1.1.12 — 2019-09-27
- 1.1.11 — 2019-08-18
- 1.1.9 — 2019-07-18
- 1.1.8 — 2019-07-18
- … 16 more at https://npm.io/package/react-native-side-drawer/versions

## README

# react-native-side-drawer

The following is taken from [App.js in the example dir](/example/)
(blue is the safe area, which would need to be configured as seen in the example - taken on iPhone 13)

<div align="center">
	<img src="./assets/OverlayLeft.gif" alt="Item" height="450px">
</div>

## Status

[![Package version](https://img.shields.io/npm/v/react-native-side-drawer.svg?style=flat-square)](https://npmjs.org/package/react-native-side-drawer)
[![Make a pull request](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![License](https://img.shields.io/npm/l/react-native-side-drawer.svg?style=flat-square)](https://github.com/pedreviljoen/react-native-menu/blob/master/LICENSE) 
[![npm downloads](https://img.shields.io/npm/dm/react-native-side-drawer.svg?style=flat-square)](https://npmjs.org/package/react-native-side-drawer)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![CircleCI](https://circleci.com/gh/pedreviljoen/react-native-menu/tree/master.svg?style=svg)](https://circleci.com/gh/pedreviljoen/react-native-menu/tree/master)
[![Greenkeeper badge](https://badges.greenkeeper.io/pedreviljoen/react-native-menu.svg)](https://greenkeeper.io/)
[![Known Vulnerabilities](https://snyk.io//test/github/pedreviljoen/react-native-menu/badge.svg?targetFile=package.json)](https://snyk.io//test/github/pedreviljoen/react-native-menu?targetFile=package.json)
[![CodeFactor](https://www.codefactor.io/repository/github/pedreviljoen/react-native-menu/badge)](https://www.codefactor.io/repository/github/pedreviljoen/react-native-menu)

[![Package Quality](https://npm.packagequality.com/badge/react-native-side-drawer.png)](https://packagequality.com/#?package=react-native-side-drawer)

> Simple & lightweight side menu drawer.

## Contents

  - [Contents](#contents)
  - [Install](#install)
  - [Usage](#usage)
  - [Props](#props)
  - [Contribute](CONTRIBUTING.md)
  - [License](#license)

## Install

```sh
yarn add react-native-side-drawer
```

OR

```sh
npm install react-native-side-drawer
```

## Usage

**The below is a simple snippet of usage.  It is recommended to use this library in conjunction with safe-area-context-view see [React advise on this as well](https://reactnavigation.org/docs/handling-safe-area/).**

For a (near) full example used with SafeAreaContextView please go to the example:
[App example with SafeAreaContextView](/example/App.js)

```javascript
import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import MenuDrawer from 'react-native-side-drawer'

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  toggleOpen = () => {
    this.setState({ open: !this.state.open });
  };

  drawerContent = () => {
    return (
      <TouchableOpacity onPress={this.toggleOpen} style={styles.animatedBox}>
        <Text>Close</Text>
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <MenuDrawer
          open={this.state.open}
          position={'left'}
          drawerContent={this.drawerContent()}
          drawerPercentage={45}
          animationTime={250}
          overlay={true}
          opacity={0.4}
        >
          <TouchableOpacity onPress={this.toggleOpen} style={styles.body}>
            <Text>Open</Text>
          </TouchableOpacity>
        </MenuDrawer>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 30,
    zIndex: 0
  },
  animatedBox: {
    flex: 1,
    backgroundColor: "#38C8EC",
    padding: 10
  },
  body: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F04812'
  }
})
```

## Props

<table width="80%">
    <tr>
        <th>Property</th>
        <th>Description</th> 
        <th>Type</th>
        <th>Default Value</th>
    </tr>
    <tr>
        <td><code>open</code></td>
        <td>Value toggling open and close of drawer</td> 
        <td><code>Boolean</code></td>
        <td><code>false (closed)</code></td>
    </tr>
    <tr>
        <td><code>drawerContent</code></td>
        <td>Drawer contents</td> 
        <td><code>React.Component</code></td>
        <td><code>Text component: Close</code></td>
    </tr>
    <tr>
        <td><code>drawerPercentage</code></td>
        <td>Value between 0 - 100, depicting the percentage of the screen the drawer will open</td>
        <td><code>Integer</code></td> 
        <td><code>45</code></td>
    </tr>
    <tr>
        <td><code>animationTime</code></td>
        <td>Value depicting the time (in ms) the menu will slide open & close</td>
        <td><code>Integer</code></td> 
        <td><code>200</code></td>
    </tr>
    <tr>
        <td><code>overlay</code></td>
        <td>Value toggling menu overlay or push. When overlay is true, the menu will overlay the background screen. When overlay is false, the menu will push the background screen to the side</td> 
        <td><code>Boolean</code></td>
        <td><code>true</code></td>
    </tr>
    <tr>
        <td><code>opacity</code></td>
        <td>Value between 0-1 for the opacity fade of background when the menu is open</td> 
        <td><code>Float</code></td>
        <td><code>0.4</code></td>
    </tr>
    <tr>
        <td><code>position</code></td>
        <td>Value for the drawer to be left or right</td> 
        <td><code>String</code></td>
        <td><code>left</code></td>
    </tr>
</table>

## Coming soon

- [x] iOS SafeArea support - Works with SafeAreaContextView with minor adjustments see: [example App.js](/example/App.js)
- [x] Custom width of drawer and sliding time
- [x] Right and left drawer
- [x] Opacity fade of background screen

## License

MIT

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