@pedreviljoen im facing some issue with drawer on iphone
You can see our testing code here....
https://snack.expo.io/@immynk/shipmug
while navigating menu its hide inside other views.... and aslo they put horizontal line on status bar

status bar

Upgrade component to make use of React hooks

Describe the bug
When closing the side menu, it flickers in opacity making it translucent for a moment at the beginning of the animation closing.

To Reproduce
Steps to reproduce the behavior:

1. Set the menu to 3000 or 5000 animationTime
2. set a bright background and dark menu background
3. Open menu then close menu to see it happen

Expected behavior
The menu should fade gracefully

Screenshots
1
https://ibb.co/0V0X6wQ
2
https://ibb.co/5LbnYzg

Desktop (please complete the following information):
Android emulator

Upgrade transitions and explore new animations

Update readme to showcase with React hooks

In ANDROID One Menu Drawer as a children of another Menu drawer and whole screen will be covered by overlay,

To Reproduce
Steps to reproduce the behavior:

1. Create one MenuDrawer component with respective states and drawerContent properties.
2. Create second Menu Drawer as a children of first Menu Drawer.
3. Open the first MenuDrawer.
4. The whole screen will be covered by overlay, but child MenuDrawer is working fine.

Expected behavior
Expect to work with nested MenuDrawers like it's working like a charm in iOS.

<MenuDrawer
            open={isMenuDrawerOpen}
            drawerContent={drawerContent()}
            drawerPercentage={45}
            animationTime={250}
            position={'left'}
            overlay={true}
            opacity={0.4}>
            <MenuDrawer
                open={isNotificationDrawerOpen}
                drawerContent={NotifcationDrawerContent()}
                drawerPercentage={45}
                animationTime={250}
                position={'right'}
                overlay={true}
                opacity={0.4}>
             </MenuDrawer>
</MenuDrawer>

Screenshots

Smartphone

• Device: [e.g. Realme5]
• OS: [Android 10]

code:

