updated package and added horizontal scrollview

app/participant.tsx

@@ -1,11 +1,19 @@
-import { View, Image, Text } from "react-native";
+import { View, Image, Text, TouchableOpacity } from "react-native";
 import styles from "@/app/stackStyles/participantStyles";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import { router } from "expo-router";
+import {
+  ScrollView,
+  GestureHandlerRootView,
+} from "react-native-gesture-handler";
 
 export default function ParticipantScreen() {
   return (
-    <View style={styles.mainContainer}>
-      <View style={styles.handleBar} />
+    <GestureHandlerRootView style={styles.mainContainer}>
       <Text style={styles.participantName}>Calvin Ogara</Text>
+      <TouchableOpacity style={styles.closeIcon} onPress={() => router.back()}>
+        <Ionicons name="close-circle-outline" size={38} color="white" />
+      </TouchableOpacity>
       <View style={styles.participantInfoSection}>
         <Text style={styles.participantInfo}>Single</Text>
         <View style={styles.dot} />
@@ -22,7 +30,20 @@ export default function ParticipantScreen() {
 
       <View style={styles.performedShowsSection}>
         <Text style={styles.performedShowsTitle}>Auftritte:</Text>
+
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={{
+            width: "100%",
+            marginTop: 15,
+          }}
+        >
+          {[...Array(5)].map((show, index) => (
+            <View style={styles.showContainer} key={index}></View>
+          ))}
+        </ScrollView>
       </View>
-    </View>
+    </GestureHandlerRootView>
   );
 }

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,
   },
 });
 

package-lock.json

@@ -39,7 +39,7 @@
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
-        "@types/react": "^19.1.14",
+        "@types/react": "~19.1.10",
         "eslint": "^9.25.0",
         "eslint-config-expo": "~10.0.0",
         "typescript": "~5.9.2"
@@ -3681,9 +3681,9 @@
       }
     },
     "node_modules/@types/react": {
-      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.0.tgz",
-      "integrity": "sha512-1LOH8xovvsKsCBq1wnT4ntDUdCJKmnEakhsuoUSy6ExlHCkGP2hqnatagYTgFk6oeL0VU31u7SNjunPN+GchtA==",
+      "version": "19.1.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.17.tgz",
+      "integrity": "sha512-Qec1E3mhALmaspIrhWt9jkQMNdw6bReVu64mjvhbhq2NFPftLPVr+l1SZgmw/66WwBNpDh7ao5AT6gF5v41PFA==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@types/react": "^19.1.14",
+    "@types/react": "~19.1.10",
     "eslint": "^9.25.0",
     "eslint-config-expo": "~10.0.0",
     "typescript": "~5.9.2"