Horizontal ScrollView in Vertical ScrollView in React Native

Question

I have a interesing issue. So,

I have a component in which I have a vertical scrollview. In this scrollview I have a card component where user informations hold and at the bottom I have 3 tabs and all of them are different components.

One of the tabs called User Feeds. In this tab I have a FlatList where I render thhe user's feeds with a spesific component that I made for different type of feeds like text feed or image feed and so on...

One of the feed type is with multiple images like on Instagram. I have more than one images in the card. I wanted to have excatly the same thing that Instagram has, swipeable functionality and also zoomable images.

I tried to achieve this goal with watching "can It be done In react native" series in Youtube.

Here is the links of the videos:

for zoom functionalityInstagram pinch zoom

For swipe functionality Swiper images

So I combined these 2 videos and achied some results.

BUT, the problem is In the second video he makes a Animated.View for pan events for the swiper. But somehow I cannot scroll down If I tap and try to scroll to down. I mean I can swipe to the left or to the right but cannot scroll to down or up If I grap from the Image.

HERE IS MY ENTIRE COMPONENT.

import React from "react";
import { StyleSheet, View } from "react-native";
import { PanGestureHandler, State } from "react-native-gesture-handler";
import Animated, {  add,    clockRunning,
    cond,
    debug,
    divide,
    eq,
    floor,
    not,
    set,
    useCode,
} from "react-native-reanimated";
import {
    snapPoint,
    timing,
    useClock,
    usePanGestureHandler,
    useValue,
} from "react-native-redash";
import { height, width } from "../../../../../assets/styles/main";
import SingleImage from "./SingleImage";

   const MultipleImages = ({ data, content, app }) => {

   const styles = StyleSheet.create({
   container: {
            flex: 1,
            backgroundColor: "black",
        },
        pictures: {
            width: width * data.photo.length,
            height,
            flexDirection: "row",
        },
        picture: {
            width,
            height,
            overflow: "hidden",
        },
        image: {
            ...StyleSheet.absoluteFillObject,
            width: undefined,
            height: undefined,
        },
    });

const clock = useClock();
const index = useValue(0);
const offsetX = useValue(0);
const translateX = useValue(0);
const {
    gestureHandler,
    state,
    velocity,
    translation,
} = usePanGestureHandler();
const snapPoints = data.photo.map((_, i) => i * -width);
const to = snapPoint(translateX, velocity.x, snapPoints);

useCode(
    () => [
        cond(eq(state, State.ACTIVE), [
            set(translateX, add(offsetX, translation.x)),
        ]),
        cond(eq(state, State.END), [
            set(translateX, timing({ clock, from: translateX, to })),
            set(offsetX, translateX),
            cond(not(clockRunning(clock)), [
                set(index, floor(divide(translateX, -width))),
                debug("index", index),
            ]),
        ]),
    ],
    []
);
return (
    <View style={styles.container}>
        <PanGestureHandler {...gestureHandler}>
            <Animated.View style={{ width: width, height: width }}>
                <Animated.View
                    style={[styles.pictures, { transform: [{ translateX }] }]}
                >
                    {data.photo.map((item) => (
                        <SingleImage
                            app={app}
                            postId={data._id}
                            photo={item}
                            content={content}
                        />
                    ))}
                </Animated.View>
            </Animated.View>
        </PanGestureHandler>
    </View>
);
};

export default MultipleImages;