diff --git a/apps/docs/pages/docs/v2/Components/Lists/flashlist.en-US.mdx b/apps/docs/pages/docs/v2/Components/Lists/flashlist.en-US.mdx new file mode 100644 index 0000000..fda82d4 --- /dev/null +++ b/apps/docs/pages/docs/v2/Components/Lists/flashlist.en-US.mdx @@ -0,0 +1,65 @@ +--- +searchable: true +--- + +import { ExpoDemo } from '@components/expo-demo'; +import PropsTable from "@components/docs/props-table"; +import { Callout } from 'nextra/components'; + +# FlashList ⚡️ + +Wrapper around `FlashList` component from `@shopify/flash-list`. + +https://shopify.github.io/flash-list/docs/ + +`FlashList` component is a more optimized list component from Shopify development team, it works as react native `FlatList` component. + +So, `List` component accepts every props from react native `FlatList` component. + + + `FlashList` is a great component with huge performances improvements but it + works better with list items of the same size/height. That's why you have to + pass an `estimatedItemSize` param to `FlashList` component.
+ If you have items with different sizes to display inside your list, you should + use default `List` / `FlatList` component. Using `FlashList` with different sizes + will cause blank spaces while scrolling into the list. +
+ +## Import + +```js +import { FlashList } from "@ficus-ui/native"; +``` + +## Usage + +
+ +
+ +## Performance demo ⚡️ + +
+ +
+ +## Props + +### `renderItem` + + + +### `data` + + +### `estimatedItemSize` + \ No newline at end of file diff --git a/apps/examples/app/components-v2/FlashList.tsx b/apps/examples/app/components-v2/FlashList.tsx new file mode 100644 index 0000000..be6f17d --- /dev/null +++ b/apps/examples/app/components-v2/FlashList.tsx @@ -0,0 +1,42 @@ +/* eslint-disable react-native/no-inline-styles */ +import { SafeAreaView } from "react-native"; +import { Box, Flex, FlashList, Text } from "@ficus-ui/native"; + +const FlashListComponent = () => { + const DATA = [ + { + id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba", + title: "First Item", + }, + { + id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63", + title: "Second Item", + }, + { + id: "58694a0f-3da1-471f-bd96-145571e29d72", + title: "Third Item", + }, + ]; + return ( + + + FlashList component + + + ( + + {item.title} + + )} + estimatedItemSize={200} + /> + + + ); +}; + +export default FlashListComponent; diff --git a/apps/examples/app/items-v2.ts b/apps/examples/app/items-v2.ts index 407895b..f249e11 100644 --- a/apps/examples/app/items-v2.ts +++ b/apps/examples/app/items-v2.ts @@ -18,6 +18,7 @@ import SliderComponent from '@/app/components-v2/Slider'; import IconComponent from '@/app/components-v2/Icon'; import ListComponent from '@/app/components-v2/List'; import SectionListComponent from '@/app/components-v2/SectionList'; +import FlashListComponent from '@/app/components-v2/FlashList'; type ExampleComponentType = { onScreenName: string; @@ -45,4 +46,5 @@ export const components: ExampleComponentType[] = [ { navigationPath: 'Icon', onScreenName: 'Icon', component: IconComponent }, { navigationPath: 'List', onScreenName: 'List', component: ListComponent }, { navigationPath: 'SectionList', onScreenName: 'SectionList', component: SectionListComponent }, + { navigationPath: 'FlashList', onScreenName: 'FlashList', component: FlashListComponent }, ]; diff --git a/packages/components/src/flash-list/flash-list.spec.tsx b/packages/components/src/flash-list/flash-list.spec.tsx new file mode 100644 index 0000000..597f1bb --- /dev/null +++ b/packages/components/src/flash-list/flash-list.spec.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { render } from '@testing-library/react-native'; + +import { FlashList } from '.'; +import { Text } from '../text'; + +jest.mock('react-native-toast-message', () => 'Toast'); + +describe('FlashList component', () => { + it('should render component passed to children', () => { + render( + {item.text}} + keyExtractor={(item: any) => item.id} + estimatedItemSize={200} + /> + ); + }); +}); diff --git a/packages/components/src/flash-list/index.tsx b/packages/components/src/flash-list/index.tsx new file mode 100644 index 0000000..d87fffe --- /dev/null +++ b/packages/components/src/flash-list/index.tsx @@ -0,0 +1,9 @@ +import { type NativeFicusProps, ficus } from '../system'; + +export interface FlashListProps extends NativeFicusProps<'FlashList'> {} + +export const FlashList = ficus('FlashList', { + baseStyle: { + flex: 1, + }, +}); diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 4e240a8..806360b 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -15,5 +15,6 @@ export * from './slider'; export * from './icon'; export * from './list'; export * from './section-list'; +export * from './flash-list'; export { ThemeProvider } from '@ficus-ui/theme'; diff --git a/packages/components/src/system/base-elements.ts b/packages/components/src/system/base-elements.ts index 45c1910..781ffda 100644 --- a/packages/components/src/system/base-elements.ts +++ b/packages/components/src/system/base-elements.ts @@ -1,4 +1,5 @@ import RNSlider from '@react-native-community/slider'; +import { FlashList as ShopifyFlashList } from '@shopify/flash-list'; import { ActivityIndicator as RNActivityIndicator, FlatList as RNFlatList, @@ -31,6 +32,7 @@ export const baseRNElements = { Slider: RNSlider, Flatlist: RNFlatList, SectionList: RNSectionList, + FlashList: ShopifyFlashList, } as const; export type BaseRNElements = keyof typeof baseRNElements;