feat(components/flash-list): add component, add to example, add to do…

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.
+
+<Callout type="warning" emoji="⚠️">
+  `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. <br />
+  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.
+</Callout>
+
+## Import
+
+```js
+import { FlashList } from "@ficus-ui/native";
+```
+
+## Usage
+
+<div className="mt-2">
+  <ExpoDemo id="@bearstudio/ficus-ui-flashlist" />
+</div>
+
+## Performance demo ⚡️
+
+<div className="mt-2">
+  <ExpoDemo id="@bearstudio/ficus-ui-performance" />
+</div>
+
+## Props
+
+### `renderItem`
+<PropsTable
+  description="Takes an item from data and renders it into the list."
+  prop={{ type: "function", required: true }}
+/>
+
+
+### `data`
+<PropsTable
+  description="For simplicity, data is a plain array of items of a given type."
+  prop={{ type: "ItemT[]", required: true }}
+/>
+
+### `estimatedItemSize`
+<PropsTable
+  description="A single numeric value that hints FlashList about the approximate size of the items before they're rendered."
+  prop={{ type: "number", required: false }}
+/>

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 (
+    <SafeAreaView style={{ flex: 1 }}>
+      <Text mx="xl" fontSize="4xl">
+        FlashList component
+      </Text>
+      <Flex mt="xl">
+        <FlashList
+          bg="gray.200"
+          p="xl"
+          data={DATA}
+          renderItem={({ item }:any) => (
+            <Box p="lg">
+              <Text>{item.title}</Text>
+            </Box>
+          )}
+          estimatedItemSize={200}
+        />
+      </Flex>
+    </SafeAreaView>
+  );
+};
+
+export default FlashListComponent;

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 },
 ];

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(
+      <FlashList
+        data={[{ id: 0, text: 'I love Ficus UI (forked from Magnus UI)' }]}
+        renderItem={({ item }: any) => <Text>{item.text}</Text>}
+        keyExtractor={(item: any) => item.id}
+        estimatedItemSize={200}
+      />
+    );
+  });
+});

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,
+  },
+});

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';

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;