tinysymphony / react-native-drawer-menu

A drawer component for React Native Application.

react-native-drawer-menu

A drawer component for React Native Application (ios / android)

Similar to drawer menu component of QQ mobile.

Examples

iOS Platform

Android Platform

Usage

SUGGESTION In iOS, the drawer menu component should only be used in the top level route, because the action that swipes from left side of the screen to right is designed to pop route from navigate stack. You are supposed to avoid the conflict of the UI interactions. At least, don't use the Left drawer menu to wrap sub routes, use Right drawer menu if it's needed.

install from npm

npm install --save react-native-drawer-menu

import in project

import Drawer from 'react-native-drawer-menu';
import {Easing} from 'react-native'; // Customize easing function (Optional)

// in render function
render() {
  // prepare your drawer content
  var drawerContent = (<View style={styles.drawerContent}>
    <View style={styles.leftTop}/>
    <View style={styles.leftBottom}>
      <View><Text>Drawer Content</Text></View>
    </View>
  </View>);
  // customize drawer's style (Optional)
  var customStyles = {
    drawer: {
      shadowColor: '#000',
      shadowOpacity: 0.4,
      shadowRadius: 10
    },
    mask: {}, // style of mask if it is enabled
    main: {} // style of main board
  };
  return (
    <Drawer
      style={styles.container}
      drawerWidth={300}
      drawerContent={drawerContent}
      type={Drawer.types.Overlay}
      customStyles={{drawer: styles.drawer}}
      drawerPosition={Drawer.positions.Right}
      onDrawerOpen={() => {console.log('Drawer is opened');}}
      onDrawerClose={() => {console.log('Drawer is closed')}}
      easingFunc={Easing.ease}
    >
      <View style={styles.content}>
        <Text>{Object.values(Drawer.positions).join(' ')}</Text>
        <Text>{Object.values(Drawer.types).join(' ')}</Text>
      </View>
    </Drawer>
  );
}

Notice: The reference of the drawer is passed to drawer content element, you could use this.props.drawer to invoke Drawer's instance methods like this.props.drawer.closeDrawer()

Properties

Property	Type	Default	Description
disabled	Bool	false	Disable the component or not.
leftDisabled	Bool	false	Disable left drawer or not.
rightDisabled	Bool	false	Disable right drawer or not.
type	String	‘default'	Type of the drawer. default / overlay You can also use static value Drawer.types.Default / Drawer.types.Overlay.
drawerPosition	String	‘left'	Determine where does the drawer come out. left / right / both You can also use static value Drawer.positions.Left / Drawer.positions.Right / Drawer.positions.Both.
drawerWidth	Number	200	The width of drawer, it’s disabled when use replace type.
drawerContent	React Component	null	The content of the drawer menu, default is left content.
leftDrawerContent	React Component	null	The content of the left drawer menu.
rightDrawerContent	React Component	null	The content of the right drawer menu.
duration	Number	160	The duration of animation to open or close drawer.
maskAlpha	Number	0.4	Maximum value is 0.5, the opactiy value of the mask over the main board when drawer is open. Mask can be disabled with showMask property.
showMask	Bool	true	Whether show the mask when drawer is open.
customStyles	Object	{}	Customize drawer styles. You can customize main / mask / drawer / leftDrawer / rightDrawer.
onDrawerOpen	function	null	Triggers when drawer is totally opened.
onLeftDrawerOpen	function	null	Triggers when the left drawer is totally opened.
onRightDrawerOpen	function	null	Triggers when the right drawer is totally opened.
onDrawerClose	function	null	Triggers when drawer is totally closed.
onLeftDrawerClose	function	null	Triggers when the left drawer is totally closed.
onRightDrawerClose	function	null	Triggers when the right drawer is totally closed.
startCapture	Bool	false	Whether to capture touch events while clicking on screen.
moveCapture	Bool	false	Whether to capture touch events while swiping over the screen.
easingFunc	function	null	Easing function of drawer animation, default is Easing.linear. You can pass function like Easing.ease/Easing.bezier(x1, y1, x2, y2)/Easing.sin/Easing.elastic(times)/Easing.bounce etc.
responderNegotiate	function	null	Customize conditions to set pan responder, evt & gestureState will be passed as arguments. Default condition is left 20% area on screen in left Drawer, or right 20% area on screen in right Drawer.

