diff --git a/README.md b/README.md index 26565ee3a..4fd25576f 100644 --- 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 deleted file mode 100644 index aeb9ffe93..000000000 --- a/boilerplate/app/components/ListView.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { ForwardedRef, forwardRef, PropsWithoutRef, ReactElement, RefObject } from "react" -import { FlatList } from "react-native" -import { FlashList, FlashListProps } from "@shopify/flash-list" - -import { isRTL } from "@/i18n" - -export type ListViewRef = FlashList | FlatList - -export type ListViewProps = PropsWithoutRef> - -/** - * This is a Higher Order Component meant to ease the pain of using @shopify/flash-list - * when there is a chance that a user would have their device language set to an - * RTL language like Arabic or Persian. This component will use react-native's - * FlatList if the user's language is RTL or FlashList if the user's language is LTR. - * - * Because FlashList's props are a superset of FlatList's, you must pass estimatedItemSize - * to this component if you want to use it. - * - * This is a temporary workaround until the FlashList component supports RTL at - * which point this component can be removed and we will default to using FlashList everywhere. - * @see {@link https://github.com/Shopify/flash-list/issues/544|RTL Bug Android} - * @see {@link https://github.com/Shopify/flash-list/issues/840|Flashlist Not Support RTL} - * @param {FlashListProps | FlatListProps} props - The props for the `ListView` component. - * @param {RefObject} forwardRef - An optional forwarded ref. - * @returns {JSX.Element} The rendered `ListView` component. - */ -const ListViewComponent = forwardRef( - (props: ListViewProps, ref: ForwardedRef>) => { - const ListComponentWrapper = isRTL ? FlatList : FlashList - - return - }, -) - -ListViewComponent.displayName = "ListView" - -export const ListView = ListViewComponent as ( - props: ListViewProps & { - ref?: RefObject | null> - }, -) => ReactElement diff --git a/boilerplate/app/i18n/demo-ar.ts b/boilerplate/app/i18n/demo-ar.ts index 408dcc540..b961654d8 100644 --- 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 index b13ee73f3..b0268e3bb 100644 --- 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 index 736ca2cf0..2a2330ecf 100644 --- 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 index dc07cb17e..9b1532619 100644 --- 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 index 49c492b72..5b24fc7f8 100644 --- 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 index 5b0e653a7..f25bfa78e 100644 --- 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 index a76d9ee0e..eca194d5b 100644 --- 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 index f1d8b67b0..092268d01 100644 --- 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> = return ( - + contentContainerStyle={themed([$styles.container, $listContentContainer])} data={episodesForList} extraData={totalEpisodes + totalFavorites} refreshing={refreshing} - estimatedItemSize={177} onRefresh={manualRefresh} + keyExtractor={(item) => item.guid} ListEmptyComponent={ isLoading ? ( @@ -309,7 +308,7 @@ const EpisodeCard = ({ } // #region Styles -const $listContentContainer: ThemedStyle = ({ spacing }) => ({ +const $listContentContainer: ThemedStyle = ({ 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 index 9e3464f41..49ad6a592 100644 --- 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> = const [open, setOpen] = useState(false) const timeout = useRef>(null) const listRef = useRef(null) - const menuRef = useRef>(null) + const menuRef = useRef>(null) const route = useRoute>() const params = route.params @@ -195,10 +202,9 @@ export const DemoShowroomScreen: FC> = - + 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 = ({ colors }) => ({ flex: 1, }) -const $listContentContainer: ThemedStyle = ({ spacing }) => ({ +const $listContentContainer: ThemedStyle = ({ spacing }) => ({ paddingHorizontal: spacing.lg, }) diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx index e96cfbbbd..8536caa91 100644 --- 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" > - + data={listData} - estimatedItemSize={59} + keyExtractor={(item, index) => `${item}-${index}`} renderItem={({ item, index }) => ( =20.0.0" - }, - "expo": { - "install": { - "exclude": [ - "@shopify/flash-list" - ] - } } } diff --git a/docs/README.md b/docs/README.md index 864b2d3ee..6b4e1bf7a 100644 --- 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 deleted file mode 100644 index 5e3151d39..000000000 --- a/docs/boilerplate/app/components/ListView.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -sidebar_position: 37 ---- - -# ListView - -The `ListView` component is a Higher Order Component that uses [Shopify's FlashList](https://shopify.github.io/flash-list/) component to display a list unless the user's preferred language is RTL (right-to-left). This is because FlashList has [known](https://github.com/Shopify/flash-list/issues/544) [issues](https://github.com/Shopify/flash-list/issues/840) with RTL support. Once these issues with FlashList are resolved, this component will be deprecated and FlashList will be used directly. - -## Props - -The `ListView` component uses props from `FlashList` because they are a superset of `FlatList` and only require one extra prop to work for both component types. - -> [Please see the FlashList documentation for more information on the props that are available.](https://shopify.github.io/flash-list/docs/usage) - -### `estimatedItemSize` - -> [Please see the FlashList documentation for more information on this prop.](https://shopify.github.io/flash-list/docs/estimated-item-size) diff --git a/docs/boilerplate/app/components/Screen.md b/docs/boilerplate/app/components/Screen.md index 181ff1851..5e859ac14 100644 --- 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