You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Sep 13, 2020. It is now read-only.
importSideMenufrom'react-native-side-menu'classContentViewextendsReact.Component{render(){return(<Viewstyle={styles.container}><Textstyle={styles.welcome}>
Welcome to React Native!
</Text><Textstyle={styles.instructions}>
To get started, edit index.ios.js
</Text><Textstyle={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
</Text></View>);}}classApplicationextendsReact.Component{render(){constmenu=<Menunavigator={navigator}/>;return(<SideMenumenu={menu}><ContentView/></SideMenu>);}}
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
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