Coder Social home page Coder Social logo

react-native-drawer-menu's Issues

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 !

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

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?

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

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.

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.

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.

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

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!

Element with elevation doesn't get overlayed by the drawer

That tab has an elevation property of 3.

image

And this was happening:

image

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

image

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

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?

Can i disable Drawer?

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

Bug on Orientation Change

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

portrait_normal:
portrait_drawer_close

Here's it it after changing orientation
landscape_normal:
landscape_drawer_close

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

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.

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.

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

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?

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.

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 ?

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.