Add new sample with lots of items

Author: naqvitalha

fixture/react-native/src/ExamplesScreen.tsx

@@ -91,6 +91,10 @@ export const ExamplesScreen = () => {
       title: "Showcase App",
       destination: "ShowcaseApp",
     },
+    {
+      title: "Lot of Items",
+      destination: "LotOfItems",
+    },
   ];
   return (
     <>

fixture/react-native/src/NavigationTree.tsx

@@ -28,6 +28,7 @@ import MovieList from "./MovieList";
 import Carousel from "./Carousel";
 import { LayoutOptions } from "./LayoutOptions";
 import ShowcaseApp from "./ShowcaseApp";
+import LotOfItems from "./lot-of-items/LotOfItems";
 
 const Stack = createStackNavigator<RootStackParamList>();
 
@@ -98,6 +99,11 @@ const NavigationTree = () => {
             component={ShowcaseApp}
             options={{ title: "Showcase App" }}
           />
+          <Stack.Screen
+            name="LotOfItems"
+            component={LotOfItems}
+            options={{ title: "Lot of Items" }}
+          />
         </Stack.Group>
         <Stack.Screen name="Masonry" component={Masonry} />
         <Stack.Screen name="ComplexMasonry" component={ComplexMasonry} />

fixture/react-native/src/constants.ts

@@ -32,4 +32,5 @@ export type RootStackParamList = {
   Carousel: undefined;
   LayoutOptions: undefined;
   ShowcaseApp: undefined;
+  LotOfItems: undefined;
 };

fixture/react-native/src/lot-of-items/LotOfItems.tsx

@@ -0,0 +1,38 @@
+import { View, StyleSheet } from "react-native";
+import { FlashList } from "@shopify/flash-list";
+import React from "react";
+
+import LotOfItemsHorizontalList from "./LotOfItemsHorizontalList";
+
+interface Item {
+  id: number;
+  title: string;
+}
+
+const DATA = [...Array(100).keys()].map((i) => {
+  return { id: i, title: `Bloc ${i}` };
+});
+
+function ItemList({ item }: { item: Item }) {
+  return (
+    <View>
+      <LotOfItemsHorizontalList />
+    </View>
+  );
+}
+
+const renderItem = ({ item }: { item: Item }) => {
+  return <ItemList item={item} />;
+};
+
+export default function Reminders() {
+  return (
+    <FlashList data={DATA} renderItem={renderItem} style={styles.container} />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#ecf0f1",
+  },
+});

fixture/react-native/src/lot-of-items/LotOfItemsHorizontalList.tsx

@@ -0,0 +1,39 @@
+import { View, Text, Pressable, StyleSheet } from "react-native";
+import { FlashList } from "@shopify/flash-list";
+import React from "react";
+
+interface Item {
+  id: number;
+  title: string;
+}
+
+const DATA = [...Array(30).keys()].map((i) => {
+  return { id: i, title: `Item ${i}` };
+});
+
+function Item({ item }: { item: Item }) {
+  return (
+    <Pressable>
+      {({ pressed }) => (
+        <View style={styles.item}>
+          <Text>{item.title}</Text>
+          {pressed ? <Text>pressed</Text> : null}
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+const renderItem = ({ item }: { item: Item }) => {
+  return <Item item={item} />;
+};
+
+export default function LotOfItemsHorizontalList() {
+  return <FlashList data={DATA} horizontal renderItem={renderItem} />;
+}
+
+const styles = StyleSheet.create({
+  item: {
+    width: 50,
+  },
+});