[v4] Setting `enableContentPanningGesture` to `false` breaks `BottomSheetScrollView`

[simon-abbott]

Bug

Setting enableContentPanningGesture to false breaks the scroll interaction with BottomSheetScrollView. Namely, while the user's finger is still down they can move it all they want and the content does not scroll at all, but when they release their finger the momentum is applied.

Environment info

Library	Version
@gorhom/bottom-sheet	4.1.4
react-native	0.64.2
react-native-reanimated	2.2.3
react-native-gesture-handler	1.10.3

Steps To Reproduce

1. Make a BottomSheet with enableContentPanningGesture={false}
2. Put a BottomSheetScrollView in it with enough contents to make it scroll
3. Expand the sheet and try to scroll the contents

Describe what you expected to happen:

Setting enableContentPanningGesture to false should disable the ability to collapse the sheet by panning, but it should not affect scrolling the contents.

Reproducible sample code

https://snack.expo.dev/@simon.abbott/bottom-sheet-scroll

[zakthedev]

I'm having the same issue here.

[dentep]

Same problem.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

Not fixed, don't close.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

Bump.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

Bump!

[DominykasDriu]

@simon-abbott hey, I had a similar issue with a date picker inside modal. I solved the issue by using BottomSheetView and inside it using ScrollView from react-native-gesture-handler

import { ScrollView } from 'react-native-gesture-handler';

`

{contents}

`

[simon-abbott]

Using a different ScrollView does work, but the problem is that I need to be able to set enableContentPanningGesture dynamically, and when it's enabled I need to use a BottomSheetScrollView so the drag-to-close works as expected. I can swap between the two dynamically based on whether or not the sheet should be enabled, but swapping out the components loses the scroll amount (snaps back to top), and I couldn't find a clean (and performant) way to preserve the scroll offset through that transition.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

Not fixed, don't close!

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

bump

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

bumpity bump

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

bump

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

Commenting to keep open

[lucarducci]

same problem here too

[cuanclifford]

please fix this

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[AliMSbaee]

Pump

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

Still a problem, do not close.

[keithluchtel]

@simon-abbott I ran into as similar issue and ended up doing:

      enablePanDownToClose={false}
      enableOverDrag={false}>

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

Not fixed yet!

[Zakyyy]

any solution

[keithluchtel]

@Zakyyy Does the alternative I posted above work?

https://github.com/gorhom/react-native-bottom-sheet/issues/765#issuecomment-1399311529

[Zakyyy]

@keithluchtel the thing is I don't want to remove this behavior from the modal, I want to have this enabled

Do you have any other solution?

Thanks for helping

[keithluchtel]

@Zakyyy, I hadn't looked any further into it since after I used this alternative in my project. Sorry I can't be more help.

[Zakyyy]

@Zakyyy, I hadn't looked any further into it since after I used this alternative in my project. Sorry I can't be more help.

No worries thanks

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

Not fixed, don't close please.

[Yassdrk]

I have the same issue. Please help.

[mobinni]

Running into the same issue here

[khadkamonsoon]

Same problem .

[khadkamonsoon]

For now, I made margin of 2 and removed enableContentPanningGesture={false} such that user is allowed to navigate back to previous page and also have scroll function but still it is just a work around, I did such for a solution but couldn't find it.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

Not stale, please don't close.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

Still not fixed.

[NicholasBoccuzzi]

Hopping in here -- this is still an issue

[Alsania14]

Help

[ajimae]

I am also experiencing this issue. Any solution to this?

For context, I am trying to achieve the instagram comment modal. When the modal opens up, the comments are scrollable, with the modal snapped at approximately half the screen but can be expanded when panning on the modal header/handle. Also when it's at the max height and the scrollview is at the top, any downwards drag on the scrollview will snap back the modal back to initial/original modal height.

I don't know if there is any other props combination or if anyone knows how this can achieve kindly comment here.

Thanks 🙏🏽

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[simon-abbott]

Still broken, do not close.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.