# react-native-side-menu

> Simple customizable component to create side menu

Latest version **1.1.3** (published 2017-09-09) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2017-09-09 |
| First published | 2015-04-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-native-side-menu) |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2200 |
| Author | Alexey Kureev |
| Maintainers | kureev |
| Keywords | react-native, react-component, ios, sidebar |

## Links

- npm: https://www.npmjs.com/package/react-native-side-menu
- Repository: https://github.com/react-native-community/react-native-side-menu
- Issues: https://github.com/react-native-community/react-native-side-menu/issues
- npm.io page: https://npm.io/package/react-native-side-menu

## Dependencies (1)

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

## 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.3 (latest) — 2017-09-09
- 1.1.2 — 2017-09-09
- 1.1.1 — 2017-09-09
- 1.1.0 — 2017-09-01
- 1.0.2 — 2017-07-16
- 1.0.0 — 2017-07-15
- 0.20.3 — 2017-06-26
- 0.20.1 — 2016-09-23
- 0.20.0 — 2016-07-28
- 0.19.0 — 2016-05-13
- 0.18.1 — 2016-04-25
- 0.18.0 — 2016-01-11
- 0.17.2 — 2015-12-29
- 0.17.1 — 2015-12-29
- 0.17.0 — 2015-12-21
- … 48 more at https://npm.io/package/react-native-side-menu/versions

## README

## Customizable side menu for react-native
<p align="center">
  <img src ="http://oi61.tinypic.com/2n9l2dz.jpg" />
</p>

### Content
- [Installation](#installation)
- [Usage example](#usage-example)
- [Component props](#component-props)
- [Questions?](#questions)

### Installation
```bash
npm install react-native-side-menu --save
```

### Usage example
```javascript
const SideMenu = require('react-native-side-menu');

class ContentView extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+Control+Z for dev menu
        </Text>
      </View>
    );
  }
}

class Application extends React.Component {
  render() {
    const menu = <Menu navigator={navigator}/>;

    return (
      <SideMenu menu={menu}>
        <ContentView/>
      </SideMenu>
    );
  }
}
```

### Component props

| prop | default | type | description |
| ---- | ---- | ----| ---- |
| menu | inherited | React.Component | Menu component |
| isOpen |false | Boolean | Props driven control over menu open state |
| openMenuOffset | 2/3 of device screen width | Number | Content view left margin if menu is opened |
| hiddenMenuOffset | none | Number | Content view left margin if menu is hidden |
| edgeHitWidth | none | Number | Edge distance on content view to open side menu, defaults to 60 |
| toleranceX | none | Number | X axis tolerance |
| toleranceY | none | Number | Y axis tolerance |
| disableGestures | false | Bool | Disable whether the menu can be opened with gestures or not |
| onStartShould <br /> SetResponderCapture | none | Function | Function that accepts event as an argument and specify if side-menu should react on the touch or not. Check https://facebook.github.io/react-native/docs/gesture-responder-system.html for more details |
| onChange | none | Function | Callback on menu open/close. Is passed isOpen as an argument |
| onMove | none | Function | Callback on menu move. Is passed left as an argument |
| onSliding | none | Function | Callback when menu is sliding. It returns a decimal from 0 to 1 which represents the percentage of menu offset between hiddenMenuOffset and openMenuOffset.|
| menuPosition | left | String | either 'left' or 'right' |
| animationFunction | none | (Function -> Object) | Function that accept 2 arguments (prop, value) and return an object: <br /> - `prop` you should use at the place you specify parameter to animate <br /> - `value` you should use to specify the final value of prop |
| animationStyle | none | (Function -> Object) | Function that accept 1 argument (value) and return an object: <br /> - `value` you should use at the place you need current value of animated parameter (left offset of content view) |
| bounceBackOnOverdraw | true | boolean | when true, content view will bounce back to openMenuOffset when dragged further |
| autoClosing | true | boolean | When true, menu close automatically as soon as an event occurs |

### FAQ

#### ScrollView does not scroll to top on status bar press

On iPhone, the scroll-to-top gesture has no effect if there is more than one scroll view on-screen that has scrollsToTop set to true. Since it defaults to `true` in ReactNative, you have to set `scrollsToTop={false}` on your ScrollView inside `Menu` component in order to get it working as desired.

### Questions?
Feel free to contact me in [twitter](https://twitter.com/kureevalexey) or [create an issue](https://github.com/Kureev/react-native-side-menu/issues/new)

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