manufont / react-swipeable-bottom-sheet Goto Github PK

like this
first mode is invisible bottom sheet

second mode

and last mode

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.

How to reproduce

• Go to the Fullscreen example (https://manufont.github.io/react-swipeable-bottom-sheet/fullscreen.html )
• Start a screen reader, e.g. VoiceOver
• Navigate to the "Open" button and activate it

Expected behavior

• The bottom sheet is expanded and the screen reader will start reading its content.

Actual behavior

• The bottom sheet is expanded
• The screen reader cannot find any content.

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.

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.

Cannot install package by npm nor manually including it in my project

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

Hey. Adding the HeightUpdater in the last release started to cause this error:

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?

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 ?

Steps to reproduce:

• Make a bottom sheet with enough height to get a scrollbar when open.
• Open it and scroll down.
• Close it.
• Observe that the bottom sheet overflow is wrongly scrolled.

Expected behavior:

The bottom sheet should automatically reset the scroll offset to zero when closed.

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.

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.

Summary:

When the main page already has a scrollbar, a bottom sheet higher than the screen height gets a second scrollbar.

Steps to reproduce:

1. Make a page with enough height to get a scrollbar.
2. Make a bottom sheet with enough height to get a scrollbar when open.
3. Open the bottom sheet and watch the page getting two scrollbars.

Expected behavior:

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; }.

how can horizontal slide ?

I want to fix header so that I can control the header swipeable after I opened the sheet and scrolled down.

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. :)

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
}

Looks like it solves issues with sameDisplaySlide not detecting side properly in some cases.

Thanks :)