react-native-jelly-side-menu
A side menu that animates like a jelly! iOS & Android tested.
Demo Showcase (Youtube link) The video seems stuck at 2.5s when not using Chrome to watch. I will fix it when I have time.
https://www.youtube.com/watch?v=lvyJX2-l8pM
Prerequisites
React Native 0.25 or higher
Installation
npm i react-native-svg --savenpm i react-native-jelly-side-menu --savernpm link
Usage
Toggle
Open
Close
Example
{ superprops; thisitemStyle = padding: 16 backgroundColor: 'transparent'; thisitemTextStyle = color: '#000000' fontWeight: 'bold' fontSize: 20; thisrenderMenu = thisrenderMenu; } { return <TouchableOpacity onPress=onPress> <View style=thisitemStyle> <Text style=thisitemTextStyle>text</Text> </View> </TouchableOpacity> } { return <View> this this this </View> } { return <View style=flex: 1 backgroundColor: '#FF6644'> <JellySideMenu ref= {thisjsm = view} fill="#FFF" fillOpacity=10 renderMenu=thisrenderMenu> <TouchableOpacity onPress= {thisjsm}> <View style=thisitemStyle backgroundColor: '#FF7788'> <Text style=thisitemTextStyle>Open Jelly Menu</Text> </View> </TouchableOpacity> </JellySideMenu> </View> }
Milestones
✔ iOS Support @done (16-07-09 12:07)
✔ Android Support @done (16-07-09 12:07)
☐ Context control toggle support
✔ Remove unnecessary imports
☐ Add Essential control parameters support (enable/disable menu, enable/disable gesture, set default state)
☐ Add Callback support (onWillOpen(state), onDidOpen(state), onWillClose(state), onDidClose(state))
☐ Add Menu State check function (getState() => State)
☐ Add Fine tune control parameters support (thresholds of dragging, menu width, bounce tension & friction)
☐ Add Side menu docking direction support (top, left, right, bottom)
☐ Cater device orientation change
☐ Performance improvement