4: Gesture event

Sheet.tsx

const onGestureEvent = useAnimatedGestureHandler({
  // Set the context value to the sheet's current height value
  onStart: (_ev, ctx: any) => {
    ctx.offsetY = sheetHeight.value;
  },
  // Update the sheet's height value based on the gesture
  onActive: (ev, ctx: any) => {
    sheetHeight.value = ctx.offsetY + ev.translationY;
  },
  // Snap the sheet to the correct position once the gesture ends
  onEnd: () => {
    // 'worklet' directive is required for animations to work based on shared values
    'worklet';
    // Snap to expanded position if the sheet is dragged up from minimised position
    // or dragged down from maximised position
    const shouldExpand =
      (position.value === 'maximised' &&
        -sheetHeight.value < maxHeight - DRAG_BUFFER) ||
      (position.value === 'minimised' &&
        -sheetHeight.value > minHeight + DRAG_BUFFER);
     // Snap to minimised position if the sheet is dragged down from expanded position
    const shouldMinimise =
      position.value === 'expanded' &&
      -sheetHeight.value < expandedHeight - DRAG_BUFFER;
     // Snap to maximised position if the sheet is dragged up from expanded position
    const shouldMaximise =
      position.value === 'expanded' &&
      -sheetHeight.value > expandedHeight + DRAG_BUFFER;
     // Update the sheet's position with spring animation
    if (shouldExpand) {
      navHeight.value = withSpring(0, springConfig);
      sheetHeight.value = withSpring(-expandedHeight, springConfig);
      position.value = 'expanded';
    } else if (shouldMaximise) {
      navHeight.value = withSpring(NAV_HEIGHT + 10, springConfig);
      sheetHeight.value = withSpring(-maxHeight, springConfig);
      position.value = 'maximised';
    } else if (shouldMinimise) {
      navHeight.value = withSpring(0, springConfig);
      sheetHeight.value = withSpring(-minHeight, springConfig);
      position.value = 'minimised';
    } else {
      sheetHeight.value = withSpring(
        position.value === 'expanded'
          ? -expandedHeight
          : position.value === 'maximised'
          ? -maxHeight
          : -minHeight,
        springConfig,
      );
    }
  },
});