From c4c8327bbcdbfeb3ccb237e064c23bc6c4d941ea Mon Sep 17 00:00:00 2001
From: Batyr <kanzitdinov@gmail.com>
Date: Wed, 15 Mar 2023 02:53:51 +0100
Subject: [PATCH] [playground] `flash-list` added

---
 src/screens/playground/detailed-screen.tsx |  50 --------
 src/screens/playground/flash-list.tsx      | 127 +++++++++++++++++++++
 2 files changed, 127 insertions(+), 50 deletions(-)
 delete mode 100644 src/screens/playground/detailed-screen.tsx
 create mode 100644 src/screens/playground/flash-list.tsx

diff --git a/src/screens/playground/detailed-screen.tsx b/src/screens/playground/detailed-screen.tsx
deleted file mode 100644
index bb90834..0000000
--- a/src/screens/playground/detailed-screen.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, {useEffect} from 'react';
-import {ScrollView} from 'react-native';
-import {View} from 'react-native-ui-lib';
-import {observer} from 'mobx-react';
-import {useNavigation} from '@react-navigation/native';
-import {NavioScreen} from 'rn-navio';
-
-import {services, useServices} from '@app/services';
-import {useAppearance} from '@app/utils/hooks';
-import {NavioSection} from '@app/components/sections/NavioSection';
-
-export type Props = {
-  type?: 'push';
-};
-
-export const Example: NavioScreen<Props> = observer(({type = 'push'}) => {
-  useAppearance(); // for Dark Mode
-  const navigation = useNavigation();
-  const {t, navio} = useServices();
-  // const {ui} = useStores();
-
-  // State
-
-  // Methods
-
-  // Start
-  useEffect(() => {
-    configureUI();
-  }, []);
-
-  // UI Methods
-  const configureUI = () => {
-    navigation.setOptions({});
-  };
-
-  // UI Methods
-
-  return (
-    <View flex bg-bgColor>
-      <ScrollView contentInsetAdjustmentBehavior="always">
-        <NavioSection />
-      </ScrollView>
-    </View>
-  );
-});
-
-Example.options = props => ({
-  headerBackTitleStyle: false,
-  title: `${services.t.do('example.title')} ${(props?.route?.params as Props)?.type ?? ''}`,
-});
diff --git a/src/screens/playground/flash-list.tsx b/src/screens/playground/flash-list.tsx
new file mode 100644
index 0000000..9a64093
--- /dev/null
+++ b/src/screens/playground/flash-list.tsx
@@ -0,0 +1,127 @@
+import React, {useEffect, useMemo} from 'react';
+import {Text, View} from 'react-native-ui-lib';
+import {observer} from 'mobx-react';
+import {useNavigation} from '@react-navigation/native';
+import {NavioScreen} from 'rn-navio';
+
+import {services, useServices} from '@app/services';
+import {useAppearance} from '@app/utils/hooks';
+import {randomStr} from '@app/utils/help';
+import {FlashList} from '@shopify/flash-list';
+import {Image} from 'expo-image';
+import {Row} from '@app/components/row';
+import formatRelative from 'date-fns/formatRelative';
+import subDays from 'date-fns/subDays';
+
+type RowData = {
+  title: string;
+  image: string;
+  description: string;
+  pics: string[];
+};
+
+export type Props = {};
+
+export const PlaygroundFlashList: NavioScreen<Props> = observer(() => {
+  useAppearance(); // for Dark Mode
+  const navigation = useNavigation();
+  // const {t, navio} = useServices();
+  // const {ui} = useStores();
+
+  const DATA: RowData[] = useMemo(
+    () =>
+      Array.from({length: 1000}).map((v, ndx) => ({
+        title: `Item ${ndx}`,
+        image: `https://picsum.photos/200?image=${ndx + 1}`,
+        description: randomStr(300),
+        pics: [
+          `https://picsum.photos/200?image=${ndx * 89}`,
+          `https://picsum.photos/200?image=${ndx * 99}`,
+        ],
+      })),
+    [],
+  );
+
+  // State
+
+  // Methods
+
+  // Start
+  useEffect(() => {
+    configureUI();
+  }, []);
+
+  // UI Methods
+  const configureUI = () => {
+    navigation.setOptions({});
+  };
+
+  // UI Methods
+
+  return (
+    <View flex bg-bgColor>
+      <FlashList
+        contentInsetAdjustmentBehavior="always"
+        data={DATA}
+        renderItem={({item}) => <ListItem item={item} />}
+        estimatedItemSize={300}
+      />
+    </View>
+  );
+});
+PlaygroundFlashList.options = {
+  headerBackTitleStyle: false,
+  title: `Flash List`,
+};
+
+const blurhash =
+  '|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj[';
+const ListItem = ({item}: {item: RowData}) => {
+  useAppearance();
+
+  return (
+    <View padding-s2 paddingH-s4 paddingB-s8 bg-bgColor>
+      <Row>
+        <Image
+          style={{width: 80, height: 80, borderRadius: 16}}
+          source={item.image}
+          placeholder={blurhash}
+          contentFit="cover"
+          resizeMode="contain"
+          transition={100}
+        />
+
+        <View>
+          <Text textColor text50R marginL-s2>
+            {item.title}
+          </Text>
+
+          <Text textColor text70R marginL-s2>
+            {formatRelative(subDays(new Date(), 3), new Date())}
+          </Text>
+        </View>
+      </Row>
+
+      <View padding-s1 paddingT-s2>
+        <Text textColor text70R>
+          {item.description}
+        </Text>
+
+        <Row>
+          {item.pics.map((pic, ndx) => (
+            <View key={ndx} flex margin-s1>
+              <Image
+                style={{height: 140, borderRadius: 8}}
+                source={pic}
+                placeholder={blurhash}
+                contentFit="cover"
+                resizeMode="contain"
+                transition={100}
+              />
+            </View>
+          ))}
+        </Row>
+      </View>
+    </View>
+  );
+};