Init react-native project

reactnative/App.tsx

@@ -0,0 +1,83 @@
+import { FlashList } from '@shopify/flash-list';
+import { StatusBar } from 'expo-status-bar';
+import { useRef, useState } from 'react';
+import { LayoutAnimation, Pressable, StyleSheet, Text, View } from 'react-native';
+
+export default function App() {
+  const generateArray = (size: number) => {
+    const arr = new Array(size);
+    for (let i = 0; i < size; i++) {
+      arr[i] = i;
+    }
+    return arr;
+  };
+  
+  const [refreshing, setRefreshing] = useState(false);
+  const [data, setData] = useState(generateArray(100));
+  
+  const list = useRef<FlashList<number> | null>(null);
+  
+  const removeItem = (item: number) => {
+    setData(
+      data.filter((dataItem) => {
+        return dataItem !== item;
+      })
+    );
+    list.current?.prepareForLayoutAnimationRender();
+    // after removing the item, we start animation
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+  };
+  
+  const renderItem = ({ item }: { item: number }) => {
+    const backgroundColor = item % 2 === 0 ? "#00a1f1" : "#ffbb00";
+    return (
+      <Pressable
+        onPress={() => {
+          removeItem(item);
+        }}
+      >
+        <View
+          style={{
+            ...styles.container,
+            backgroundColor: item > 97 ? "red" : backgroundColor,
+            height: item % 2 === 0 ? 100 : 200,
+          }}
+        >
+          <Text>Cell Id: {item}</Text>
+        </View>
+      </Pressable>
+    );
+  };
+  
+  return (
+    <FlashList
+          ref={list}
+          style={{flexGrow: 1, width: '100%', height: 50, backgroundColor: '#88F'}}
+          refreshing={refreshing}
+          onRefresh={() => {
+            setRefreshing(true);
+            setTimeout(() => {
+              setRefreshing(false);
+            }, 2000);
+          }}
+          keyExtractor={(item: number) => {
+            return item.toString();
+          }}
+          getItemType={(item: number) => {
+            return item > 97 ? "even" : "odd";
+          }}
+          renderItem={renderItem}
+          estimatedItemSize={100}
+          data={data}
+        />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});