Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Kureev/react-native-side-menu

Side menu component for React Native
https://github.com/Kureev/react-native-side-menu

javascript react-native react-native-component side-menu

Last synced: 2 months ago
JSON representation

Side menu component for React Native

Lists

README 

        
## Customizable side menu for react-native



| iOS | android |

| --- | --- |

|   |   |



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

import SideMenu from 'react-native-side-menu'



class ContentView extends React.Component {

  render() {

    return (

      

        

          Welcome to React Native!

        

        

          To get started, edit index.ios.js

        

        

          Press Cmd+R to reload,{'\n'}

          Cmd+Control+Z for dev menu

        

      

    );

  }

}



class Application extends React.Component {

  render() {

    const menu = ;



    return (

      

        

      

    );

  }

}

```



### 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 
 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: 
 - `prop` you should use at the place you specify parameter to animate 
 - `value` you should use to specify the final value of prop |

| onAnimationComplete | none | (Function -> Void) | Function that accept 1 optional argument (event): 
 - `event` you should this to capture the animation event after the animation has successfully completed |

| animationStyle | none | (Function -> Object) | Function that accept 1 argument (value) and return an object: 
 - `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.



#### The swipe animation is extremely slow



Try disabling remote JS debugging (from developer menu on phone/VD)



#### My SideMenu contents are visible even when the side menu is hidden



Ensure that your main view has a background color applied



```



```

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