Customizable side menu for react-native
Content
Installation
npm install react-native-side-menu --save
Usage example
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
-
menu
(React.Component) - Menu component -
isOpen
(Boolean) - Props driven control over menu open state -
openMenuOffset
(Number) - Content view left margin if menu is opened, defaults to 2/3 of device screen width -
hiddenMenuOffset
(Number) - Content view left margin if menu is hidden -
edgeHitWidth
(Number) - Edge distance on content view to open side menu, defaults to 60 -
toleranceX
(Number) - X axis tolerance -
toleranceY
(Number) - Y axis tolerance -
disableGestures
(Bool) - Disable whether the menu can be opened with gestures or not -
onStartShouldSetResponderCapture
(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
(Function) - Callback on menu open/close. Is passedisOpen
as an argument -
onMove
(Function) - Callback on menu move. Is passedleft
as an argument -
menuPosition
(String) - either 'left' or 'right', defaults to 'left' -
animationFunction
(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 ofprop
-
-
animationStyle
(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
- when true, content view will bounce back toopenMenuOffset
when dragged further, defaults to true
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 or create an issue