How to Seamlessly Transition from Dragging to Scrolling in a ScrollView (React Native Gesture Handler)

[fredrickreuben]

Hello everyone,

I'm working on a React Native project where I have a ScrollView that I want to behave in a specific way with gestures, using the react-native-gesture-handler. My goal is to achieve the following behavior:

Drag Upwards:

The ScrollView should be draggable upwards until it reaches the top of the content.
While dragging, the scrolling functionality should remain inactive.
Switch to Scrolling:

Once the drag reaches the top (i.e., Y = 0), the drag should seamlessly transition into the scroll behavior, allowing the user to scroll the content.
The switch from dragging to scrolling should feel smooth and continuous, without needing the user to lift their finger and start a new gesture.
Drag Downwards:

If the user starts dragging downward (scrolling up and hits the top of the scroll view), the drag functionality should take over again, pulling the ScrollView down.
The challenge I'm facing is how to manually transition from the drag gesture to the scroll gesture. Currently, I can detect when the drag reaches the top, but the transition between dragging and scrolling is not seamless—it feels like two distinct gestures, and I have to restart the gesture after reaching the top.

I'm not relying on velocity or any automatic gesture transitions, as I want full control over when the transition occurs. I need the drag to switch to scroll smoothly, and vice versa, based on the direction and position of the gesture.

My Setup:
React Native
react-native-gesture-handler
Reanimated (optional, if it helps with the transition)
What I’ve Tried:
I’ve implemented Gesture.Exclusive() Gesture.Race() looks like Gesture.Simultanpus() is getting me close to the desired behaviour, I have also tried disabling and enabling Pan and ScrollView. None seems to achieve the continuous feel from dragging to scrolling and back again.
I’ve tried using manual thresholds to trigger the transition but am having difficulty making the change feel natural.
What I Need:
I would really appreciate any guidance or examples on:

How to properly transition from dragging to scrolling manually when the drag reaches a certain threshold (e.g., top of the content).
How to handle the reverse case when scrolling upwards and transitioning back to dragging smoothly.

here is how my code looks like

