add: showContainer to history mockup

app/_layout.tsx

@@ -1,8 +1,7 @@
+import { DiscoveryProvider } from "@/contexts/DiscoveryContext";
 import { SeasonProvider } from "@/contexts/SeasonContext";
 import { ShowProvider } from "@/contexts/ShowContext";
 import { StreamingServiceProvider } from "@/contexts/StreamingServiceContext";
-
-import { DiscoveryProvider } from "@/contexts/DiscoveryContext";
 import { Stack } from "expo-router";
 import "react-native-reanimated";
 

app/participant.tsx

@@ -1,18 +1,16 @@
 import styles from "@/app/stackStyles/participantStyles";
+import { useShowContext } from "@/contexts/ShowContext";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import { router, useLocalSearchParams } from "expo-router";
 import React, { useMemo, useState } from "react";
-import { Image, Text, TouchableOpacity, View } from "react-native";
-
-import { useShowContext } from "@/contexts/ShowContext";
+import { Text, TouchableOpacity, View } from "react-native";
 import {
   GestureHandlerRootView,
   ScrollView,
 } from "react-native-gesture-handler";
 
 export default function ParticipantScreen() {
-  
-  const [appearances,] = useState<
+  const [appearances] = useState<
     {
       showId: number;
       seasons: number[];
@@ -54,9 +52,7 @@ export default function ParticipantScreen() {
   return (
     <GestureHandlerRootView style={styles.mainContainer}>
       <ScrollView showsVerticalScrollIndicator={false}>
-        <Text style={styles.participantName}>
-          {name ? (Array.isArray(name) ? name[0] : name) : "Teilnehmer"}
-        </Text>
+        <Text style={styles.participantName}>{name}</Text>
         <TouchableOpacity
           style={styles.closeIcon}
           onPress={() => router.back()}
@@ -67,7 +63,9 @@ export default function ParticipantScreen() {
         <View style={styles.performedShowsSection}>
           <Text style={styles.performedShowsTitle}>Auftritte:</Text>
 
-          <ScrollView
+          <View style={styles.showContainer}></View>
+
+          {/* <ScrollView
             horizontal
             showsHorizontalScrollIndicator={false}
             style={{
@@ -100,7 +98,7 @@ export default function ParticipantScreen() {
                 </TouchableOpacity>
               );
             })}
-          </ScrollView>
+          </ScrollView> */}
         </View>
       </ScrollView>
     </GestureHandlerRootView>

app/stackStyles/participantStyles.tsx

@@ -49,24 +49,24 @@ const styles = StyleSheet.create({
   },
   performedShowsSection: {
     width: "100%",
-    height: 500,
-    paddingLeft: 15,
-    paddingBottom: 20,
+    height: Dimensions.get("window").height,
     backgroundColor: "hsl(221, 39%, 0%)",
-    marginTop: 15,
+    marginTop: 20,
   },
   performedShowsTitle: {
     fontSize: 16,
     fontWeight: "600",
     color: "hsl(0, 0%, 80%)",
     marginTop: 15,
+    marginLeft: 15,
   },
   showContainer: {
-    width: 120,
+    width: "85%",
     height: 180,
     backgroundColor: "hsl(336, 79%, 63%)",
     borderRadius: 10,
-    marginRight: 15,
+    alignSelf: "center",
+    marginTop: 15,
   },
   showImage: {
     width: "100%",