tinysymphony / react-native-drawer-menu Goto Github PK
View Code? Open in Web Editor NEWA drawer component for React Native Application.
License: MIT License
A drawer component for React Native Application.
License: MIT License
Keeps showing warning in RN>=0.44 plz fix this issue.
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 !
when using with react-navigation screen poped back results drawer to shows itself on back effect.
I need fix open drawer with button.
How to close touch slide to open ?
Thx you.
There's a problem with the duration props, it's never work.
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>`
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?
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
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 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.
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.
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
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!
what command do I need to run openDrawer on to toggle it?
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>
)
}
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 when i push some scene? And able drawer when i pop some scene?
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
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.
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.
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.
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
Awesome work!, Has somebody implemented the top, bottom and all positions for the drawer?, or is it planned for a future release?
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.
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.
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 ?
I want to have 2 drawers from both left and right of the view. Is that possible?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.