formSheet + ScrollView (react-native-gesture-handler) does not close the sheet with a swipe

[RohovDmytro]

Description

formSheet + ScrollView (react-native-gesture-handler) does not close the sheet while swiping down.

Steps to reproduce

1. https://github.com/RohovDmytro/react-native-screams

2. Open example "formsheet-rngh-steals"

3. Scroll down, sheet's not closing.

Snack or a link to a repository

https://github.com/RohovDmytro/react-native-screams

Screens version

4.7.0-beta.4

React Native version

0.76.7

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

Google Pixel 7

Acknowledgements

Yes

[RohovDmytro]

Should it be part of this repo or should it I create an issue at react-native-gesture-handler?

[RohovDmytro]

The workaround is to use ScrollView from react-native + custom component that will handle the swipe gesture to close a sheet.

const closer = useGestureSwipeToClose();

<GestureDetector gesture={closer.pan}>
  <Animated.View style={animatedContainer}>
      <>
          <GestureDetector
            gesture={closer.native.simultaneousWithExternalGesture(closer.pan)}
          >
            <ScrollView
              scrollEnabled={closer.isDragging.value === false}
              onScroll={closer.onScroll}
            />
          </GestureDetector>
      </>
  </Animated.View>
</GestureDetector>

import { useRouter } from 'expo-router';
import { useCallback } from 'react';
import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
import { useWindowDimensions } from 'react-native';
import { Gesture } from 'react-native-gesture-handler';

import { runOnJS, useSharedValue, withDecay, withSpring } from 'react-native-reanimated';

/**
 * TODO
 * - handle tiny screens less that 100
 */
const THRESHOLD = 100;
const VELOCITY_THRESHOLD = 500;
const MIN_VELOCITY = 1000;

// Spring config for slow swipes to complete in ~400ms
const SPRING_CONFIG = {
  damping: 50,
  mass: 0.3,
  stiffness: 400,
  overshootClamping: true,
  restDisplacementThreshold: 0.01,
  restSpeedThreshold: 0.01,
};

export const useGestureSwipeToClose = () => {
  const isEnabled = useSharedValue(true);

  const drag = useSharedValue(0);
  const isDragging = useSharedValue(false);
  const native = Gesture.Native();

  const onScroll = useCallback(
    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
      isEnabled.value = event.nativeEvent.contentOffset.y <= 0;
    },
    [isEnabled]
  );

  const router = useRouter();

  const dimensions = useWindowDimensions();

  const isOnTop = useSharedValue<boolean>(false);

  const pan = Gesture.Pan()
    .onBegin(() => {
      isOnTop.value = isEnabled.value;
    })
    .onChange((event) => {
      if (event.translationY > 0 && isOnTop.value) {
        isDragging.value = true;
        drag.value = event.translationY;
      }
    })
    .onFinalize((event) => {
      const isFastSwipe = Math.abs(event.velocityY) > VELOCITY_THRESHOLD;

      if (drag.value >= THRESHOLD) {
        runOnJS(router.back)();

        if (isFastSwipe) {
          drag.value = withDecay({
            velocity: event.velocityY,
            clamp: [0, dimensions.height],
          });
        } else {
          drag.value = withSpring(dimensions.height, {
            ...SPRING_CONFIG,
            velocity: event.velocityY,
          });
        }
      } else {
        drag.value = withSpring(
          0,
          {
            ...SPRING_CONFIG,
            velocity:
              Math.max(MIN_VELOCITY, Math.abs(event.velocityY)) *
              (event.velocityY < 0 ? -1 : 1),
          },
          () => {
            isDragging.value = false;
          }
        );
      }
    });

  return {
    isEnabled,
    pan,
    native,
    drag,
    isDragging,
    onScroll,
  };
};