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: 16 days ago
JSON representation
Side menu component for React Native
- Host: GitHub
- URL: https://github.com/Kureev/react-native-side-menu
- Owner: Kureev
- License: mit
- Archived: true
- Created: 2015-04-04T21:29:42.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-09-04T20:19:15.000Z (about 4 years ago)
- Last Synced: 2024-05-17T07:02:26.076Z (6 months ago)
- Topics: javascript, react-native, react-native-component, side-menu
- Language: JavaScript
- Homepage:
- Size: 704 KB
- Stars: 2,214
- Watchers: 40
- Forks: 438
- Open Issues: 78
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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)