feat: add flashlist

chore: format code

Author: jellydn

bun.lockb

@@ -1,5 +1,6 @@
+import { FlashList } from "@shopify/flash-list";
 import { useState } from "react";
-import { FlatList, Image, Platform, Pressable, StyleSheet } from "react-native";
+import { Image, Platform, Pressable } from "react-native";
 
 export default function EmojiList({ onSelect, onCloseModal }) {
 	const [emoji] = useState([
@@ -12,11 +13,11 @@ export default function EmojiList({ onSelect, onCloseModal }) {
 	]);
 
 	return (
-		<FlatList
+		<FlashList
 			horizontal
+			estimatedItemSize={112}
 			showsHorizontalScrollIndicator={Platform.OS === "web"}
 			data={emoji}
-			contentContainerStyle={styles.listContainer}
 			renderItem={({ item, index }) => {
 				return (
 					<Pressable
@@ -25,26 +26,10 @@ export default function EmojiList({ onSelect, onCloseModal }) {
 							onCloseModal();
 						}}
 					>
-						<Image source={item} key={index} style={styles.image} />
+						<Image source={item} key={index} className="mr-5 w-28 h-28" />
 					</Pressable>
 				);
 			}}
 		/>
 	);
 }
-
-const styles = StyleSheet.create({
-	listContainer: {
-		borderTopRightRadius: 10,
-		borderTopLeftRadius: 10,
-		paddingHorizontal: 20,
-		flexDirection: "row",
-		alignItems: "center",
-		justifyContent: "space-between",
-	},
-	image: {
-		width: 100,
-		height: 100,
-		marginRight: 20,
-	},
-});

components/EmojiList.tsx

@@ -18,6 +18,7 @@
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
     "@expo/webpack-config": "^19.0.0",
+    "@shopify/flash-list": "1.6.3",
     "@types/react": "~18.2.46",
     "dom-to-image": "^2.6.0",
     "expo": "next",
@@ -33,11 +34,11 @@
     "react-dom": "18.2.0",
     "react-native": "0.73.1",
     "react-native-gesture-handler": "~2.14.0",
-    "react-native-reanimated": "~3.6.0",
+    "react-native-reanimated": "~3.6.1",
     "react-native-safe-area-context": "4.7.4",
     "react-native-screens": "~3.27.0",
     "react-native-view-shot": "3.8.0",
-    "react-native-web": "~0.19.6"
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",