BottomSheet: Seamlessly Switch between Gesture.Native and Gesture.Pan while moving ScrollView

[0xFA11]

I'm trying to implement a bottom sheet from scratch where the container sheet panning and inner scrollview scrolling would seamlessly switch gesture handling based on sheet's position/offset.

Here's my code so far:

const positions = [
    Math.max(topbarHeight, 16), // full
    height - baseHeight, // base
    height - miniHeight, // mini
];
const scrollRef = useAnimatedRef<Animated.ScrollView>();
const sheetOffset = useSharedValue(positions[1]);
const scrollOffset = useScrollViewOffset(scrollRef);
const customGesture = Gesture.Pan()
    //
    .onTouchesDown((e, stateManager) => {
        console.log("custom down:", Date.now());
        if (sheetOffset.value > positions[0]) {
            stateManager.activate();
        } else {
            stateManager.fail();
        }
    })
    .onTouchesMove((event, stateManager) => {
        console.log("custom move:", Date.now());
        if (sheetOffset.value > positions[0] && scrollOffset.value <= 0) {
            stateManager.activate();
        } else {
            stateManager.fail();
        }
    })
    .onChange((e) => {
        sheetOffset.value += e.changeY;
    })
    .manualActivation(true);
const nativeGesture = Gesture.Native().requireExternalGestureToFail(customGesture);
const composedGesture = Gesture.Simultaneous(customGesture, nativeGesture);
return (
    <>
        <Animated.View style={[styles.backdrop, { opacity: 0.5 }]} pointerEvents="none" />
        <Animated.View style={[styles.sheet, { top: sheetOffset, paddingBottom: positions[0] + height / 2 }]}>
            <GestureDetector gesture={composedGesture}>
                <Animated.ScrollView
                    //
                    ref={scrollRef}
                    contentContainerStyle={styles.scroll}
                    scrollIndicatorInsets={{ top: 16, bottom: navbarHeight }}
                    stickyHeaderIndices={[0]}
                    removeClippedSubviews={true}>
                    <View style={{ width: "100%", height: 16, backgroundColor: "black" }} />
                    {children}
                    <View style={{ height: 16 + navbarHeight }} />
                </Animated.ScrollView>
            </GestureDetector>
        </Animated.View>
    </>
);

the idea behind this implementation is that, once sheetOffset hits the top (sheetOffset.value <= positions[0]), customGesture should not active therefore nativeGesture would activate itself.

it works perfectly for one direction: from customGesture to nativeGesture but I can't deactivate/fail nativeGesture back again in order to continue handling the gesture move with customGesture.

ideal UX would be a user holding their finger and moving sheet from the middle (position[1]) all the way up and continue moving their finger while customGesture to nativeGesture handling transition happens WITHOUT requiring user to lift their finger and touch screen again. this works fine with the above code.

the problem is, when user starts to move their finger back down again, scrollview scrolls up but never deactivates and gives it back to customGesture in order to move the container sheet down when scrollview is already at the top. (again, hopefully this should not require user to lift their finger and put back onto screen).

so, how can I seamlessly switch gesture handling between my customGesture (Pan) and nativeGesture (ScrollView) on the fly while user is moving their finger on the screen?

any suggestion and/or API or source code reference would be great!

[fredrickreuben]

did you manage to solve this, i am facing the same problem?

[0xFA11]

I started to look at this example:
https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/new_api/bottom_sheet/index.tsx

but the problem is that it doesn't support bounce very well. for non-bouncing (bounces=false) scrollview, the example works fine but if you'd like to have bounces=true in order to replicate the native iOS behavior, it doesn't work.

sadly, I think I will implement a more complex and sophisticated bottom sheet gesture handler with 3 gestures and watch for all events, including momentum begin/end in order to activate or fail other outer wrapping pan gestures.

I'm still working on something, not finished yet but it's somewhat disappointing to see that nobody actually bumped into this and solved the problem.

(p.s. I'm aware of gorhom's bottomsheet but I have some performance concerns about it, also I don't like the way it force-scrolls back to offset 0 with animate=false on every callback as a mitigation)

[fredrickreuben]

I solved it using
const aref = useAnimatedRef<Animated.ScrollView>();
const scrollHandler = useScrollViewOffset(aref);

[0xFA11]

what do you mean? how? can you apply a fix to the code snippet I posted above? I'm really curious.

[fredrickreuben]

I followed this example https://gist.github.com/j-piasecki/f02b4e3f5db2beddea3d8c4de381d36b

[0xFA11]

thank you for the reference, I'll check it out and see if a similar approach would work for my case too.