feat: add expo-fast-image dependency and integrate FastImage component in DetailGiftScreen for optimized image loading

Author: bakaqc

bun.lock

@@ -6,6 +6,7 @@
       "dependencies": {
         "@expo/vector-icons": "14.1.0",
         "expo": "52.0.46",
+        "expo-fast-image": "^1.1.3",
         "expo-linking": "7.0.5",
         "expo-router": "4.0.20",
         "expo-splash-screen": "0.29.24",
@@ -729,6 +730,8 @@
 
     "expo-constants": ["[email protected]", "", { "dependencies": { "@expo/config": "~10.0.11", "@expo/env": "~0.4.2" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-XfWRyQAf1yUNgWZ1TnE8pFBMqGmFP5Gb+SFSgszxDdOoheB/NI5D4p7q86kI2fvGyfTrxAe+D+74nZkfsGvUlg=="],
 
+    "expo-fast-image": ["[email protected]", "", {}, "sha512-dpHvUFJxImD+yDVJk3ubCMGSYgbewPfbsPMOpD/EP7PKDA4RurtkJZcUDF8T/0gxuxZMCldPgHup6np/hrK/MQ=="],
+
     "expo-file-system": ["[email protected]", "", { "dependencies": { "web-streams-polyfill": "^3.3.2" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-HAkrd/mb8r+G3lJ9MzmGeuW2B+BxQR1joKfeCyY4deLl1zoZ48FrAWjgZjHK9aHUVhJ0ehzInu/NQtikKytaeg=="],
 
     "expo-font": ["[email protected]", "", { "dependencies": { "fontfaceobserver": "^2.1.0" }, "peerDependencies": { "expo": "*", "react": "*" } }, "sha512-eAP5hyBgC8gafFtprsz0HMaB795qZfgJWqTmU0NfbSin1wUuVySFMEPMOrTkTgmazU73v4Cb4x7p86jY1XXYUw=="],

package.json

@@ -10,6 +10,7 @@
 	"dependencies": {
 		"@expo/vector-icons": "14.1.0",
 		"expo": "52.0.46",
+		"expo-fast-image": "^1.1.3",
 		"expo-linking": "7.0.5",
 		"expo-router": "4.0.20",
 		"expo-splash-screen": "0.29.24",

src/app/(gifts)/detail-gift.tsx

@@ -1,11 +1,11 @@
 import { useLocalSearchParams, useRouter } from 'expo-router';
-import { Alert, Image, Pressable, StyleSheet, Text, View } from 'react-native';
-
+import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';
+import FastImage from 'expo-fast-image';
 import { GiftIdea } from '@/models/GiftIdea';
 
 const DetailGiftScreen = () => {
 	const router = useRouter();
-	const { id, image, title, description, recipient, selectedDate } =
+	const { id, image, title, description, price, recipient, selectedDate } =
 		useLocalSearchParams() as unknown as GiftIdea;
 
 	const handleEdit = () => {
@@ -16,6 +16,7 @@ const DetailGiftScreen = () => {
 				image,
 				title,
 				description,
+				price,
 				recipient,
 				selectedDate,
 			},
@@ -39,20 +40,27 @@ const DetailGiftScreen = () => {
 
 	return (
 		<View style={styles.container}>
-			<Image source={{ uri: image }} style={styles.image} />
+			<FastImage
+				source={{ uri: image }}
+				style={styles.image}
+				cacheKey={id}
+				contentFit="cover"
+			/>
 			<Text style={styles.title}>{title}</Text>
 			<Text style={styles.description}>{description}</Text>
-			<Text style={styles.recipient}>For: {recipient}</Text>
+			<Text style={styles.price}>${price}</Text>
 			<Text style={styles.date}>
-				Event Date: {new Date(selectedDate).toLocaleDateString()}
+				Happening on {new Date(selectedDate).toLocaleDateString()}
 			</Text>
+			<Text style={styles.recipient}>for {recipient}</Text>
+
 			<View style={styles.actions}>
-				<Pressable style={styles.editButton} onPress={handleEdit}>
-					<Text style={styles.buttonText}>Edit</Text>
-				</Pressable>
 				<Pressable style={styles.deleteButton} onPress={handleDelete}>
 					<Text style={styles.buttonText}>Delete</Text>
 				</Pressable>
+				<Pressable style={styles.editButton} onPress={handleEdit}>
+					<Text style={styles.buttonText}>Edit</Text>
+				</Pressable>
 			</View>
 		</View>
 	);
@@ -64,28 +72,30 @@ const styles = StyleSheet.create({
 		backgroundColor: '#FFFFFF',
 		padding: 16,
 	},
-	header: {
-		fontSize: 20,
-		fontWeight: 'bold',
-		color: '#333333',
-		marginBottom: 16,
-		textAlign: 'center',
-	},
 	image: {
 		width: '100%',
-		height: 200,
-		borderRadius: 12,
+		height: 250,
+		borderRadius: 16,
 		marginBottom: 16,
+		borderWidth: 1,
+		borderColor: '#f0f0f0',
 	},
 	title: {
-		fontSize: 24,
+		fontSize: 25,
 		fontWeight: 'bold',
 		color: '#333333',
 		marginBottom: 8,
 	},
 	description: {
 		fontSize: 16,
 		color: '#666666',
+		lineHeight: 24,
+		marginBottom: 8,
+	},
+	price: {
+		fontSize: 18,
+		fontWeight: 'bold',
+		color: '#28a745',
 		marginBottom: 8,
 	},
 	recipient: {
@@ -95,7 +105,7 @@ const styles = StyleSheet.create({
 	},
 	date: {
 		fontSize: 16,
-		color: '#666666',
+		color: '#888888',
 		marginBottom: 16,
 	},
 	actions: {
@@ -105,19 +115,29 @@ const styles = StyleSheet.create({
 	},
 	editButton: {
 		flex: 1,
-		backgroundColor: '#007BFF',
-		padding: 12,
+		backgroundColor: '#ffa200',
+		paddingVertical: 14,
 		borderRadius: 8,
 		alignItems: 'center',
-		marginRight: 8,
+		marginLeft: 8,
+		shadowColor: '#000',
+		shadowOffset: { width: 0, height: 4 },
+		shadowOpacity: 0.2,
+		shadowRadius: 6,
+		elevation: 5,
 	},
 	deleteButton: {
 		flex: 1,
 		backgroundColor: '#FF4D4F',
-		padding: 12,
+		paddingVertical: 14,
 		borderRadius: 8,
 		alignItems: 'center',
-		marginLeft: 8,
+		marginRight: 8,
+		shadowColor: '#000',
+		shadowOffset: { width: 0, height: 4 },
+		shadowOpacity: 0.2,
+		shadowRadius: 6,
+		elevation: 5,
 	},
 	buttonText: {
 		color: '#FFFFFF',

src/components/utils/GiftCard.tsx

@@ -23,7 +23,7 @@ export default function GiftCard({
 	const handlePress = () => {
 		router.push({
 			pathname: '/detail-gift',
-			params: { id, image, title, description, recipient, selectedDate },
+			params: { id, image, title, description, price, recipient, selectedDate },
 		});
 	};
 

types/expo-fast-image.d.ts

@@ -0,0 +1,13 @@
+declare module 'expo-fast-image' {
+	import { ImageProps } from 'react-native';
+
+	interface FastImageProps extends ImageProps {
+		cacheKey?: string;
+		placeholder?: any;
+		contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+	}
+
+	const FastImage: React.FC<FastImageProps>;
+
+	export default FastImage;
+}