react-native-2-side-menus
react-native-2-side-menus copied to clipboard
The 2 Side Menus
React-Native-2-Side-Menus
Imagine having react-native-side-menu
component with 2 side menus.
Demo
installation
npm install react-native-2-side-menus
Usage Example
create a main component and pass your left and right components
class Example1 extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.refs.menu.moreLifeCycles(this.refs.leftMenu, this.refs.rightMenu);
setTimeout(() => {
this.refs.menu.openMenu('left');
setTimeout(() => {
this.refs.menu.closeMenu();
}, 2000);
}, 2000);
}
render() {
return (
<TwoSideMenus
ref="menu"
leftMenu={<Menu ref="leftMenu" color="yellow"/>}
rightMenu={<Menu ref="rightMenu" color="red"/>}>
<ScrollView style={{ flex: 1, backgroundColor: 'blue' }}><View style={{ height: 2000 }}></View></ScrollView>
</TwoSideMenus>
);
}
}
Ref Methods
-
openMenu(side)
side can be eitherleft
orright
-
closeMenu()
closes either left or right menu if they are open. There will be no operation if none of them are opened. -
moreLifeCycles(leftMenuRef, rightMenuRef)
if you need this components callsmenuMightOpen
,menuDidOpen
andmenuDidClose
in menu component, call this method in bothcomponentDidMount
andcomponentWillReceiveProps
component. -
enableMenu(side, enable)
enables or disables the menu that you selected.enable
value indicates the action.
Props
- toleranceX: (number) X axis tolerance
- toleranceY: (number) Y axis tolerance
- animationStyle: (func)
- animationFunction: (func)
- gestures: (bool or func)
- leftMenu: (element) left menu component
- rightMenu: (element) right menu component
- openLeftMenuOffset: (number)
- openRightMenuOffset: (number)
- leftMenuToggleOffset: (number)
- rightMenuToggleOffset: (number)
- touchToClose: (bool) Allows for touching the partially hidden view to close the menu
Braking changes
- v0.2.x
- there will be no more
toggleMenu
. i found no use for that.
- there will be no more
Thanks
Thanks for amazing code and contributors for react-native-side-menu
and special thanks to @Kureev for his work on react-native-side-menu