Help! Animated View Flatlist does not scroll

[alakdam07]

I am practicing React native Reanimated and trying to understand how it works. I am trying to make custom React native bottom sheet like this React-native-bottom-sheet. For Animation I have used react-native-reanimated package. I follow this tutorial to create custom bottom sheet. I modified the code little bit. I passed react native children inside the bottom sheet. Then I import in the parent component.

I fetched one data from open api. And inside the bottom sheet i used React native FlatList and render the data. The problem is The flat-list does not scroll inside the bottom sheet. With IOS Simulator and Android Emulator behave totally different
And I don't know how to fix this issue.

I share my code in Expo-snacks

This is the custom Animated bottom sheet

import React from "react";
import {
  SafeAreaView,
  StyleSheet,
  Text,
  useWindowDimensions,
  TouchableOpacity,
  View,
} from "react-native";
import Animated, {
  Extrapolate,
  interpolate,
  useAnimatedGestureHandler,
  useAnimatedStyle,
  withTiming,
} from "react-native-reanimated";
import { PanGestureHandler } from "react-native-gesture-handler";

interface Props {
  panY: number;
  children: React.ReactNode;
}
export default function BottomSheet({ panY, children }: Props) {
  const { height } = useWindowDimensions();

  const gestureHandler = useAnimatedGestureHandler(
    {
      onStart(_, context) {
        context.startY = panY.value;
      },
      onActive(event, context) {
        panY.value = context.startY + event.translationY;
      },
      onEnd() {
        if (panY.value < -height * 0.4) {
          panY.value = withTiming(-(height * 0.6));
        } else {
          panY.value = withTiming(0);
        }
      },
    },
    [height]
  );

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: interpolate(panY.value, [-1, 0], [-1, 0], {
            extrapolateLeft: Extrapolate.EXTEND,
            extrapolateRight: Extrapolate.CLAMP,
          }),
        },
      ],
    };
  });

  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View
        style={[styles.container, { top: height * 0.7 }, animatedStyle]}
      >
        {children}
      </Animated.View>
    </PanGestureHandler>
  );
}

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: "white",
    shadowColor: "black",
    shadowOffset: {
      height: -6,
      width: 0,
    },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    borderTopEndRadius: 15,
    borderTopLeftRadius: 15,
  },
});

This is the parent component I am importing the Bottom sheet

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  useWindowDimensions,
  SafeAreaView,
  FlatList,
    StatusBar,
} from "react-native";
import styled from "styled-components/native";
import MapView from "react-native-maps";

import BottomSheet from "./ActionSheet";
import BottomButton from "./BottomButton";
import SafeAreaWrapper from "./SafeAreaWrapper";
import { useSharedValue } from "react-native-reanimated";

const { width, height } = Dimensions.get("screen");

const api = "https://jsonplaceholder.typicode.com/users";

const pokeMonApi = "https://pokeapi.co/api/v2/pokemon?limit=50";
const urlImage = "https://pokeres.bastionbot.org/images/pokemon/";

const initialRegion = {
  latitudeDelta: 15,
  longitudeDelta: 15,
  latitude: 60.1098678,
  longitude: 24.7385084,
};

export default function App() {
  const { width, height } = useWindowDimensions();

  const [data, setData] = React.useState([]);

  const updateState = async () => {
    const response = await fetch(api);
    const data = await response.json();
    try {
      const response = await fetch(pokeMonApi);
      const data = await response.json();
      setData(data.results);
    } catch (error) {
      console.log("failed to catch", error);
    }
  };

  React.useEffect(() => {
    updateState();
  }, []);

  const y = useSharedValue(0);
  return (
    <SafeAreaWrapper>
      <View style={styles.container}>
        <View style={styles.container}>
          <MapView style={styles.mapStyle} initialRegion={initialRegion} />
        </View>
        <BottomSheet panY={y}>
          <View style={styles.content}>
            <View style={{ flex: 1 }}>
              <Text style={{ fontSize: 24, fontWeight: "bold" }}>
                First Button
              </Text>
              {data && data === undefined ? (
                <Text>loading</Text>
              ) : (
                <FlatList
                  data={data}
                  scrollEnabled
                  renderItem={({ item }) => {
                    return (
                      <Item>
                        <TextName>{item.name}</TextName>
                      </Item>
                    );
                  }}
                  keyExtractor={(item) => `key-${item.name}`}
                />
              )}
            </View>
            <View style={styles.fakeContent} />
          </View>
        </BottomSheet>
        <ButtonContainer>
          <BottomButton
            title={"Save"}
            onPress={() => {
              console.log("jjj");
            }}
          />
        </ButtonContainer>
      </View>
    </SafeAreaWrapper>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mapStyle: {
    width: width,
    height: Dimensions.get("window").height,
  },
  wrapper: {
    flex: 1,
  },
  content: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontWeight: "400",
    fontSize: 22,
  },
  fakeContent: {
    flex: 1,
    height: 1000,
  },
});

const ButtonContainer = styled.View`
  background-color: #fff;
`;

const Item = styled.View`
  padding: 4px;
  justify-content: center;
  align-items: center;
  background-color: #8b2727;
  margin-top: 8px;
  margin-horizontal: 5px;
  shadow-color: #000;
  shadow-opacity: 0.25;
  shadow-radius: 3.84px;
`;
const TextName = styled.Text`
  color: orange;
  font-weight: bold;
`;

Ps: The code is bit messy. I am shifting my styleSheet to styled-component