<commit_before>## 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)
- [Special thanks](#special-thanks)
- [Questions?](#questions)

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

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

var ContentView = React.createClass({
  render: function() {
    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>
    );
  }
});

var Application = React.createClass({
  render: function() {
    var menu = <Menu navigator={navigator}/>;

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

Clicking on any menu item should cause closing menu. It can be done by using `menuActions` which are passed thru props to `menu` component. Example looks like this:

```javascript
var Menu = React.createClass({
  about: function() {
    this.props.menuActions.close();
    this.props.navigator.push({...});
  },

  render: function() {
    return (
      <View>
        <Text>Menu</Text>
        <Text onPress={this.about}>About</Text>
      </View>
    );
  }
});
```

`menuActions` consists of following method(s):
- `close` (Void) - Close menu
- `toggle` (Void) - Toggle menu (close / open)
- `open` (Void) - Open menu

### Component props
- `menu` (React.Component) - Menu component
- `animation` (spring|linear|easeInOut) - Type of slide animation. Default is "linear".
- `openMenuOffset` (Number) - Content view left margin if menu is opened
- `hiddenMenuOffset` (Number) - Content view left margin if menu is hidden
- `toleranceX` (Number) - X axis tolerance
- `toleranceY` (Number) - Y axis tolerance
- `disableGestures` (Bool) - Disable whether the menu can be opened with gestures or not
- `onChange` (Function) - Callback on menu open/close. Is passed `isOpen` as an argument.
- `menuPosition` (String) - either 'left' or 'right', defaults to 'left'
- `touchToClose` (Bool) - Allows for touching the partially hidden view to close the menu. Defaults to `false`.

*In progress*

### Special thanks
Creating this component has been inspired by [@khanghoang](https://github.com/khanghoang)'s [RNSideMenu](https://github.com/khanghoang/RNSideMenu) example.

Also, thanks to [@ericvicenti](https://github.com/ericvicenti) for help with figuring out with `setNativeProps`

### 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)<commit_msg>Align documentation with current codebase<commit_after>## 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)
- [Special thanks](#special-thanks)
- [Questions?](#questions)

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

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

var ContentView = React.createClass({
  render: function() {
    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>
    );
  }
});

var Application = React.createClass({
  render: function() {
    var menu = <Menu navigator={navigator}/>;

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

Clicking on any menu item should cause closing menu. It can be done by using `menuActions` which are passed thru props to `menu` component. Example looks like this:

```javascript
var Menu = React.createClass({
  about: function() {
    this.props.menuActions.close();
    this.props.navigator.push({...});
  },

  render: function() {
    return (
      <View>
        <Text>Menu</Text>
        <Text onPress={this.about}>About</Text>
      </View>
    );
  }
});
```

`menuActions` consists of following method(s):
- `close` (Void) - Close menu
- `toggle` (Void) - Toggle menu (close / open)
- `open` (Void) - Open menu

### Component props
- `menu` (React.Component) - Menu component
- `openMenuOffset` (Number) - Content view left margin if menu is opened
- `hiddenMenuOffset` (Number) - Content view left margin if menu is hidden
- `toleranceX` (Number) - X axis tolerance
- `toleranceY` (Number) - Y axis tolerance
- `disableGestures` (Bool) - Disable whether the menu can be opened with gestures or not
- `onChange` (Function) - Callback on menu open/close. Is passed `isOpen` as an argument
- `menuPosition` (String) - either 'left' or 'right', defaults to 'left'
- `animationFunction` (Function) - Function that accept 2 arguments (prop, value):
  - `prop` you should use at the place you specify parameter to animate;
  - `value` you should use to specify the final value of `prop`;
- `touchToClose` (Bool) - Allows for touching the partially hidden view to close the menu. Defaults to `false`.

*In progress*

### Special thanks
Creating this component has been inspired by [@khanghoang](https://github.com/khanghoang)'s [RNSideMenu](https://github.com/khanghoang/RNSideMenu) example.

Also, thanks to [@ericvicenti](https://github.com/ericvicenti) for help with figuring out with `setNativeProps`

### 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)
{'fraction_non_alphanumeric': 0.14450210833603633, 'fraction_numerical': 0.0017839766461239053, 'mean_word_length': 3.452707581227437, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 45, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6998470', 'n_tokens_mistral': 1936, 'n_tokens_neox': 1860, 'n_words': 578}