I have a Pressable, which “opens” up using an Animated View, and in this view I want to show a FlatList. I use this component in two files, club.tsx and PbTable.tsx. In PbTable.tsx this works flawlessly, but on the one rendered in club.tsx I can’t scroll. It is probably happening because of a parent, but I just can’t find where.

club.tsx:

<Page>
      <View
        style={{
          minHeight: "83%",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <SchemaComponent colorScheme={colorScheme} schema={schema} />
        <WedstrijdenComponent
          colorScheme={colorScheme}
          wedstrijden={wedstrijden}
        />
        <ClubrecordComponent
          clubrecords={clubrecords}
          colorScheme={colorScheme}
        />
      </View>
    </Page>

ClubrecordComponent:

<Pressable
      style={{
        width: Dimensions.get("window").width,
        borderColor: "#ef8b22",
        borderWidth: 1,
        borderRadius: 6,
        paddingVertical: 10,
        paddingHorizontal: 20,
        overflow: "hidden",
        marginVertical: 10,
      }}
      onPress={toggleExpand}
    >
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <Text
          style={{ ...textColor(colorScheme), textTransform: "capitalize" }}
        >
          Clubrecords
        </Text>
        <Animated.View style={{ transform: [{ rotate }] }}>
          <FontAwesome
            name="arrow-right"
            size={15}
            color={colorScheme === "dark" ? "#fff" : "#000"}
          />
        </Animated.View>
      </View>
      <Animated.View
        style={{
          maxHeight: heightAnim.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1000],
          }),
          opacity: heightAnim,
          marginTop: heightAnim.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 10],
          }),
        }}
      >
        <FlatList
          data={clubrecords.male}
          style={{ height: 350 }}
          scrollEnabled={true}
          renderItem={({ item, index }) => (
            <Text key={index} style={textColor(colorScheme)}>
              {item.distance} {item.event}
            </Text>
          )}
          onScroll={() => console.log("scrolling")}
        />
      </Animated.View>
    </Pressable>

PbTable:

<Fragment>
      <QuickViewModal
        athleteData={athleteData}
        colorScheme={colorScheme}
        loading={loading}
        onPressChoose={async () => {
          setLoading(true);
          const id =
            SwimrakingEventId[title.distance as keyof typeof SwimrakingEventId];
          const data = await getHistory(id, athleteData.id, title.poolSize);
          setHistoryModalShown(id);
          setSData(data);
          setQuickViewModalShown(false);
          setLoading(false);
        }}
        onPressClose={() => setQuickViewModalShown(false)}
        onRequestClose={() => setQuickViewModalShown(false)}
        title={title}
        visible={quickViewModalShown}
      />
      <HistoryModal
        colorScheme={colorScheme}
        onPressClose={() => setHistoryModalShown(SwimrakingEventId.None)}
        sData={sData}
        title={title}
        visible={historyModalShown !== SwimrakingEventId.None}
        onRequestClose={() => {
          setHistoryModalShown(SwimrakingEventId.None);
          setQuickViewModalShown(true);
        }}
      />
      <View
        style={{
          minHeight: "83%",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        {Object.keys(strokes).map((stroke) => (
          <StrokeComponent
            stroke={stroke as keyof typeof Strokes}
            strokeData={strokes[stroke as keyof typeof Strokes]}
            key={stroke}
            onItemPress={(item) => {
              setTitle(item.title);
              setQuickViewModalShown(true);
            }}
          />
        ))}
      </View>
    </Fragment>

StrokeComponent:

<Pressable
      style={{
        width: Dimensions.get("window").width,
        borderColor: "#ef8b22",
        borderWidth: 1,
        borderRadius: 6,
        paddingVertical: 10,
        paddingHorizontal: 20,
        overflow: "hidden",
        marginVertical: 10,
      }}
      onPress={toggleExpand}
    >
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <Text
          style={{ ...textColor(colorScheme), textTransform: "capitalize" }}
        >
          {stroke}
        </Text>
        <Animated.View style={{ transform: [{ rotate }] }}>
          <FontAwesome
            name="arrow-right"
            size={15}
            color={colorScheme === "dark" ? "#fff" : "#000"}
          />
        </Animated.View>
      </View>
      <Animated.View
        style={{
          maxHeight: heightAnim.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1000],
          }),
          opacity: heightAnim,
          marginTop: heightAnim.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 10],
          }),
        }}
      >
        <FlatList
          data={strokeData}
          style={{ height: 350 }}
          renderItem={({ item, index }) => (
            <Pressable
              key={index}
              style={{
                paddingHorizontal: 10,
                paddingVertical: 5,
                borderColor: "grey",
                borderWidth: 1,
                borderRadius: 6,
                marginVertical: 5,
                flexDirection: "row",
              }}
              onPress={(e) => (onItemPress ? onItemPress(item, e) : null)}
            >
              <Text
                style={{
                  ...textColor(colorScheme),
                  flex: 1,
                  textAlign: "left",
                }}
              >
                {item.title.distance}
              </Text>
              <Text
                style={{
                  ...textColor(colorScheme),
                  flex: 1,
                  textAlign: "center",
                }}
              >
                {item.title.time}
              </Text>
              <Text
                style={{
                  ...textColor(colorScheme),
                  flex: 1,
                  textAlign: "right",
                }}
              >
                {item.title.poolSize}
              </Text>
            </Pressable>
          )}
        />
      </Animated.View>
    </Pressable>

Implementation of PbTable:

<Page>
{//... other component, next to the PbTable}
{activeTab === Tabs.Pbs && (
            <PbTable
              top={0}
              data={athleteData.pbs.map((pb) => {
                return {
                  key: `${pb.event} - ${pb.poolSize} - ${pb.date}`,
                  title: {
                    distance: pb.event,
                    poolSize: pb.poolSize,
                    time: pb.time,
                  },
                  id: SwimrakingEventId[
                    pb.event as keyof typeof SwimrakingEventId
                  ],
                };
              })}
              athleteData={athleteData}
            />
          )}