Can someone explain how to use ScrollView inside Pan Gesture?

[AuroPick]

Hi. I am really having trouble with ScrollView inside Pan Gesture.

I want to achive Instagram like shuffle

This is from Instagram

WhatsApp.Video.2022-01-30.at.15.13.12.mp4

This is mine

p6qnZer45a.mp4

It works if there is not enough content for scroll. Bu when can scrollable pan gesture not working vertically

This is my code

import React, { useEffect } from 'react'

import { useNavigation, useRoute } from '@react-navigation/core'
import {
    Dimensions, StatusBar, StyleSheet, Text, View, Image, Pressable
} from 'react-native'
import {
    Gesture, GestureDetector, ScrollView
} from 'react-native-gesture-handler'
import Animated, {
    Extrapolate,
    interpolate,
    runOnJS,
    useAnimatedStyle,
    useSharedValue,
    withTiming
} from 'react-native-reanimated'
import { snapPoint, useVector } from 'react-native-redash'

const snapX = (width * 3) / 5
const snapY = height / 4

export const UserProfileModal = () => {
    const navigation = useNavigation()
    const { params: { match } } = useRoute()

    const borderRadius = useSharedValue(0)
    const isGestureActive = useSharedValue(false)
    const translation = useVector()

    useEffect(() => {
        const unsubscribe = navigation.addListener('focus', () => {
            StatusBar.setBarStyle('light-content')
            StatusBar.setBackgroundColor('transparent')
        })

        return  unsubscribe
    }, [])

    const panGesture = Gesture.Pan()
        .onStart(() => {
            'worklet'

            isGestureActive.value = true
            borderRadius.value = 10
        })
        .onUpdate(({ translationX, translationY }) => {
            'worklet'

            translation.x.value = translationX
            translation.y.value = translationY
        })
        .onEnd(({
            translationX, translationY, velocityX, velocityY
        }) => {
            'worklet'

            const snapBack = snapPoint(translationY, velocityY, [0, snapY]) === snapY
            || snapPoint(translationX, velocityX, [0, snapX]) === snapX
            || snapPoint(translationX, velocityX, [0, -snapX]) === -snapX

            if (snapBack) {
                runOnJS(navigation.goBack)()
            } else {
                isGestureActive.value = false
                borderRadius.value = 0
                translation.x.value = withTiming(0, DEFAULT_TIMING_CONFIG)
                translation.y.value = withTiming(0, DEFAULT_TIMING_CONFIG)
            }
        })

    const style = useAnimatedStyle(() => {
        const scaleY = interpolate(
            translation.y.value,
            [0, height],
            [1, 0.5],
            Extrapolate.CLAMP
        )

        const scaleX = interpolate(
            translation.x.value,
            [0, width],
            [1, 0.8],
            Extrapolate.CLAMP
        )

        return {
            flex: 1,
            backgroundColor: colors.WHITE,
            overflow: 'hidden',
            borderRadius: withTiming(borderRadius.value),
            transform: [
                { translateX: translation.x.value },
                { translateY: translation.y.value },
                { scale: scaleY },
                { scale: scaleX }
            ]
        }
    })

    return (
        <Animated.View style={style}>
            <GestureDetector gesture={panGesture}>
                <ScrollView
                    bounces={false}>
                    {
                        renderTop()
                    }
                    {
                        renderImage()
                    }
                    {
                        renderSheet()
                    }
                </ScrollView>
            </GestureDetector>
            {
                renderBottomButtons()
            }
        </Animated.View>
    )
}

I tried bottom sheet example but not working. If i try to import SrollView from reanimated or react-native. Scroll not working.

[GeorgeHop]

Hi! Check please this thread #2222 I added ready to use code using RNGH and Animated and refactoring it to reanimated now. Should help you to create your animation, because I want to achieve something like that also.