manufont / react-swipeable-bottom-sheet Goto Github PK
View Code? Open in Web Editor NEWA swipeable material's bottom sheet implementation, using react-swipeable-views
License: MIT License
A swipeable material's bottom sheet implementation, using react-swipeable-views
License: MIT License
Hi there,
Great component, thanks! I had a quick question: I'd like to create a bottom sheet that has multiple "snap points". A good example of what I'm trying to achieve is https://github.com/wix/react-native-interactable
A small flick would bring the bottom sheet to it's first position, but you can drag it further to the top position. And a gesture with more force would move it immediately to the top/bottom.
Is this something you reckon is easily added to this react-swipeable-bottom-sheet? Or should I look at writing my own based off of the swipeable views?
/Thanks
Jelte
Hi there,
I just set the open={isOpen}
to use the controlled component, but when it's true and the body content is scrollable, swiping up causes a jump on scroll.
This issue occurs only when I swipe up with touch event.
Any ideas?
Looks like it solves issues with sameDisplaySlide not detecting side properly in some cases.
Thanks :)
I can open the bottom sheet just fine by dragging with a mouse, but closing is really hard. Most of the times, it just swipes back to the open state. Already tried changing threshold
and hysteresis
in the swipeableViewsProps
but nothing changed.
Having this strange issue on iphones, the same code works fine on android and desktop but it breaks when it comes to iOS.
Whenever I scroll down then lift my finger off the screen and try to scroll up again, it doesn't work. But when I scroll down and scroll up without lifting my finger, it works. This only happens on iOS devices, I have tested it both on safari and chrome, same results.
Tried my best to solve it but seems like I am missing something in here, any help is appreciated.
Thanks in advance. :)
When the main page already has a scrollbar, a bottom sheet higher than the screen height gets a second scrollbar.
If the bottom sheet is higher than the screen height and gets a scrollbar, no interaction with the main page is expected and therefore it shouldn't be scrollable. In this situation, something like this should be applied: body { overflow: hidden; }
.
Hey.
I found that when the content of the bottom sheet is too large it overflows through the top of the screen. I think it would be nice if it became scrollable in this situation.
This would solve:
body:{
overflow: isOpen ? 'auto' : 'hidden',
maxHeight: '100vh',
backgroundColor: 'white',
...this.props.bodyStyle
}
There's only a caveat with Chrome for Android. When visible, the address bar covers part of the 100vh
space.
Hello.
I'm trying to use this component, but simply importing it and surrounding the content in the JSX is not working. Is there any required CSS? Perhaps position: relative
somewhere or body { height: 100% }
?
Thanks in advance.
how can horizontal slide ?
There are cases where one may want to set body { overflow: hidden }
to avoid two scrollbars at the same time: one for the body and one for the bottom sheet, but as discussed in #6 the bottom sheet should not interfere with the page layout.
Maybe this component should do the same as https://github.com/reactjs/react-modal#body-class does: add a class (e.g.: ReactSwipeableBottomSheet--open
) to the body when it's open. Then the user can define whatever CSS rules he wants using such CSS class.
This would cover most of the cases while not imposing anything.
Anyway to port this over or make a Cordova compatable plugin, with this same functionality?
It's awesome and would get a lot of Cordova ppl contributing.
The bottom sheet should automatically reset the scroll offset to zero when closed.
The content inside the component is overflowing through the left of the screen when the page is long enough to have a scrollbar.
This is the cause:
root:{
width: '100vw',
height: height,
position: 'fixed',
bottom: 0,
right: 0,
...this.props.style
}
So width: '100vw'
ignores the width taken by the scrollbar. Together with right: 0
, the content can't help but overflow a bit through the left of the screen.
This would fix:
root:{
height: height,
position: 'fixed',
bottom: 0,
right: 0,
left: 0,
...this.props.style
}
Hi!
Thanks for the implementation.
I'm trying to use this Component on my App, and I get some errors about missing types declaration.
I made a fork and changed all files to Typescript, and I'd noticed that the build seems to be broken, including on the master branch.
Also, I want to add a feature to change the overlay opacity gradually with the dragged height.
Could you fix the Gulp build and add support for Typescript?
So, I can make a PR with these mentioned changes.
There is an accessibility problem with the current implementation affecting visually impaired screen reader users.
When the bottom sheet is expanded, the attribute aria-hidden=true
is set on the container element. This effectively hides everything from the screen reader, making it inaccessible.
Can i do this ?
Modal rendered and transform move it outside screen
But in ios safari (with bounce effect) we can watch for it transformed modal
(only if parent has position fixed)
How i fix it ?
Cannot install package by npm nor manually including it in my project
I want to fix header so that I can control the header swipeable after I opened the sheet and scrolled down.
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.