Customizable side menu for react-native
Content
Installation
npm install react-native-side-menu --save
Usage example
const SideMenu = ; Component { return <View style=stylescontainer> <Text style=styleswelcome> Welcome to React Native! </Text> <Text style=stylesinstructions> To get started edit indexiosjs </Text> <Text style=stylesinstructions> Press Cmd+R to reload'\n' Cmd+Control+Z for dev menu </Text> </View> ; } Component { const menu = <Menu navigator=navigator/>; return <SideMenu menu=menu> <ContentView/> </SideMenu> ; }
Component props
menu
(React.Component) - Menu componentisOpen
(Boolean) - Props driven control over menu open stateopenMenuOffset
(Number) - Content view left margin if menu is opened, defaults to 2/3 of device screen widthhiddenMenuOffset
(Number) - Content view left margin if menu is hiddenedgeHitWidth
(Number) - Edge distance on content view to open side menu, defaults to 60toleranceX
(Number) - X axis tolerancetoleranceY
(Number) - Y axis tolerancedisableGestures
(Bool) - Disable whether the menu can be opened with gestures or notonStartShouldSetResponderCapture
(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 detailsonChange
(Function) - Callback on menu open/close. Is passedisOpen
as an argumentonMove
(Function) - Callback on menu move. Is passedleft
as an argumentmenuPosition
(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 animatevalue
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