Add a basic Fetchable example

Author: Braden1996

example/app/(tabs)/_layout.tsx

@@ -31,6 +31,15 @@ export default function TabLayout() {
                     ),
                 }}
             />
+            <Tabs.Screen
+                name="fetchable"
+                options={{
+                    title: "Fetchable",
+                    tabBarIcon: ({color, size}) => (
+                        <FontAwesome size={size} name="code" color={color} />
+                    ),
+                }}
+            />
         </Tabs>
     )
 }

example/app/(tabs)/fetchable.tsx

@@ -0,0 +1,94 @@
+import * as React from "react"
+import {StyleSheet, View} from "react-native"
+import {useSafeAreaInsets} from "react-native-safe-area-context"
+
+import {ReactDataList} from "@attio/react-data-list"
+
+import {Box} from "../../src/components/design-system/box"
+import {Button} from "../../src/components/design-system/button"
+import {LIST_HORIZONTAL_MARGIN} from "../../src/components/design-system/constants"
+import {ListHeaderDataListRow} from "../../src/components/features/list-header/list-header-data-list-row"
+import {LoadingListItemDataListRow} from "../../src/components/features/loading-list-item/loading-list-item-data-list-row"
+import MiddleEarthHobbitCompanyDataListRows from "../../src/components/features/middle-earth-hobbit-company-data-list/middle-earth-hobbit-company-data-list-rows"
+import {FlashListRenderer} from "../../src/data-list/flashlist-renderer"
+
+function ErrorOnRenderCheck() {
+    return (
+        <View
+            onLayout={() => {
+                throw new Error("This never happens as we evaluate descriptors before first paint.")
+            }}
+        />
+    )
+}
+
+export default function FetchableScreen() {
+    const [reloadKey, setReloadKey] = React.useState(1)
+
+    // Jumble fellowship to test recreating list.
+    const reload = () => {
+        setReloadKey((k) => k + 1)
+    }
+
+    const insets = useSafeAreaInsets()
+
+    return (
+        <ReactDataList.Fetchable
+            renderer={
+                <FlashListRenderer
+                    contentContainerStyle={[
+                        styles.contentContainer,
+                        {paddingTop: insets.top, paddingBottom: insets.bottom},
+                    ]}
+                    ListHeaderComponent={
+                        <Box
+                            flexDirection="column"
+                            gap="4"
+                            marginHorizontal={`${LIST_HORIZONTAL_MARGIN}`}
+                            marginBottom="16"
+                            flexShrink={1}
+                        >
+                            <Button onPress={reload} title="Reload" />
+                        </Box>
+                    }
+                />
+            }
+            renderPendingRows={
+                <>
+                    <ListHeaderDataListRow title="Thorin and Company" />
+                    <LoadingListItemDataListRow />
+                    <LoadingListItemDataListRow />
+                    <LoadingListItemDataListRow />
+                    <LoadingListItemDataListRow />
+                    <LoadingListItemDataListRow />
+                    <LoadingListItemDataListRow />
+                </>
+            }
+            renderEmpty={() => (
+                <View style={styles.alert}>
+                    <ErrorOnRenderCheck />
+                </View>
+            )}
+        >
+            <ListHeaderDataListRow title="Thorin and Company" />
+            <MiddleEarthHobbitCompanyDataListRows key={reloadKey} />
+        </ReactDataList.Fetchable>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    button: {
+        flex: 1,
+    },
+    contentContainer: {
+        marginBottom: 64,
+    },
+    alert: {
+        width: "100%",
+        aspectRatio: 1,
+        backgroundColor: "red",
+    },
+})

example/src/components/features/middle-earth-hobbit-company-data-list/middle-earth-hobbit-company-data-list-rows.tsx

@@ -2,9 +2,9 @@ import {CharacterListItemDataListRow} from "../character-list-item/character-lis
 import {useMiddleEarthHobbitCompanyData} from "./use-middle-earth-hobbit-company-data"
 
 export default function MiddleEarthHobbitCompanyDataListRows() {
-    const places = useMiddleEarthHobbitCompanyData()
+    const characters = useMiddleEarthHobbitCompanyData()
 
-    return places.map((p) => (
-        <CharacterListItemDataListRow key={p.name} name={p.name} race={p.race} url={p.url} />
+    return characters.map((c) => (
+        <CharacterListItemDataListRow key={c.name} name={c.name} race={c.race} url={c.url} />
     ))
 }