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