Change pan responder from scrollview to parent

Question

I'm trying to make a drawer similar to the one Apple uses for their native map app. When the drawer is open, the user can scroll within the drawer. However, if the scroll viewer has reached the top of its contents, the drawer begins to close. I can't seem to replicate this functionality.

The accepted answer on this question shows the exact functionality im trying to achieve but it doesn't seem to be working. The author of the answer also wrote that some code had to be changed in an android file, but I'm trying to resolve this issue for the iOS build as well.

const Drawer = () => {
    const pan = useRef(new Animated.ValueXY({x: 0, y: 750})).current;
    const [isScrollAtTop, setIsScrollAtTop] = useState(true);
    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
    
    const full = 50;
    const half = 550;
    const closed = 750;
    
    const flattenAndSpring = (gestureState) => {
        console.log(isDrawerOpen);
        pan.flattenOffset();
        if (625 <= pan.y._value )
        {
            if (gestureState.vy < -3) {
                setIsDrawerOpen(true);
                springToPos(full);
            } else if (gestureState.vy < -.5) {
                setIsDrawerOpen(false);
                springToPos(half);
            } else {
                setIsDrawerOpen(false);
                springToPos(closed)
            }
        }
        else if (425 <= pan.y._value < 625 ) {
            if (gestureState.vy > .5) {
                setIsDrawerOpen(false);
                springToPos(closed)
            } else if (gestureState.vy < -.5) {
                setIsDrawerOpen(true);
                springToPos(full)
            } else {
                setIsDrawerOpen(false);
                springToPos(half)
            }
        }
        else {
            if (gestureState.vy > 5) {
                setIsDrawerOpen(false);
                springToPos(closed);
            } else if (gestureState.vy > .5) {
                setIsDrawerOpen(false);
                springToPos(half);
            } else {
                setIsDrawerOpen(true);
                springToPos(full)
            }
        }
    }

    const springToPos = (pos) => {
        Animated.spring(
            pan, // Auto-multiplexed
            { toValue: { x: 0, y: pos}, useNativeDriver: false } 
        ).start();
    }

    const drawerShouldMove = (gestureState) => {
        return !isDrawerOpen || (isDrawerOpen && gestureState.dy > 0 && isScrollAtTop) 
    }
    const DrawerContainer = ({ children }) => {
        const panResponder = useRef(
            PanResponder.create({
                onMoveShouldSetPanResponderCapture: (_, gestureState) => drawerShouldMove(gestureState),
                onMoveShouldSetPanResponder: (_, gestureState) => drawerShouldMove(gestureState),
                onPanResponderGrant: () => {
                    console.log("DrawerContainer listening")
                    pan.setOffset({
                        y: pan.y._value,
                    });
                },
                onPanResponderMove: (_, gestureState) => {
                    if (isDrawerOpen && gestureState.dy < 0) {
                        return
                    }
                    pan.y.setValue(gestureState.dy)
                },
                onPanResponderRelease: (_, gestureState) => {
                    flattenAndSpring(gestureState);
                },
            })
            ).current;
        return (
            <Animated.View
            style= {{transform: [{ translateY: pan.y }] }}
            {...panResponder.panHandlers}>
            {children}
            </Animated.View>
        );
    };
       

    const handleScroll = (event) => {
        if ( event.nativeEvent.contentOffset.y <= 0 ) {
            setIsScrollAtTop(true);
        } else {
            setIsScrollAtTop(false);
        }
    };


    const PannedScroll = ({ children }) => {
        const panResponder = useRef(
            PanResponder.create({
                onMoveShouldSetResponder: () => true,
                onPanResponderGrant: () => {console.log("PannedScroll listening")},
                onPanResponderTerminationRequest: () => true,

            })
            ).current;
        return (
            <ScrollViewer   bounces={false} 
                            alwaysBounceVertical={false} 
                            onScroll={handleScroll} 
                            scrollEventThrottle={16}
                            {...panResponder.panHandlers}>
                            {children}
            </ScrollViewer>
        );
    };


    return (
        <DrawerContainer> 
            <Handle/>
            <View style={{marginTop: '5%', height: "95%"}}>
                <PannedScroll>
                    <Text style={styles.text}>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                        aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                        culpa qui officia deserunt mollit anim id est laborum.
                    </Text>
                </PannedScroll>
            </View>
        </DrawerContainer>
    )
}

export default Drawer

Here's a snack for what I have working: https://snack.expo.dev/@maximacademic/apple-esquedrawer