<MenuDrawer drawerContent={drawerContent()}...>
<FlatList/>
</MenuDrawer>

 const drawerContent = () => {
    return (
      //some filters
    );
  };`

in this case there is a bug - flatlist is not all visible and cannot be scrolled to the end

if i put Flat list outside of MenuDrawer like this:

<>
<MenuDrawer drawerContent={drawerContent()} ...></MenuDrawer>
<FlatList/>
</>

then drawer content is behind the FlatList on ios devices (I tried zIndex 0 on flatList and 1000 to drawerContent but doesn't help)

Change API to rather accept content of drawer as prop type. This will allow for more customisable drawer component in the future.

I have an issue when I rotate my screen to landscape, the content isn't allowed to extend the full width of the screen. When I remove the MenuDrawer component, the app becomes responsive once again.

Any ideas on how to fix this?

Describe the bug
When setting the drawer to the right side via position: 'right' AND giving it an overlay={false} will make all of the content on the screen vanish.

To Reproduce
Steps to reproduce the behavior:

1. paste the example code https://www.npmjs.com/package/react-native-side-drawer
2. Switch it from a class to ES6 arrow function
3. Give the MenuDrawer property position='right' and change the overlay to false
4. Reload the app
5. No content will be visible (tried both iPhone and android)

Expected behavior
The content should remain as it is, but the drawer should be on the right and should 'push' the main content to the right when opening.

Screenshots
No content is being displayed :|
the screenshot would be just an empty phone screen.

Smartphone (please complete the following information):

• Device: Iphone 13 pro max and Huawei mate 10 lite

Describe the bug
I have settings as follows:

<MenuDrawer
        open={menuOpenRef.current}
        drawerContent={menuContent()}
        drawerPercentage={100}
        animationTime={200}
        overlay={true}
        opacity={0.4}
 >

When I flip the phone from portrait to landscape, the dimensions of the menu remain the same. So now in landscape only part of the screen behind is covered by the menu. It appears that the height and width of the top window of the MenuDrawer component remain fixed even when the orientation is changed.
To Reproduce
Just flip the phone from portrait to landscape.
Expected behavior
Size recalculated and redrawn

Screenshots
If applicable, add screenshots to help explain your problem.

Describe the bug
I'm using your drawerContent function to feed the drawer. However I apparently cannot add TouchableOpacity tags to the drawer. I'm not getting any errors but it seems that they are not clickable for some reason.

To Reproduce
Steps to reproduce the behavior:
I'm just going to paste my code which is from the template you wrote:

import React from 'react'
import { View, Image, Text, StyleSheet, TouchableOpacity } from 'react-native'
import MenuDrawer from 'react-native-side-drawer'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faBars, faTimes, faMountain } from '@fortawesome/free-solid-svg-icons';


export default class Screen extends React.Component {
  state = {
    open:false
  };

  toggleOpen = () => {
    this.setState({ open: !this.state.open });
  };

  drawerContent = () => {
    return (
      <View style={styles.animatedBox}>
        <View style={{flexDirection:'row', width:100, height:50}}>
          <View style={{width:55, height:55}}>
            <Image 
              source={require('../assets/imgs/profile.jpeg')}
              style={{ width: "100%", height: "100%", borderRadius: 10 }}
            />
          </View>
          <View style={{flexDirection:'column', width:400, marginLeft:'5%'}}>
            <Text style={styles.welcome}>Hi,</Text>
            <Text style={styles.welcome_name}>Yann Bohbot</Text>
          </View>
        </View>
        <View style={{flex:1, flexDirection:'column', marginTop:'20%'}}>
        <TouchableOpacity onPress={() => console.log('bitch')}>
              <View style={{flexDirection:'row', paddingTop:'5%', height:50}}>
                <FontAwesomeIcon icon={ faMountain } size={ 27 } />
                <Text style={styles.menu}>Dashboard</Text>
              </View>
            </TouchableOpacity>
        </View>
      </View>
    );
  };


  render() {
    return (
      <View style={styles.container}>
        <MenuDrawer 
          open={this.state.open} 
          drawerContent={this.drawerContent()}
          drawerPercentage={75}
          animationTime={250}
          overlay={true}
          opacity={1}
        >
          <TouchableOpacity onPress={this.toggleOpen} style={styles.toggle}>
            <FontAwesomeIcon icon={ faBars } size={ 22 } style={this.state.open == true ? styles.menuOpen : styles.menuClose}/>
            <FontAwesomeIcon icon={ faTimes } size={ 22 } style={this.state.open == true ? styles.menuClose : styles.menuOpen}/>
          </TouchableOpacity>
        </MenuDrawer>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  welcome:{
    fontFamily: "Rubik Medium",
    color: "#2e384d",
    fontSize: 22,
  },
  welcome_name:{
    fontFamily: "Rubik Light",
    color: "#2e384d",
    fontSize: 22,
    // lineHeight:40
  },
  menu:{
    fontFamily: "Rubik Medium",
    color: "#2e384d",
    fontSize: 18,
    marginLeft:'5%'
  },
  animatedBox: {
    flex: 1,
    marginTop:'5%',
    backgroundColor: "#fff",
    paddingTop: '50%',
    paddingLeft:'5%',
    zIndex:1,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  toggle:{
    width:22,
    height:22,
    marginLeft:'5%',
    marginTop: '10%',
  },
  menuOpen:{
    display: 'none',
    alignSelf:'flex-start',
    zIndex:1,
    
  },
  menuClose:{
    display: 'flex',
    alignSelf:'flex-start',
    zIndex:0
  }
})

Expected behavior
TouchableOpacity to work
Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [Galaxy S10]
• OS: [API29]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

The drawer menu works nicely on iOS.
When I switch to Android environment, the side drawer will no longer show up.

To Reproduce
Steps to reproduce the behavior:

1. Open the build on Android simulator
2. Click the button to reveal the side menu
3. The menu will not come up

Expected behavior
Side menu will become visible

Desktop (please complete the following information):

• OS: macOS Mojave (version 10.14)
• XCode: Version version 10.1
• React 16.6.3
• React Native 0.58.4

I cant click open label. It is not working. Please check yourself and confirm

Create options for the drawer:

• Push
• Overlay

Also add opacity fade for the background screen

Main content is not clickable or scrollable when overlay = false (even when drawer is hidden)
You can see main content but can't interact with it.
However as soon as i change it to overlay = true .. everything works

Tested on android 8.1 and android 11

Describe the bug
In android, it appears there is a small gap (~35px) in height. It does not show up in IOS.

To Reproduce
Steps to reproduce the behavior:

1. Create a drawer and run on android.

Expected behavior
No Gap

Smartphone (please complete the following information):

• Device: [Motorola Motog plus]
• OS: [android 9]
• Version [1.2.9]

Additional context
I added 37 to SCREEN_HEIGHT when Platform.OS == "android" in index. Solved my issue for now.

This solves my problem. I have not tested on any other android devices, I could not tell you if this is device issue or android issue.

Thank you,

Patrick

Add slide to open animation

Need a way to close the menu when user presses outside the area outside the drawer in the background screen. Is it possible in the current implementation?

I just want to ask that does it works on android too or just for ISO?

Hi any chance we can set the drawer size with width instead of percentages?
eg:
drawerWidth={330}
instead of
drawerPercentage={45}

Hi,

I want to request 2 functions:

1. When the drawer is opened, the content behind the drawer is now in opacity. I am not sure if you have added an overlay or not. But I want to dim the background content. I want to see if it is possible to add background color to work with the opacity? Like #000 with opacity 0.5 to make the dim effect?

2. I am new to react native. The drawer menu can now only open by clicking on something. Is it possible to open the drawer by swipe from left to right?

Thanks,
Alex

Hi,
I was just trying this example https://reactnativeexample.com/simple-lightweight-customisable-menu-drawer-component/ and there was an error in index.js file which you may forgot to declare DRAWER_WIDTH value.

Hey, It is very good help me a lot for my projects. It would be nice if it have setting for animation right to left (now only left to right )
Thank you.

Be able to set width, speed and overlay / push background content. Also opacity of background screen.