Style Images + Remove Image Functionality

components/create/details.tsx

@@ -1,15 +1,22 @@
 import Tag from "@/components/global/tag";
 import Beat from "@/components/global/beat";
-import { View, Text, TextInput, Pressable } from "react-native";
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  ImageBackground,
+} from "react-native";
 import { useEffect, useState } from "react";
 import { beat } from "@/types";
 import { Image } from "expo-image";
 import * as Location from "expo-location";
 import * as ImagePicker from "expo-image-picker";
 import Icon from "../Icon";
 import { useUser } from "@/hooks/useUser";
 import { useDrops } from "@/hooks/useDrops";
 import { router } from "expo-router";
+import { ScrollView } from "react-native-gesture-handler";
 
 const colors = [
   "bg-beatdrop-tag-orange",
@@ -38,7 +45,7 @@
 }: props) => {
   const [tag, setTag] = useState("");
   const [location, setLocation] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const [coordinates, setCoordinates] = useState({
     longitude: 0.0,
@@ -122,6 +129,12 @@
     setImages(allImages);
   };
 
+  const handleRemoveImage = (selectedImage: ImagePicker.ImagePickerAsset) => {
+    const newImages = images.filter((image) => image.uri !== selectedImage.uri);
+
+    setImages(newImages);
+  };
+
   return (
     <View className="w-full">
       <View className="p-3 h-full w-full gap-4">
@@ -183,26 +196,34 @@
             <Tag text={tag} color={colors[index]} key={index} />
           ))}
         </View>
-        <View className="flex flex-row flex-wrap gap-2 items-center">
+        <View className="flex flex-row flex-wrap gap-2 items-center justify-between">
+          <Icon size={28} name="Camera" />
           <Pressable
             onPress={handlePromptImage}
-            className="flex flex-row items-center gap-2"
+            className="flex flex-row items-center gap-2 rounded-full border border-[#EFEFEF]"
           >
-            <Text>Upload image + </Text>
+            <Text className="text-center text-xl px-24 py-2">
+              Upload Photos
+            </Text>
           </Pressable>
-
-          {images.map((image) => {
-            return (
-              <Image
-                key={image.uri}
-                source={{ uri: image.uri }}
-                style={{ width: 40, height: 40, borderRadius: 8 }}
-                contentFit="cover"
-                alt="Selected Image"
-              />
-            );
-          })}
         </View>
+        <ScrollView horizontal>
+          {images.map((image) => (
+            <ImageBackground
+              className=" w-screen-2/5 h-2/3 mr-3 rounded-lg overflow-hidden"
+              key={image.uri}
+              source={image}
+              alt="Selected Image"
+            >
+              <Pressable
+                onPress={() => handleRemoveImage(image)}
+                className="absolute top-1 right-1 rounded-full bg-black"
+              >
+                <Icon size={28} name="Close_SM" color="white"></Icon>
+              </Pressable>
+            </ImageBackground>
+          ))}
+        </ScrollView>
       </View>
 
       <Pressable

tailwind.config.js

@@ -23,6 +23,9 @@ module.exports = {
           },
         },
       },
+      width: {
+        "screen-2/5": "40vw",
+      },
     },
   },
   plugins: [],