Horizontal flatlist not working properly

[NiccoloCase]

In my layout, I have to use horizontal flatlists and, before implementing the library, I have done some tests by modifying the default example. I noticed that when the number of items in the flatlist exceeds 23, in addition to experiencing low performance, the following tab becomes completely blank.

import React from "react";
import { View, StyleSheet, Text } from "react-native";
import { Tabs } from "react-native-collapsible-tab-view";
import { FlatList } from "react-native-gesture-handler";

const HEADER_HEIGHT = 250;

const DATA = [0, 1, 2, 3, 4];
const identity = (v) => v + "";

const Header = () => {
  return <View style={styles.header} />;
};

const Example = () => {
  const renderItem = React.useCallback(({ index }) => {
    return (
      <View style={[styles.box, index % 2 === 0 ? styles.boxB : styles.boxA]} />
    );
  }, []);

  return (
    <Tabs.Container renderHeader={Header} headerHeight={HEADER_HEIGHT}>
      <Tabs.Tab name="A">
        <Tabs.FlatList
          data={DATA}
          renderItem={renderItem}
          keyExtractor={identity}
        />
      </Tabs.Tab>
      <Tabs.Tab name="B">
        <Tabs.ScrollView>
          <Text>HI</Text>
          <FlatList
            horizontal
            keyExtractor={(_, i) => String(i)}
            data={new Array(24).fill(null)} // 23 works for me
            renderItem={() => (
              <View
                style={{
                  width: 200,
                  aspectRatio: 1,
                  backgroundColor: "red",
                  marginRight: 20,
                }}
              />
            )}
          />
        </Tabs.ScrollView>
      </Tabs.Tab>
      <Tabs.Tab name="C"> // The content of this tab is not shown when the number of elements in the flatlist grows too much
        <Tabs.ScrollView>
          <Text>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis,
            vel repellendus. Distinctio deserunt, temporibus excepturi quam
            fugit est facilis porro?
          </Text>
        </Tabs.ScrollView>
      </Tabs.Tab>
    </Tabs.Container>
  );
};

const styles = StyleSheet.create({
  box: {
    height: 250,
    width: "100%",
  },
  boxA: {
    backgroundColor: "white",
  },
  boxB: {
    backgroundColor: "#D8D8D8",
  },
  header: {
    height: HEADER_HEIGHT,
    width: "100%",
    backgroundColor: "#2196f3",
  },
});

export default Example;

This for me is an essential feature, is there any way around the problem? Thanks.