lukebrandonfarrell/react-native-navigation-drawer-extension

Drawer API built on top of wix react-native-navigation for iOS and Android (with TypeScript!)

React Native Navigation Drawer Extension

React Native Navigation by Wix does not offer an in-built solution for displaying a drawer on iOS. Their current side-menu has limited functionality on both iOS and Android. This is a drawer solution using showOverlay under the hood to display a drawer on iOS and Android.

If you are using React Native Navigation >= 3.0.0 then use version 3.x.x + of this library.

Install

 npm install react-native-navigation-drawer-extension --save

or

 yarn add react-native-navigation-drawer-extension

Usage

You need to register your drawer component with RNN. To do this use the register method and wrap your component in the RNNDrawer HOC.

import { Navigation } from "react-native-navigation";
import { RNNDrawer } from "react-native-navigation-drawer-extension";

// register our drawer component with RNN
Navigation.registerComponent("CustomDrawer", () => RNNDrawer.create(CustomDrawer));

You can then use the drawer by calling a custom method. The showDrawer method will take a single parameter options identical to showOverlay.

import { RNNDrawer } from "react-native-navigation-drawer-extension";

RNNDrawer.showDrawer({
  component: {
    name: "CustomDrawer",
    passProps: {
      animationOpenTime: 300,
      animationCloseTime: 300,
      direction: "left",
      dismissWhenTouchOutside: true,
      fadeOpacity: 0.6,
      drawerScreenWidth: "75%" || 445, // Use relative to screen '%' or absolute
      drawerScreenHeight: "100%" || 700,
      style: { // Styles the drawer container, supports any react-native style
        backgroundColor: "red",
      },
      parentComponentId: props.componentId, // Custom prop, will be available in your custom drawer component props
    },
  }
});

RNNDrawer.dismissDrawer();

To navigate from the drawer you must pass the parent componentId and use that to navigate. e.g:

// From drawer component
Navigation.push(parentComponentId, {
  component: {
    name: "CustomScreenFromDrawer",
  },
});

There's a complete and functional example at the example folder, with more thorough explanation on each method.

Props

The props below are used to configure the drawer and are to be used in RNN passProps:. Any aditional props will be passed to your custom drawer component.

