infinitered · SeanBarker182 · Aug 7, 2025 · Aug 6, 2025 · Aug 6, 2025 · Aug 6, 2025
diff --git a/README.md b/README.md
@@ -62,7 +62,6 @@ Nothing makes it into Ignite unless it's been proven on projects that Infinite R
 | Jest                             | Test Runner          | v29     | Standard test runner for JS apps               |
 | date-fns                         | Date library         | v4      | Excellent date library                         |
 | react-native-keyboard-controller | Keyboard library     | v1      | Great keyboard manager library                 |
-| FlashList                        | FlatList replacement | v1      | A performant drop-in replacement for FlatList  |
 | react-native-edge-to-edge        | UI library           | v1      | Enables edge-to-edge in Android                |
 | Reactotron RN                    | Inspector/Debugger   | v5      | JS debugging                                   |
 | Maestro                          | Testing Framework    |         | Automate end-to-end UI testing                 |

diff --git a/boilerplate/app/components/ListView.tsx b/boilerplate/app/components/ListView.tsx
diff --git a/boilerplate/app/i18n/demo-ar.ts b/boilerplate/app/i18n/demo-ar.ts
@@ -241,7 +241,7 @@ export const demoAr: DemoTranslations = {
         nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
       },
       listIntegration: {
-        name: "دمج مع/ FlatList & FlashList",
+        name: "دمج مع/ FlatList",
         description: "يمكن دمج المكون بسهولة مع واجهة القائمة المفضلة لديك",
       },
       styling: {

diff --git a/boilerplate/app/i18n/demo-en.ts b/boilerplate/app/i18n/demo-en.ts
@@ -241,7 +241,7 @@ export const demoEn = {
         nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
       },
       listIntegration: {
-        name: "Integrating w/ FlatList & FlashList",
+        name: "Integrating w/ FlatList",
         description: "The component can be easily integrated with your favorite list interface.",
       },
       styling: {

diff --git a/boilerplate/app/i18n/demo-es.ts b/boilerplate/app/i18n/demo-es.ts
@@ -246,7 +246,7 @@ export const demoEs: DemoTranslations = {
         nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
       },
       listIntegration: {
-        name: "Integración con FlatList y FlashList",
+        name: "Integración con FlatList",
         description:
           "El componente puede ser fácilmente integrado con tu interfaz de lista preferida.",
       },

diff --git a/boilerplate/app/i18n/demo-fr.ts b/boilerplate/app/i18n/demo-fr.ts
@@ -247,7 +247,7 @@ export const demoFr: DemoTranslations = {
         nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
       },
       listIntegration: {
-        name: "Intégration avec FlatList & FlashList",
+        name: "Intégration avec FlatList",
         description:
           "Le composant peut être facilement intégré avec votre interface de liste préférée.",
       },

diff --git a/boilerplate/app/i18n/demo-hi.ts b/boilerplate/app/i18n/demo-hi.ts
@@ -246,7 +246,7 @@ export const demoHi: DemoTranslations = {
         nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
       },
       listIntegration: {
-        name: "FlatList और FlashList के साथ एकीकरण",
+        name: "FlatList के साथ एकीकरण",
         description:
           "कंपोनेंट को आसानी से आपके पसंदीदा सूची इंटरफेस के साथ एकीकृत किया जा सकता है।",
       },

diff --git a/boilerplate/app/i18n/demo-ja.ts b/boilerplate/app/i18n/demo-ja.ts
@@ -244,7 +244,7 @@ export const demoJa: DemoTranslations = {
         nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
       },
       listIntegration: {
-        name: "FlatList & FlashListに組みこむ場合",
+        name: "FlatList に組みこむ場合",
         description:
           "このコンポーネントはお好みのリスト系のコンポーネントへ容易に組み込むことができます。",
       },

diff --git a/boilerplate/app/i18n/demo-ko.ts b/boilerplate/app/i18n/demo-ko.ts
@@ -243,7 +243,7 @@ export const demoKo: DemoTranslations = {
         nestedChildren2: "또 다른 예제 문장, 중첩이 된 형태입니다.",
       },
       listIntegration: {
-        name: "FlatList 및 FlashList 통합",
+        name: "FlatList 통합",
         description: "이 컴포넌트는 선호하는 리스트 인터페이스와 쉽게 통합할 수 있습니다.",
       },
       styling: {

diff --git a/boilerplate/app/screens/DemoPodcastListScreen.tsx b/boilerplate/app/screens/DemoPodcastListScreen.tsx
@@ -2,6 +2,7 @@ import { ComponentType, FC, useCallback, useEffect, useMemo, useState } from "re
 import {
   AccessibilityProps,
   ActivityIndicator,
+  FlatList,
   Image,
   ImageSourcePropType,
   ImageStyle,
@@ -11,7 +12,6 @@ import {
   View,
   ViewStyle,
 } from "react-native"
-import { type ContentStyle } from "@shopify/flash-list"
 import Animated, {
   Extrapolation,
   interpolate,
@@ -24,7 +24,6 @@ import { Button, type ButtonAccessoryProps } from "@/components/Button"
 import { Card } from "@/components/Card"
 import { EmptyState } from "@/components/EmptyState"
 import { Icon } from "@/components/Icon"
-import { ListView } from "@/components/ListView"
 import { Screen } from "@/components/Screen"
 import { Text } from "@/components/Text"
 import { Switch } from "@/components/Toggle/Switch"
@@ -81,13 +80,13 @@ export const DemoPodcastListScreen: FC<DemoTabScreenProps<"DemoPodcastList">> =
 
   return (
     <Screen preset="fixed" safeAreaEdges={["top"]} contentContainerStyle={$styles.flex1}>
-      <ListView<EpisodeItem>
+      <FlatList<EpisodeItem>
         contentContainerStyle={themed([$styles.container, $listContentContainer])}
         data={episodesForList}
         extraData={totalEpisodes + totalFavorites}
         refreshing={refreshing}
-        estimatedItemSize={177}
         onRefresh={manualRefresh}
+        keyExtractor={(item) => item.guid}
         ListEmptyComponent={
           isLoading ? (
             <ActivityIndicator />
@@ -309,7 +308,7 @@ const EpisodeCard = ({
 }
 
 // #region Styles
-const $listContentContainer: ThemedStyle<ContentStyle> = ({ spacing }) => ({
+const $listContentContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   paddingHorizontal: spacing.lg,
   paddingTop: spacing.lg + spacing.xl,
   paddingBottom: spacing.lg,

diff --git a/boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx b/boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx
@@ -1,11 +1,18 @@
 import { FC, ReactElement, useCallback, useEffect, useRef, useState } from "react"
-import { Image, ImageStyle, Platform, SectionList, TextStyle, View, ViewStyle } from "react-native"
+import {
+  FlatList,
+  Image,
+  ImageStyle,
+  Platform,
+  SectionList,
+  TextStyle,
+  View,
+  ViewStyle,
+} from "react-native"
 import { Link, RouteProp, useRoute } from "@react-navigation/native"
-import { type ContentStyle } from "@shopify/flash-list"
 import { Drawer } from "react-native-drawer-layout"
 
 import { ListItem } from "@/components/ListItem"
-import { ListView, type ListViewRef } from "@/components/ListView"
 import { Screen } from "@/components/Screen"
 import { Text } from "@/components/Text"
 import { TxKeyPath, isRTL } from "@/i18n"
@@ -103,7 +110,7 @@ export const DemoShowroomScreen: FC<DemoTabScreenProps<"DemoShowroom">> =
     const [open, setOpen] = useState(false)
     const timeout = useRef<ReturnType<typeof setTimeout>>(null)
     const listRef = useRef<SectionList>(null)
-    const menuRef = useRef<ListViewRef<DemoListItem["item"]>>(null)
+    const menuRef = useRef<FlatList<DemoListItem["item"]>>(null)
     const route = useRoute<RouteProp<DemoTabParamList, "DemoShowroom">>()
     const params = route.params
 
@@ -195,10 +202,9 @@ export const DemoShowroomScreen: FC<DemoTabScreenProps<"DemoShowroom">> =
             <View style={themed($logoContainer)}>
               <Image source={logo} style={$logoImage} />
             </View>
-            <ListView<DemoListItem["item"]>
+            <FlatList<DemoListItem["item"]>
               ref={menuRef}
               contentContainerStyle={themed($listContentContainer)}
-              estimatedItemSize={250}
               data={Object.values(Demos).map((d) => ({
                 name: d.name,
                 useCases: d.data({ theme, themed }).map((u) => {
@@ -268,7 +274,7 @@ const $drawer: ThemedStyle<ViewStyle> = ({ colors }) => ({
   flex: 1,
 })
 
-const $listContentContainer: ThemedStyle<ContentStyle> = ({ spacing }) => ({
+const $listContentContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   paddingHorizontal: spacing.lg,
 })
 

diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/jsx-key */
 import { TextStyle, View, ViewStyle } from "react-native"
+import { FlatList } from "react-native-gesture-handler"
 
 import { Icon } from "@/components/Icon"
 import { ListItem } from "@/components/ListItem"
-import { ListView } from "@/components/ListView"
 import { Text } from "@/components/Text"
 import { translate } from "@/i18n/translate"
 import type { ThemedStyle } from "@/theme/types"
@@ -160,9 +160,9 @@ export const DemoListItem: Demo = {
       description="demoListItem:useCase.listIntegration.description"
     >
       <View style={themed($listStyle)}>
-        <ListView<string>
+        <FlatList<string>
           data={listData}
-          estimatedItemSize={59}
+          keyExtractor={(item, index) => `${item}-${index}`}
           renderItem={({ item, index }) => (
             <ListItem
               text={item}

diff --git a/boilerplate/package.json b/boilerplate/package.json
@@ -34,7 +34,6 @@
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
     "@react-navigation/native-stack": "^7.2.0",
-    "@shopify/flash-list": "1.8.1",
     "apisauce": "3.1.1",
     "date-fns": "^4.1.0",
     "expo": "^53.0.15",
@@ -90,12 +89,5 @@
   },
   "engines": {
     "node": ">=20.0.0"
-  },
-  "expo": {
-    "install": {
-      "exclude": [
-        "@shopify/flash-list"
-      ]
-    }
   }
 }
diff --git a/docs/README.md b/docs/README.md
@@ -66,7 +66,6 @@ Nothing makes it into Ignite unless it's been proven on projects that Infinite R
 | Jest                             | Test Runner          | v29     | Standard test runner for JS apps               |
 | date-fns                         | Date library         | v4      | Excellent date library                         |
 | react-native-keyboard-controller | Keyboard library     | v1      | Great keyboard manager library                 |
-| FlashList                        | FlatList replacement | v1      | A performant drop-in replacement for FlatList  |
 | react-native-edge-to-edge        | UI library           | v1      | Enables edge-to-edge in Android                |
 | Reactotron RN                    | Inspector/Debugger   | v5      | JS debugging                                   |
 | Maestro                          | Testing Framework    |         | Automate end-to-end UI testing                 |

diff --git a/docs/boilerplate/app/components/ListView.md b/docs/boilerplate/app/components/ListView.md
diff --git a/docs/boilerplate/app/components/Screen.md b/docs/boilerplate/app/components/Screen.md
@@ -91,7 +91,7 @@ The `preset` prop is an optional enum that applies to the outer `KeyboardAvoidin
 The predefined presets are:
 
 - `scroll` - A preset that applies a scroll behavior to the screen. This is useful for forms or other screens which require a keyboard.
-- `fixed` - A preset that applies a fixed behavior to the screen. i.e. The screen will not scroll. This is useful if you have a component such as a `FlashList` that has its own scrolling behavior.
+- `fixed` - A preset that applies a fixed behavior to the screen. i.e. The screen will not scroll. This is useful if you have a component such as a `FlatList` that has its own scrolling behavior.
 - `auto` - A preset that applies an automatic behavior to the screen. i.e. The screen will scroll if the content is larger than the screen, but not otherwise.
 
 ```tsx