• Installation
• Examples
• Video
• Props

Installation:

npm install --save @stanislav7766/rn-menu-drawer

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:

see video

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 | - |