Prop	Type	Optional	Default	Description
animationOpenTime	float	Yes	300	Time in milliseconds to execute the drawer opening animation.
animationCloseTime	float	Yes	300	Time in milliseconds to execute the drawer closing animation.
direction	string	Yes	left	Direction to open the collage, one of: ["left", "right", "top", "bottom"].
dismissWhenTouchOutside	bool	Yes	true	Should the drawer be dismissed when a click is registered outside?
fadeOpacity	number	Yes	0.6	Opacity of the screen outside the drawer.
drawerScreenWidth	number/string	Yes	80%	Width of drawer on portrait orientation. Pass a string containing '%' (e.g. "80%") for setting the width in relation to the screen or a number for absolute width (e.g. 300)
drawerScreenWidthOnLandscape	number/string	Yes	30%	Width of drawer on landscape orientation. Pass a string containing '%' (e.g. "80%") for setting the width in relation to the screen or a number for absolute width (e.g. 300)
drawerScreenHeight	number/string	Yes	100%	Height of drawer. Pass a string containing '%' (e.g. "30%") for setting the height in relation to the screen or a number for absolute height (e.g. 300)
disableDragging	boolean	Yes	false	Whether you want to disable dragging of the drawer. Useful if you have ScrollView inside the drawer (addresses #62).
disableSwiping	boolean	Yes	false	Whether you want to disable swiping gesture. Use it only in pair with disableDragging.

SideMenuView

The library also exposes a component which will allow you to open the drawer by either swiping the left or right gutter of the phone. This is achieved by using event listeners to communicate with the RNNDrawer HOC component. To enable this feature wrap your screen with the SideMenuView component. <SideMenuView> is just an enhanced <View> all props are passed down to <View>.

import { SideMenuView } from "react-native-navigation-drawer-extension";

<SideMenuView
  style={{ flex: 1 }}
  drawerName={'CustomDrawer'}
  direction={'right'}
  passProps={{
    animationOpenTime: 300,
    animationCloseTime: 300,
    dismissWhenTouchOutside: true,
    fadeOpacity: 0.6,
    drawerScreenWidth: '75%',
    drawerScreenHeight: '100%',
    parentComponentId: props.componentId,
    style: {
      backgroundColor: 'white', 
    },
  }}
  options={{
    layout: {
      componentBackgroundColor: 'transparent',
    }
 >
  {...}
 </SideMenuView>

Props

Prop	Type	Optional	Default	Description
style	StyleProp	Yes		The style of the drawer container.
drawerName	string	No		The name of the drawer component.
direction	string	Yes	left	The direction to open the drawer, one of: ["left", "right"].
passProps	object	Yes		The values passed to the drawer. See props in RNNDrawer above.
options	Options	Yes		The options to configure properties of the React Native Navigation native screen. Refer to React Native Navigation's options object.
swipeSensitivity	number	Yes	0.2	The sensitivity of the swipe to invoke each function.
sideMargin	number	Yes	15	The size of the gutter for both sides.
sideMarginLeft	number	Yes		The size of the gutter for the left side.
sideMarginRight	number	Yes		The size of the gutter for the right side.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Daniil Merkulov 💻 📖

Rodrigo Vieira 💻 🐛 📖 🚧

Luke Brandon Farrell 💻 🐛 📖

CyberFuntik 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

react-native-navigation-drawer-extension's Issues

Sliding drawer

This must be a really stupid question seeing that you use showOverlay under the hood - but would it be possible for me to hack a solution using your library where I could implement a drawer that slides in from left (and pushes the main content to the right)?

Hook up to react native navigation tab?

This is more of a general question. Can this be triggered by a react native navigation bottom tab?

Right Drawer not working as intended

Thanks for this library as react-native-navigation drawers is a pain to work with.

The issue I have is that the right drawer is not working for me. The left drawer works great but I am having issues with the right drawer. I can display the content in the right drawer but dismissDrawer doesn't close the right drawer. If you can help me out that would be great.

<SideMenuView
right={() => {
RNNDrawer.showDrawer({
component: {
name: "gomedal.Notifications",
passProps: {
swipeSensitivity: .7,
animationOpenTime: 300,
animationCloseTime: 300,
direction: "left",
dismissWhenTouchOutside: true,
drawerScreenWidth: "85%" || 445, // Use relative to screen '%' or absolute
drawerScreenHeight: "100%" || 700,
parentComponentId: 'CenterStack', // Custom prop, will be available in your custom drawer component props
}
}
})
}}
left={() => {
RNNDrawer.showDrawer({
component: {
name: "gomedal.ProfileDrawer",
passProps: {
animationOpenTime: 300,
animationCloseTime: 300,
direction: "left",
dismissWhenTouchOutside: true,
drawerScreenWidth: "85%" || 445, // Use relative to screen '%' or absolute
drawerScreenHeight: "100%" || 700,
parentComponentId: 'CenterStack', // Custom prop, will be available in your custom drawer component props
}
}
})
}}
style={{ flex: 1 }}
>

Blank background when opening drawer

When I put sideMenu on Main Screen, Main Screen is disappeared
How Can I Fix?

Help Me

drawer not open by swipe it when change app direction without restart it

i changed app direction from LTR to RTL without reopen app and try open drawer by swipe it but not open from any side

Drawer doesn't show up anymore after clicking outside

This issue happens on Android only (I'm using Android 9.0 x86). I register the drawer component and I click to open it (using a button component with showDrawer()). Drawer shows up ok. Then I click outside just to dismiss the drawer and everything is ok again. But when I click to open the drawer again, it doesn't work anymore, I mean it doesn't show up. Nothing happens, it's like the drawer is freeze or something.

Drawer height is not fully covered the screen on Android

Does anybody know how can I fix this problem? As you can see in the attached image, when I open the drawer, it's not showing up on the full screen. The top side is showing the background screen. I have been looking up to fix this problem for a long time and still couldn't find the solution. Can anyone help me to fix this problem, please? It happens only on Android. Working fine on iOS.

Drawer doesn't show when navigating back from another stack or tab

Hello, me again.

I've been playing around with 2.0.1 and I'm seeing the same behaviour as the movie I posted in #8, when I come back from another stack or tab in the navigator.

The app itself does not crash this time however - all that happens is the overlay fails to show. And the thing is, the failures are inconsistent, sometimes the overlay shows as expected!

Have you any suggestions as to where I can start debugging this? I don't want to post something with not enough information and waste everyones time.

How to disable Swiping drawer to dismiss

Hi,
I am using react-native-navigation and react-native-navigatioin-drawer-extension.

"react-native": "^0.62.2",
"react-native-navigation": "^7.0.0",
"react-native-navigation-drawer-extension": "^3.0.0",

I want to disable swiping drawer and I try to add swipeToDismiss: false to passProps and options objects. But I didn't get the result that I want. I want that because the drawer make lag and stop in screen when I swiping to dismiss. Please help me to solve this problem.

This is my code to show drawer:

RNNDrawer.showDrawer({
      component: {
        name: Screens.Menu,
        passProps: {
          animationOpenTime: 300,
          animationCloseTime: 300,
          direction: 'right',
          dismissWhenTouchOutside: true,
          fadeOpacity: 0.6,
          swipeToDismiss: false,
          parentComponentId: componentId ? componentId : Screens.Main,
        },
        options: {
          statusBar: statusBar,
        },
      },
      options: {
        swipeToDismiss: false,
      },
    });

"useNativeDriver" is required on animation of drawer as of RN 0.62

When openning & closing the drawer the React Native Animated API requires "useNativeDriver" as a required prop of true or false. Weird how they cant just default it to false on their end but its throwing a warning in the library.

Nothing breaks just a the warning that would be nice to get muted :)

PanResponder interferes with ScrollView / FlatList / SectionList scrolling on iOS Device.

We are using RNNDrawer.showDrawer which renders a section list (tried FlatList and ScrollView as well). After scrolling it once or twice the section list starts to lag on iOS device (looks kind of fine on simulator). It's just a static list of 10-15 items, no dynamic rendering.

The app is in portrait mode only and we have already disabled dragging and swiping
disableDragging: true,
disableSwiping: true,

Other props:
direction: DirectionType.left,
dismissWhenTouchOutside: true,

Commenting these lines solves the issue:

Any suggestion on how to fix this issue? Or is there a way/prop to disable the pan responder?

Performance issue.

Hi. Thank you guys for this project. I used it as a reference for writing my own bottom sheet component extension for RNN.

So i wanted to ask why you decided to use react-native default solutions for animating the drawer when there are react-native-gesture-handler and react-native-reanimated libraries that are seemingly way better in terms of performance. I myself used these libraries for making the bottom sheet component, you can check out how i implemented it here - bottom sheet.

You also were putting useNativeDriver: false throughout the code and using marginLeft for animating the drawer which is, as far as i know, damages performance.

Doesn't work well with other HOC implementations

I'm using a function to wrap my components in an emotion theme provider, and an apollo provider.

This extension only works when I don't include that function. Otherwise, it works in as much as the drawer appears. But there is no animation, and no overlay opacity, and no way to dismiss the drawer.

I have tried with only the theme provider and only the apollo provider to see if it was specific, but it appears to be affected no matter what

Navigation.registerComponent(
  'SortIntentions',
  () => UIProvider(SortIntentions),
  () => RNNDrawer.create(SortIntentions),
);

export default function UIProvider(Component) {
  return props => (
    <ThemeProvider theme={theme}>
      <ApolloProvider client={client}>
        <ApolloHooksProvider client={client}>
          <Component {...props} />
        </ApolloHooksProvider>
      </ApolloProvider>
    </ThemeProvider>
  );
}

EDIT

I found that I have to pass the return value of RNNDrawer into my own function, but it would be nice to be able to chain as I do with my other components. Just feels cleaner

Navigation.registerComponent('SortIntentions', () =>
  UIProvider(RNNDrawer.create(SortIntentions)),
);

Animation not working for top direction

Left and right are fine. But coming from the top only does a fade in.

Also, from the bottom doesn't show the component for me. Only the opacity overlay over the rest of the current screen

How to add drawer through Navigation.setRoot?

Say I have two views using a bottomTab layout setup like this;

navigation.js

import { Navigation } from 'react-native-navigation'

Navigation.setRoot({
  root: {
    bottomTabs: {
      id: 'BottomTabsId',
      children: [{
        stack: {
          id: 'Home',
          children: [{
            component: {
              name: 'Home',
              options: {
                topBar: {
                  background: {
                    component: {
                      name: 'TopBar'
                    }
                  }
                }
              }
            }
          }],
          options: {
            bottomTabs: {
              backgroundColor: Colors.sand,
              hideShadow: true
            },
            bottomTab: {
              textColor: Colors.dkBlue,
              selectedTextColor: Colors.ltBlue,
              fontFamily: 'Bigband',
              text: 'Home'
            }
          }
        }
      }, {
        stack: {
          id: 'Settings',
          children: [{
            component: {
              name: 'Settings',
              options: {
                topBar: {
                  background: {
                    component: {
                      name: 'TopBar'
                    }
                  }
                }
              }
            }
          }],
          options: {
            bottomTabs: {
              backgroundColor: Colors.sand,
              hideShadow: true
            },
            bottomTab: {
              textColor: Colors.dkBlue,
              selectedTextColor: Colors.ltBlue,
              fontFamily: 'Bigband',
              text: 'Settings'
            }
          }
        }
      }]
    }
  }
})

screens.js

import { Navigation } from 'react-native-navigation'
import { RNNDrawer } from 'react-native-navigation-drawer-extension'
import DrawerContent from './scenes/myContent/DrawerContent.js'

export function registerScreens () {
  Navigation.registerComponent(
    'Initializing',
    () => require('./scenes/Initializing').default
  )
Navigation.registerComponent(
    'DrawerContent',
    () => DrawerContent
  )
  Navigation.registerComponent(
    'Drawer',
    () => RNNDrawer.create(DrawerContent)
  )
  Navigation.registerComponent(
    'Home',
    () => require('./scenes/home/Home').default
  )
Navigation.registerComponent(
    'Settings',
    () => require('./scenes/settings/Settings').default
  )
}

How can I get my Drawer with DrawerContent to only show on the Home screen and not the Settings screen?

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Closing drawer while pushing a screen causes the drawer to disappear instead of sliding away

First of all thanks for such a useful package!

I've implemented a drawer component that has a list of touchable screen names for the user to navigate the app. Naturally, when navigating to another screen you would want the drawer to close. What happens is pushing another screen while closing the drawer causes the drawer to disappear immediately from the view instead of sliding away. And the whole feel to it isn't pleasant.

I'm using this package in an app that is soon to be launched, so I came up with a workaround that is, delaying the push action for the same amount of time that is set for the animationCloseTime prop when showing the drawer component.

I'm not sure if there's anything to do on this package's part. Please let me know if you have any ideas for a hotfix, I'm willing to help!

Getting a white screen when drawing menu

I'm using [email protected] & [email protected] the functionality works fine but I get a white screen flash and then the drawer opens with the white screen in the background

(Doesn't look good for the user)

How can i add default styling to drawer instead of styling it in every component ?

EventEmitter.removeListener('change', ...): Method has been deprecated.

There is an upstream change, where in [email protected] they deprecated the old api in favour of a more terse name, so removeListener() becomes remove().
Fix it please.

this.unsubscribeSwipeStart is not a function....

I'm using this component in my project, thank you.

I've seen quite a few of the this.unsubscribeSwipeStart is not a function.... red screens come up while I'm developing my app but they've always been after some sort of app crash so never paid much attention, thinking they were just fallout.

I think I've got a solid repro case tho. Heres a video:

At the end of the vid you'll see the burger menu being tapped. This is supposed to flick the drawer open so the user can select a logout option, which clearly doesn't happen.

Then, I touch anywhere on the emulator and I get the ol':

This is happening in debug mode on Android 6.0. I'll be able to tell you shortly if this happens in release mode.

Any suggestions as to what might be causing this?

Add Swipe to open Drawer

Hello, thanks for this cool extension, at this time it could be amazing if you can add a swipe gesture in order to open or close the drawer

[iOS] Side Menu closes when scroll fast

Hello, I have implemented the Side Menu from the right side with a FlatList inside of it and with the HOC to be able to have swipe gestures.

The problem that I'm having is that when you scroll fast, the side menu closes. Also, the FlatList is a bit laggy especially when you change scroll direction. For example when scrolling up, then scrolling down, the list gets stuck and is scrolling elements one by one for a while.

This is my default props for the Side Menu:

const defaultDrawerProps = {
  animationOpenTime: 250,
  animationCloseTime: 250,
  direction: DirectionType.right,
  dismissWhenTouchOutside: true,
  fadeOpacity: 0.6,
  drawerScreenWidth: '85%',
  drawerScreenHeight: '100%',
  disableDragging: true,
  style: {
    backgroundColor: 'white',
  },
}

I added disableDragging to true but the situation is the same.

Also, if I have both disableDragging and disableSwiping set to true, the Side Menu is not closing anymore but the laggy behaviour is still there. Sometimes, when scrolling, the elements are scrolled one by one for a while.

Note that this issue is only on iOS.

Does anybody has this issue too?

Thank you!

SlideMenuView push duplicate screen

I'm using SideMenuView and there is button in SlideMenuView, when i click button will push new screen, SlideMenu is closed, later I swipe to make the Slide Menu show and click button again. It's duplicate screen in stack, somebody give me suggestion. SORRY for my English.

SideMenuView swipe to open not working on android

Tried in simulator and device. Works on iOS.

How to Navigation.push from drawer

Hi,

I'm using your extension to handle my drawer. It works pretty well, but I have a problem when i want to push to another view from the drawer screen :

Navigation.push(this.props.componentId, {
  component: {
    name: 'example.PushedScreen',
  }
});

Any idea ?

Thanks !

Invariant Violation: Could not find "store" in either the context or props of "Connect(DrawerScreen)"

Was trying to use DrawerScreen with Redux but getting this error message

Navigation.registerComponent(DRAWER_SCREEN, () => WrappedComponent(DrawerScreen)); is working fine but
Navigation.registerComponent(DRAWER_SCREEN, () => RNNDrawer(DrawerScreen)); is not. Am I missing something?

SideMenuView Statusbar backgroundcolor and style

when open sideMenu staturbar color change to black but i want my statusbar color is '#ff5500'

Closing drawer with swipe gesture

Hey. Nice extension.

Is there any way to close the drawer with a swiping gesture, similar to the opening gesture? I attached an image to make it more clear.
If there is no implementation for this, could you give some directions? Maybe I can help with a PR

Using 'drawerScreenWidth' prop on landscape orientation

I was wondering if there was a reason for setting the drawer width to a constant when the orientation is landscape and ignoring the drawerScreenWidth prop?

this.drawerWidth = this.isLandscape()
        ? MaxWidthOnLandscapeMode // <-- This constant
        : _resolveDrawerSize(props.drawerScreenWidth, this.screenWidth);

Issue with typescript

<SideMenuView
      left={() => navigation.showMenu(componentId)}
      sideMarginLeft={responsiveWidth('10%')}
      style={{ flex: 1 }}
    >
...
</SideMenuView>

any advice?

dismissDrawerWithAnimation is not work properly after upgrade to latest wix navigation

dismissDrawerWithAnimation function does work after I update to wix navigation to 4.
When I call this function I received the following error:

YellowBox.js:71 Possible Unhandled Promise Rejection (id: 0):
Error: Could not dismiss Overlay. Overlay with id Component34 was not found.
Error: Could not dismiss Overlay. Overlay with id Component34 was not found.
at Object.fn [as dismissOverlay] (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:3862:36)
at NativeCommandsSender.dismissOverlay (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:3017:42)
at Commands.dismissOverlay (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:97738:48)
at NavigationRoot.dismissOverlay (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2863:30)
at http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:364577:47
at http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:55452:23
at TimingAnimation.__debouncedOnEnd (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:58560:18)
at TimingAnimation.stop (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:59040:14)
at AnimatedValue.stopAnimation (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:55409:44)
at AnimatedValue.__detach (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:55352:14)

it come from here:

  dismissDrawerWithAnimation() {
       const { direction } = this.props;
       const closeValues = {
         left: -this.drawerWidth,
         right: this.screenWidth,
         top: -this.drawerHeight,
         bottom: this.screenHeight
       };
 
       // Animate side menu close
       Animated.timing(this.state.sideMenuOpenValue, {
         toValue: closeValues[direction],
         duration: this.props.animationCloseTime
       }).start(() => {
         Navigation.dismissOverlay(this.props.componentId);//This is a problematic line
       });
 
       // Animate outside side menu opacity
       Animated.timing(this.state.sideMenuOverlayOpacity, {
         toValue: 0,
         duration: this.props.animationCloseTime
       }).start();
     }
   }

Orientation supports

I faced an issue which side menu didn't rotate when device rotated.
The main screen already rotated as I enabled it via layout. But side menu isn't.

layout: {
     orientation: ['portrait', 'landscape']
}

I already tried to pass layout orientation options in show function, but it's not working.

Can this use stack navigation inside the drawer side menu?

I need to use stack navigation inside drawer side menu to change the menu content dynamically. is it possible?