is it possible to use PanGestureHandler to scroll a ScrollView and a nested FlatList after the scrollView reached certain position?

[gsantiago]

I have this scenario:

<ScrollView>
   <Header />
   <FlatList />
</ScrollView>

I want to enable the FlatList scroll after the ScrollView reached certain Y position and then automatically start to scroll the FlatList. All with a single gesture.

Is it possible?

[ehcorrea]

I'm having the same scenario, but I couldn't find any solution, they all look like "workarounds"

[GeorgeHop]

So I found this thing

[GeorgeHop]

This component should work as we want it from GH repo https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/showcase/bottomSheet/index.tsx

[GeorgeHop]

Trying to refactor it to hooks and cleaning the code. But you can try to play with this code also... Maybe you will find better workaround.

[GeorgeHop]

This is how this code from link working. Very smooth better solution than all I have tried. Left only deeply understand how it works)
https://user-images.githubusercontent.com/47904385/201367973-9832735c-7897-4e8c-9557-2eddb1b81594.MP4

[GeorgeHop]

To summarise
If you need modal animation better to do this like that. The same implementation will work also for FlatList.
left only refactor it to reanimated,

import React, {createRef, useRef} from 'react';
import {StyleSheet, useWindowDimensions, View} from 'react-native';
import Animated from 'react-native-reanimated';
import {NativeViewGestureHandler, PanGestureHandler, State, TapGestureHandler} from "react-native-gesture-handler";

const SNAP_ONE = 350;
const SNAP_TWO =  650;

export default function ScrollablePanGestureContainer({snapPoints = [SNAP_ONE , SNAP_TWO]}) {
    const dimensions = useWindowDimensions();

    const END = snapPoints[1];
    const START = snapPoints[0];

    // Refs for our components
    const scroll = createRef();
    const tapHandler = createRef();
    const panHandler = createRef();
    // Last snap state which will helps us to make smooth responder to scrollview animation
    const [state, setState] = React.useState({lastSnap: END});
    // Extracted animated values which we will use for calculations
    let lastScrollYValue = 0;
    // Animated values
    const lastScrollY = useRef(new Animated.Value(0))?.current;
    const dragY = useRef(new Animated.Value(0))?.current;
    const translateYOffset = useRef(new Animated.Value(END))?.current;


    // Prepared events
    const onRegisterLastScroll = Animated.event(
        [{nativeEvent: {contentOffset: {y: lastScrollY}}}],
        {
            // I animate header height so I disabled native driver
            useNativeDriver: false,
            listener: (event, gestureState) => {
                // Also we should remember Y value for future calculation
                lastScrollYValue = event.nativeEvent.contentOffset.y
            }
        }
    );

    const onGestureEvent = Animated.event(
        [{nativeEvent: {translationY: dragY}}],
        {useNativeDriver: true}
    );

    // Multiply
    const reverseLastScrollY = Animated.multiply(
        new Animated.Value(-1),
        lastScrollY,
    );

    // Calculated translateY value
    const translateY= Animated.add(
        translateYOffset,
        Animated.add(dragY, reverseLastScrollY)
    ).interpolate({
        inputRange: [SNAP_ONE, SNAP_TWO],
        outputRange: [SNAP_ONE, SNAP_TWO],
        extrapolate: "clamp"
    });

    // Handle handler state change
    const onHandlerStateChange = ({nativeEvent}) => {
        if (nativeEvent.oldState === State.ACTIVE) {
            let {velocityY, translationY} = nativeEvent;
            translationY -= lastScrollYValue;
            const dragToss = 0.05;
            const endOffsetY =
                state.lastSnap + translationY + dragToss * velocityY;

            let destSnapPoint = snapPoints[0];
            for (const snapPoint of snapPoints) {
                const distFromSnap = Math.abs(snapPoint - endOffsetY);
                if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
                    destSnapPoint = snapPoint;
                }
            }
            setState({lastSnap: destSnapPoint});
            translateYOffset.extractOffset();
            translateYOffset.setValue(translationY);
            translateYOffset.flattenOffset();
            dragY.setValue(0);
            Animated.spring(translateYOffset, {
                velocity: velocityY,
                tension: 68,
                friction: 12,
                toValue: destSnapPoint,
                useNativeDriver: true,
            }).start();
        }
    };

    return (
        <TapGestureHandler
            maxDurationMs={100000}
            ref={tapHandler}
            // Without maxDeltaY everything fails
            maxDeltaY={state.lastSnap - snapPoints[0]}>
          <View style={{
                        flex: 1,      
                    }} pointerEvents="box-none">
                    <Animated.View
                        style={[
                            StyleSheet.absoluteFillObject,
                            {
                                backgroundColor: 'white',
                                borderRadius: 20,
                                height: translateY,
                            },
                        ]}>
                        <PanGestureHandler
                            ref={panHandler}
                            simultaneousHandlers={[scroll, tapHandler]}
                            shouldCancelWhenOutside={false}
                            onGestureEvent={onGestureEvent}
                            enableTrackpadTwoFingerGesture
                            onHandlerStateChange={onHandlerStateChange}>
                            <Animated.View style={styles.container}>
                                <NativeViewGestureHandler
                                    ref={scroll}
                                    waitFor={tapHandler}
                                    simultaneousHandlers={panHandler}>
                                    <Animated.ScrollView
                                        style={{marginBottom: snapPoints[0]}}
                                        bounces={false}
                                        onScrollBeginDrag={onRegisterLastScroll}
                                        scrollEventThrottle={1}>
                                            {/* Your items here */}
                                    </Animated.ScrollView>
                                </NativeViewGestureHandler>
                            </Animated.View>
                        </PanGestureHandler>
                    </Animated.View>
                </View>
        </TapGestureHandler>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
        height: HEADER_HEIGHT,
    },
});