How to snap to new snap point

[notclive]

I use a bottom sheet to show two different views, let's call them A and B. The snap points for my bottom sheet change based on this view. When switching between A and B I want to go back to the snap point I had when I last used that state.

However, when I move between A and B I can't call snapToIndex, because the index might be out of range, my bottom sheet hasn't picked up the updated snap points yet.

const snapPoints = useMemo(() => {
  return aOrB === 'A' ? [...] : [...]
}, [aOrB])

useEffect(() => {
  // Doesn't work, index may not exist yet.
  sheetRef.current?.snapToIndex(aOrB ? priorIndexForA : priorIndexForB)
  // Sort of works but has a bug.
  sheetRef.current?.snapToPosition(aOrB ? priorPositionForA : priorPositionForB)
}, [aOrB])

return <BottomSheet ref={sheetRef}  snapPoints={snapPoints} ...

Calling snaptoPosition sort of works but there's I can't expand my sheet unless I first make it smaller.

const snapPoints = useMemo(() => {
  return aOrB === 'A' ? [...] : [...]
}, [aOrB])

useEffect(() => {
  // Sort of works but has a bug.
  sheetRef.current?.snapToPosition(aOrB ? priorPositionForA : priorPositionForB)
}, [aOrB])

return <BottomSheet ref={sheetRef}  snapPoints={snapPoints} ...

This is caused by this logic in bottom-sheet, this might be a bug I need to spend some time understanding the logic.

/**
 * if the sheet is in a temporary position and the gesture ended above
 * the current position, then we snap back to the temporary position.
 */
if (
  isInTemporaryPosition.value &&
  context.initialPosition >= animatedPosition.value
) {
  if (context.initialPosition > animatedPosition.value) {
    animateToPosition(
      context.initialPosition,
      ANIMATION_SOURCE.GESTURE,
      velocityY / 2
    );
  }
  return;
}

Is there a way I can tell when the snap points have been updated, so that I can use snapToIndex?

[Karthik-B-06]

Yeah, I have a similar use case. Where I trigger a new set of snap points with a state change, but the Bottomsheet does not snap to the new one because it is not updated yet.

  const handleOnPressPlaceholder = () => {
    setCurrentBottomSheetState('');
    homeBottomSheetRef.current?.expand();
    haptic && haptic?.();
  };

The sheet does not expand to the new set of points.

[Nikhithkumar]

"Hey, I've encountered a similar issue where I trigger a state change to update the snap points, but the BottomSheet doesn't snap to the new set of points right away. Have you found any solution to this? I'm wondering if there's a way to force the BottomSheet to re-render or refresh its snap points when the state changes. Let me know if you've figured out a workaround!"

[Karthik-B-06]

My workaround was to call the below function with a delay after changing the snap points.

homeBottomSheetRef.current?.expand();

Definitely not the way to go about it. I think there should be some other way to get there.