`
import ActivateBusinessAccount from "@/components/account/activate";
import AccountItems from "@/components/account/items";
import { Avatar } from "@/components/ui/avatar";
import { Input } from "@/components/ui/input";
import PhoneInput from "@/components/ui/phone";
import { Colors } from "@/constants/Colors";
import ScreenViewProvider from "@/providers/screen";
import { LinearGradient } from "expo-linear-gradient";
import React, { useCallback, useEffect, useState } from "react";
import { LayoutChangeEvent, useWindowDimensions, View } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
Extrapolation,
FadeInDown,
FadeOutDown,
interpolate,
runOnJS,
useAnimatedRef,
useAnimatedScrollHandler,
useAnimatedStyle,
useSharedValue,
withSpring,
} from "react-native-reanimated";

const AccountMain = () => {
const { height: SCREEN_HEIGHT } = useWindowDimensions();
const [distance, setDistance] = useState(0);
const [ready, setReady] = useState(false);
const [scrollEnabled, setScrollEnabled] = useState(false);

const translateY = useSharedValue(0);
const context = useSharedValue(0);
const scrollY = useSharedValue(0);

const updateScrollable = (offset: number) => {
    "worklet";
    if (offset > 0) {
        scrollY.value = offset
        //runOnJS(setScrollEnabled)(false);
    } else if (offset === 0) {
        scrollY.value = offset
        //runOnJS(setScrollEnabled)(true);
    }
};

const scrollPanGesture = Gesture.Pan()
    .onBegin(() => {
        //context.value = translateY.value;
    })
    .onUpdate((e) => {
        // if (scrollY.value === 0) {
        //     const newValue = Math.max(
        //         0,
        //         Math.min(context.value + e.translationY, distance)
        //     );
        //     translateY.value = newValue;
        //     runOnJS(setScrollEnabled)(newValue === 0);
        // }
    })
    .onEnd(() => {
        // if (scrollY.value === 0) {
        //     const snapTo = translateY.value > distance / 2 ? distance : 0;
        //     translateY.value = withSpring(snapTo, {
        //         damping: 400,
        //         stiffness: 200,
        //     });
        //     //runOnJS(setScrollEnabled)(snapTo === 0);
        // }
    });

const panScroll = Gesture.Pan()
    .onBegin(() => {
        context.value = translateY.value;
    })
    .onUpdate((e) => {
        if (scrollY.value === 0) {
            const newValue = Math.max(
                0,
                Math.min(context.value + e.translationY, distance)
            );
            translateY.value = newValue;
            runOnJS(setScrollEnabled)(newValue === 0);
        }
    })
    .onEnd(() => {
        if (scrollY.value === 0) {
            const snapTo = translateY.value > distance / 2 ? distance : 0;
            translateY.value = withSpring(snapTo, {
                damping: 400,
                stiffness: 200,
            });
            //runOnJS(setScrollEnabled)(snapTo == 0);
        }
    })

const nativeGesture = Gesture.Native();

const composedGestures = Gesture.Simultaneous(panScroll, nativeGesture);

const onScroll = useAnimatedScrollHandler({
    onScroll({ contentOffset }) {
        scrollY.value = contentOffset.y
        //updateScrollable(contentOffset.y);
    }
});

const handleActivate = useCallback(() => {}, []);

const handleOnLayout = useCallback(
    (ev: LayoutChangeEvent) => {
        if (distance === 0) setDistance(ev.nativeEvent.layout.height);
    },
    [distance]
);

const animatedHeaderStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
        translateY.value,
        [distance, 0],
        [1, 0],
        Extrapolation.CLAMP
    );

    const scale = interpolate(
        translateY.value,
        [distance, 0],
        [1, 0.8],
        Extrapolation.CLAMP
    );

    const translateYHeader = interpolate(
        translateY.value,
        [0, distance],
        [0, distance],
        Extrapolation.CLAMP
    );

    return {
        opacity,
        transform: [{ translateY: translateYHeader }, { scale }],
    };
});

const animatedScrollStyle = useAnimatedStyle(() => {
    if (!ready) return {};
    const top = interpolate(
        translateY.value,
        [distance, 0],
        [distance, 45],
        Extrapolation.CLAMP
    );

    return {
        top,
        zIndex: 10,
    };
}, [distance, ready]);

useEffect(() => {
    if (distance == 0) return;
    translateY.value = distance;
    setReady(true);
}, [distance]);

//useEffect(() => {console.log(scrollOffset)}, [scrollOffset])

useEffect(() => {console.log(scrollEnabled);}, [scrollEnabled])

return (
    <ScreenViewProvider>
        <GestureDetector gesture={scrollPanGesture}>
            <LinearGradient
                className="relative h-full w-full"
                colors={[Colors.primaryPink, Colors.primaryPinkLight]}
                style={{
                    height: SCREEN_HEIGHT,
                }}
            >
                <Animated.View
                    className="w-full absolute top-0 right-0 left-0"
                    onLayout={handleOnLayout}
                >
                    <View className="py-10 px-6 w-full flex flex-col justify-center items-center">
                        <View className="h-[120px] w-[120px] flex flex-col justify-center items-center">
                            <Avatar
                                variant="light"
                                size="xl"
                                color="dark"
                                border="lg"
                            />
                        </View>
                        <View className="w-[250px] flex flex-col gap-6">
                            <View>
                                <Input
                                    variant="secondary"
                                    placeholder="Username"
                                    appearance="underlined"
                                    border="md"
                                    align="center"
                                    size="sm"
                                />
                            </View>
                            <View>
                                <PhoneInput
                                    country="KE"
                                    onValueChange={console.log}
                                    value=""
                                    className=""
                                />
                            </View>
                        </View>
                        <View className="w-full mt-6">
                            <ActivateBusinessAccount
                                onAccountToggle={handleActivate}
                            />
                        </View>
                    </View>
                </Animated.View>
                {distance > 0 && (
                    <Animated.View
                        entering={FadeInDown}
                        exiting={FadeOutDown}
                        className="absolute w-full left-0 right-0 bottom-0 flex flex-col justify-center items-center overflow-hidden pb-14 rounded-5xl shadow space-y-2 bg-light-primary-pink"
                        style={[{ top: distance }, animatedScrollStyle]}
                    >
                        <GestureDetector
                            gesture={composedGestures}
                        >
                            <Animated.ScrollView
                                bounces={false}
                                scrollEnabled={scrollEnabled}
                                contentContainerStyle={{ flexGrow: 1 }}
                                scrollEventThrottle={16}
                                showsVerticalScrollIndicator={false}
                                className="py-6"
                                onScroll={onScroll}
                            >
                                <AccountItems />
                                <View className="w-full h-[1000px]" />
                            </Animated.ScrollView>
                        </GestureDetector>
                    </Animated.View>
                )}
            </LinearGradient>
        </GestureDetector>
    </ScreenViewProvider>
);

};

export default AccountMain;

`

Thanks in advance for your help!