React-native-reanimated-bottom-sheet: Closing modal

Created on 30 Mar 2020  路  10Comments  路  Source: osdnk/react-native-reanimated-bottom-sheet

this.bottomSheetRef.current.snapTo(1)

This always works at second click. If there is 3 snapPoints its always goes to heighest one at first and at second click it goes where I want.

Most helpful comment

I have ran into this problem today. I found a very annoying workaround, calling the snapTo twice.

like this,

const closeModal = () => {
  bottomSheet_ref.current.snapTo(1)
  bottomSheet_ref.current.snapTo(1)
}

All 10 comments

I have been receiving this issue as well and wanted to provide some repro steps:

Environment
Device: Only been tested on iOS simulator
RN Version: 0.60.4

Repro Steps

  1. Setup BottomSheet to utilize 2 or 3 snap points
  2. Set intialSnap to the last element in the array
  3. Call snapTo from a button tap or something of the sort

Expected Results
On tap, the BottomSheet should pop to the specified point

Actual Results
It takes two taps in order for anything to happen about 80% of the time

General Information
It seems like changing the number of snap points doesn't really matter. In my situation specifically, I have a component that wraps BottomSheet and and forward a ref to it, to call it. The ref is coming back properly every time, but I do wonder if this ref is holding onto some stale? Not quite sure, but would love to help with this issue!

ALSO - It seems like after it works once, it will work after that.

I have been running into the same problem. Based on my observation, when modal is manually swiped by gesture, the next call to snapTo method works in one tap, however consecutive calls to snapTo method is causing this issue. For example, I have two snap points, I call snapTo to move from first point to second, but when I call snapTo again it requires 2 taps. If I swipe from second point to first then it would only need 1 tap, next time when I want to move from first point to second point. It seems like the snapTo is the source of this issue

I plan on cloning the repo down this weekend and try to debug what's going on. @Deepp0925 or @Sargnec let me know if you have some time to do the same and post any findings here!

I have ran into this problem today. I found a very annoying workaround, calling the snapTo twice.

like this,

const closeModal = () => {
  bottomSheet_ref.current.snapTo(1)
  bottomSheet_ref.current.snapTo(1)
}

@aliemir - ironically enough I did the same fix lol. It's super hacky, but hey it works for now. I personally haven't had time to try and debug this, but I'm hoping today I can find some!

I have the same issue, and used the same workaround.
@adilanchian it would be awesome if you could fix this!
Another issue is still open regarding the snapTo method always snapping to the highest snappoint first
https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/170

Hello! I have the same issue and used the workaround above. Waiting for a fix.

yep same issue.

bottomSheet.current?.snapTo(1);
bottomSheet.current?.snapTo(1);

is the temp fix

Hello. Is there any way to close on backdrop press?

@da1z you can use https://www.npmjs.com/package/react-native-bottomsheet-reanimated package
it has two props for this backdrop

isBackDrop={true}
isBackDropDismisByPress={true}
Was this page helpful?
0 / 5 - 0 ratings