updated package and added horizontal scrollview

app/stackStyles/participantStyles.tsx

@@ -1,24 +1,22 @@
-import { StyleSheet } from "react-native";
+import ShowCard from "@/components/ui/ShowCard";
+import { StyleSheet, Dimensions } from "react-native";
 
 const styles = StyleSheet.create({
   mainContainer: {
     flex: 1,
     backgroundColor: "hsl(221, 39%, 12%)",
   },
-  handleBar: {
-    backgroundColor: "white",
-    padding: 3,
-    alignSelf: "center",
-    width: 50,
-    borderRadius: 10,
-    marginVertical: 20,
+  closeIcon: {
+    position: "absolute",
+    top: Dimensions.get("window").height * 0.077,
+    right: 30,
   },
   participantName: {
     color: "white",
     fontSize: 24,
     fontWeight: "600",
     textAlign: "center",
-    marginVertical: 10,
+    marginTop: Dimensions.get("window").height * 0.075,
   },
   participantImage: {
     width: "100%",
@@ -35,6 +33,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
     marginBottom: 15,
+    marginTop: 5,
   },
   participantInfo: {
     color: "hsl(0, 0%, 80%)",
@@ -61,7 +60,14 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: "600",
     color: "hsl(0, 0%, 80%)",
-    marginTop: 154,
+    marginTop: 15,
+  },
+  showContainer: {
+    width: 120,
+    height: 180,
+    backgroundColor: "hsl(336, 79%, 63%)",
+    borderRadius: 10,
+    marginRight: 15,
   },
 });