Instance methods

Use ref to invoke instance methods.

Method	Description
openDrawer	Open drawer manually
openLeftDrawer	Open left drawer manually
openRightDrawer	Open right drawer manually
closeDrawer	Close drawer manually. The drawerContent has a ref of drawer instance, you can also trigger with it.
closeLeftDrawer	Close left drawer manually
closeRightDrawer	Close right drawer manually

react-native-drawer-menu's Issues

Importing PropTypes from React

This is currently done in Drawer/index.js but it deprecated behaviour in later versions of React. PropTypes should be imported from the npm library 'prop-types'.

I can create a PR to change this if you'd like.

when navigation poped back drawer shows itself

when using with react-navigation screen poped back results drawer to shows itself on back effect.

How to close touch slide to open ?

I need fix open drawer with button.

How to close touch slide to open ?

Thx you.

Maximum drawer width

I see there is something odd:
this.MAX_DX = drawerWidth > 0.8 * width ? 0.8 * width : drawerWidth;

I'd suggest removing this because may not fit some use cases where people may want 90% of the screen for example.

Although, good plugin, thanks for making it available to the public!

Drawer menu with tab bar bottom

Hi. Thank you for creating a great library. I am using your library. I also want to use a combination like the demo you put on github. Combining the bottom tabbar and menu draw like you. Can you give me the source code reference? Thank you very much

Toggle openDrawer

what command do I need to run openDrawer on to toggle it?

How to use responderNegotiate ?

Default value Drawer on right 20% area on screen in right Drawer, So i need to change this value from 20% to 10% i look at manual and see this function responderNegotiate i trying to
responderNegotiate={(gestureState) => console.log(gestureState) }
it's response somthing i dont understand any one help ?

Warning: BackAndroid is deprecated.

Keeps showing warning in RN>=0.44 plz fix this issue.

Is that possible to have 2 drawers with this project

I want to have 2 drawers from both left and right of the view. Is that possible?

How do i create a partially open drawer?

Is it possible to create drawer with a width like 150, something similar to a side bar? A user can swipe to view the full drawer width (450) and when it slide back it goes to the partially open state.

Open new scene from drawer left menu

Hi Team,

How can we open new window/scene from the drawer left menu option. For example, left drawer contain two option "Home" and "About Us". Now home is my initial screen. When click on "About Us" option so open my About screen on the place of Home initial screen.

Please help me I am newbie in react world.

Thanks & Regards,
Hemant

Open Drawer Manual

can you Explain example of how to open drawer manual using button ,
i can't understand how to use the ref ?

this is my example , and i want to use Button to open drawer , Can you Help Plz ?
`
<Drawer
style={{flex:1}}
drawerWidth={MENU_WIDTH}
drawerContent={drawerContent}
type={Drawer.types.Overlay}
customStyles={customStyles}
drawerPosition={Drawer.positions.Right}
onDrawerOpen={() => {console.log('Drawer is opened');}}
onDrawerClose={() => {console.log('Drawer is closed')}}
easingFunc={Easing.ease}

        >
        <View style={{backgroundColor:'gold', flex:1, alignItems:'center' , 
        justifyContent:'center'}}>
        <View style={{
                position:'absolute',
                top:30,
                right:20
            }}>
            <Button title="Click Here" color='black'/>

            </View>
            <Text style={{fontSize:30, color:'blue'}} >HOME PAGE</Text>
        </View>
        </Drawer>`

Top bottom and all positions

Awesome work!, Has somebody implemented the top, bottom and all positions for the drawer?, or is it planned for a future release?

Can i disable Drawer?

Can i disable drawer when i push some scene? And able drawer when i pop some scene?

Long duration doesn't work

There's a problem with the duration props, it's never work.

swiping to open is too sensitive

swiping is too sensitive for opening the drawer and its blocking ontouch= for touchableopacities on some phones (android) when not tapped so fast.

*update

// swipe right to open left drawer
if (!leftDisabled && this.isLeft && x0 <= width * 0.2 && !isOpen && dx > 10) {
  this.isLeftActive = true;
  return true;
}
// swipe left to open right drawer
if (!rightDisabled && this.isRight && x0 >= this.MAX_DX && !isOpen && dx < -10) {
  this.isRightActive = true;
  return true;
}

