customizable side menu for React Native on iOS&android.
$ npm install react-native-ezsidemenu --save
import library:
import EZSideMenu from 'react-native-ezsidemenu';
//App.js
simpleMenu() {
return <EZSideMenu
menu={this.menu()}
ref="menu">
{this.contentView()}
</EZSideMenu>
}
//App.js
advancedMenu() {
const menuWidth = DEVICE_SCREEN.width * 0.8;
const opacity = this.state.animation.interpolate({
inputRange: [0, menuWidth],
outputRange: [0, 1],
});
return <EZSideMenu
onMenuStateChaned={(isOpen) => { this.setState({ isOpen }) }}
onPanMove={(x) => { console.log('onPanMove ' + x) }}
onSliding={(x, persent) => { console.log('onSliding x ' + x + ' persent ' + persent) }}
type={EZSideMenu.type.Default}
menuStyle={styles.container}
shadowStyle={{ backgroundColor: 'rgba(20,20,20,.7)' }}
direction={EZSideMenu.direction.Right}
ref="menu"
position={this.state.animation}
width={menuWidth}
menu={this.menu(opacity)}
animationFunction={(prop, value) => Animated.spring(prop, {
friction: 10,
toValue: value
})}>
{this.contentView()}
</EZSideMenu>
}
key | type | default | description |
---|---|---|---|
menu | PropTypes.object.isRequired | menu component | |
shadowStyle | View.propTypes.style | { backgroundColor: 'rgba(0,0,0,.4)' } | the style of the menu sahdow |
menuStyle | View.propTypes.style | {} | the style of the menu |
direction | PropTypes.string | direction.Left | the direction of the menu |
type | PropTypes.string | type.Default | the animation of the menu |
position | PropTypes.object | new Animated.Value(0) | the distance of the menu |
width | PropTypes.number | DEVICE_SCREEN.width * 0.7 | the width of the menu |
animationFunction | PropTypes.func | animationFunction: (prop, value) => Animated.timing(prop, { easing: Easing.inOut(Easing.ease), duration: 300, toValue: value }), |
the animation of the menu |
panGestureEnabled | PropTypes.bool | true | the menu can be move with gestures or not |
panWidthFromEdge | PropTypes.number | 60 | edge distance on content view to open side menu |
panTolerance | PropTypes.object | { x: 6, y: 20 } | pan move tolerance |
onPanStartMove | PropTypes.func | callback on menu start move | |
onPanMove | PropTypes.func | callback on menu move | |
onPanEndMove | PropTypes.func | callback on menu end move | |
onSliding | PropTypes.func | callback on menu is sliding | |
onMenuStateChaned | PropTypes.func | callback on menu state is chaned |
function | description |
---|---|
open() | open menu |
close() | close menu |
MIT License. © Zhu Yangjun 2017