React Native Menu Drawer Component
Easy way to present menu side to your app
Attention: before use component see examples and read spec!!
A little bit about implementation.
The component implemented with React Native's PanResponder, Animated.
Depends on external bool(prop - 'open') and cb(prop - 'onShowMenu'). So, added hook for ease of use.(Also, you can write own hook)
Don't worry about scrolling in your app. When 'moving state' detected - applied special mask layer for children(zIndex, pointerEvents).
As a result, no need disabling 'scrollEnabled' prop in your ScrollView, FlatList etc.
The component implemented with React Native's PanResponder, Animated.
Depends on external bool(prop - 'open') and cb(prop - 'onShowMenu'). So, added hook for ease of use.(Also, you can write own hook)
Don't worry about scrolling in your app. When 'moving state' detected - applied special mask layer for children(zIndex, pointerEvents).
As a result, no need disabling 'scrollEnabled' prop in your ScrollView, FlatList etc.
Installation:
npm install --save @stanislav7766/rn-menu-drawer
or
yarn add @stanislav7766/rn-menu-drawer
Examples:
MenuDrawer usage:
// body of your component
...
// impelementing MenuContent, YourScreen
...
const [showMenu, setShowMenu] = useState(false);
...
const ScreenWithMenu = (
<MenuDrawer
open={showMenu}
onShowMenu={setShowMenu}
opacity={0.35}
backgroundColor='#000'
drawerWidth={300}
animationTime={250}
allowedSwipeWidth={200}
tapToClose
paddingGesture={50}
position="right"
MenuContent={SomeMenuContent}>
{YourScreen}
</MenuDrawer>
);
...
// return
return {ScreenWithMenu};
useMenuDrawer(default params) usage:
// body of your component
...
// impelementing MenuContent, YourScreen
...
const [ScreenWithMenu] = useMenuDrawer({
MenuContent,
children: YourApp,
});
...
// return
return {ScreenWithMenu};
useMenuDrawer usage:
// body of your component
...
// impelementing MenuContent, YourScreen
...
const [ScreenWithMenu, onShowMenu, onHideMenu] = useMenuDrawer({
opacity: 0.35,
backgroundColor: '#000',
drawerWidth: 300,
animationTime: 250,
tapToClose: true,
paddingGesture: 50,
position: 'left',
MenuContent,
children: YourApp,
});
...
//calling onShowMenu, onHideMenu for managing menu side. For example, onPress
...
// return
return {ScreenWithMenu};
Video usage:
Props:
MenuDrawer Props:
Prop | Type | Required | Default Value | Desciption |
---|---|---|---|---|
open | boolean | true | - | If true, shows menu side otherwise hides |
onShowMenu | (show: boolean) => void | true | - | Need for manage open prop |
tapToClose | boolean | true | - | If true, single tap outside of menu area - hides menu otherwise notihing happened |
position | 'left', 'right' | true | - | Set menu position on screen |
paddingGesture | number | true | - | Define area for hand gesture to show menu |
drawerWidth | number | true | - | Set menu width on screen |
allowedSwipeWidth | number | false | width_screen*0.5 | Set width of hand swipe that manages menu side. If real swipe's width >= 'your_value', menu side will be opened\hidden otherwise will be returned to it's original |
animationTime | number | true | - | Set animation time on show\hide menu side |
opacity | number | true | - | Set max opacity value to children's mask. Opacity will be dynamically changed from 0 to 'your_value' on 'moving state'. Use range 0..1 |
backgroundColor | string | true | - | Set background color to children's mask. Background color will be applied to mask on 'moving state' only. Use hex or rgb colors |
MenuContent | JSX.Element | true | - | It's your component that will be rendered on menu side |
children | React.ReactNode | true | - | It's your app\screen component that will be wrapped by MenuDrawer |
useMenuDrawer params:
param | Type | Required | Default Value |
---|---|---|---|
tapToClose | boolean | false | true |
position | 'left', 'right' | false | 'right' |
paddingGesture | number | false | 50 |
drawerWidth | number | false | width_screen*0.7 |
allowedSwipeWidth | number | false | width_screen*0.5 |
animationTime | number | false | 250 |
opacity | number | false | 0.35 |
backgroundColor | string | false | '#000' |
MenuContent | JSX.Element | true | - |
children | React.ReactNode | true | - |