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;