checking dx aganist 10 instead of 0 fixed it for me. maybe sensitivity props. can be added to the component.

Element with elevation doesn't get overlayed by the drawer

That tab has an elevation property of 3.

And this was happening:

I managed to solve that by applying elevation 3 to the upper part of the drawer:

But now there's still a part of the tab that doesn't get covered by the drawer mask.

Any ideas?

This is my render:

render () {
  return (
    <Drawer
      ref={(comp) => {this.drawer = comp;}}
      style={styles.container}
      drawerWidth={width*0.8}
      leftDrawerContent={<Menu/>}
      type={Drawer.types.Overlay}
      easingFunc={Easing.ease}
      onDrawerOpen={() => {this.setState({drawerIsOpen: true})}}
      onDrawerClose={() => {this.setState({drawerIsOpen: false})}}
    >
      <Tab 
        onPress={() => {this.drawer.openLeftDrawer()}} 
        title="Pró-Mamá"
      />
      <Main />
    </Drawer>
  )
}

Drawer ref is undefined

I need to send drawer ref as props, Unfortunately setting ref to variable is async It will be assigned after completion of component render. How can I send drawer ref as props?

<Drawer ref={(ref) => this.drawer = ref}>
   <Router drawer={this.drawer}/>
</Drawer>

in Router this.props.drawer will be undefined

Drawer becomes narrower on subsequent opening

If you toggle the menu open again and again, somehow the content becomes narrower.

Bug on Orientation Change

There's a bug when the orientation changes, the drawer always shown. Here are some screenshots.

portrait_normal:

Here's it it after changing orientation
landscape_normal:

How i can open drawer menu with button?

Hello, man. My english is not very fluently.
Thanks for your plugin, it's really the greatest drawer menu plugin!
Can you show me example, how to open drawer menu with button click?

How use with swipe ?

I guys,

I would like try your great module on React-Native (i use latest version, and it work now again :)). But i would like how i can enable the swipe, like your example ?

All method work nice, excepted this feature. Maybe i need other params ?

    <Drawer
      ref={ref}
      drawerWidth={300}
      type={Drawer.types.Overlay}
      leftDrawerContent={<DrawlerContainer />}
      drawerPosition={Drawer.positions.Left}>
     ....

Thank you !

Can't find variable styles

I get an error when I try to use it in App.js:

Can't find variable styles

Do you have an idea how to solve this? I suppose not, but shall I create my own styles variable?

openDrawer not working on react-native 0.64

When you call openDrawer() drawer menu will not be shown. Instead, a black screen will be shown.
Please downgrade react-native version to 0.63 drawer menu will work again.

Other scrollable view will responde to gestures when I want to open the drawer

I am new to react-native so not sure this is a issue or not.

If a scrollview is put on the edge of the screen, when I try to open the drawer, both drawer and the scrollview will response to the gesture. To be specific, when I swipe right the drawer will be dragged out from left, then I swipe down, the scrollview under the overlay will be dragged as well.

Having a function prop called when drawer start moving might solve this. I can disable the scrollview when the drawer start being dragged. However, there are some other component might not have a disable scroll property.

Any idea about this?

Request to Add Product in Start React

Hello,

I am Maheshwari from team GeekyAnts. On behalf of Start React, we add open source products which we find helpful to the community & also we provide credits to author itself.

Let me know if you are interested showcase your product in our open source website.

If yes, then I request you to add MIT Licence in your repo.

Looking forward to hear from you.

Support To Change Background Color of Overlay

Hi, great work on the plugin. Btw, is it possible to change or add support to change the backgroundColor of overlay instead of just black? also its opacity.

Drawer is visible on iOS when you navigate between screens

It is only occurs on iOS. When you navigate back from one screen wrapped into a Drawer to another screen, the Drawer is visible as it is located outside of the left border of the screen.

What is the missing required style?

HI, thanks for the drawer.
But what is the styles you used in the readme?
<View style={styles.leftTop}/>
<View style={styles.leftBottom}>
You made references to them but I cant find it in the sources.

Controls for opening and closing the dropDown

actually i used this multiselect in filters.. when route to filter screen ..i need multiselect with open dropDown( dont wanna click on dropDown)!
if we have any controls for closing and opening as required, my problem will resolve!!

Thanks