Passage View Responsive + View Exercice + Workout component data externe

app/(tabs)/(exercice)/ExerciceScreen.tsx

@@ -1,13 +1,40 @@
-import {SafeAreaView, Text, View} from "react-native";
+import {FlatList, Text, View} from "react-native";
 import React from "react";
+import HeaderProfileComponent from "@/components/HeaderProfileComponent";
+import Screen from "@/components/ui/Screen";
+import WorkoutCardComponent from "@/components/WorkoutCardComponent";
+import {useSession} from "@/ctx";
+import {Workout} from "@/model/Workout";
 
 export default function ExerciceScreen() {
+    const [text, onChangeText] = React.useState("");
+    const exercise = [new Workout("Développé couché",  25,"8 Series Workout", 412, "assets/images/Sigma-2.png","Intense" ),
+    new Workout("Curl halterné", 30, "8 Series Workout", 342,  "assets/images/Sigma.jpg","Medium" ),
+        new Workout("Tirage Vertival", 29, "8 Series Workout", 793,  "assets/images/Sigma.jpg","Easy" )];
+
     return (
-        <SafeAreaView>
+        <Screen>
+            <FlatList
+                ListHeaderComponent={
+                    <>
                         <View>
-                <Text className="m-7 font-extrabold">Welcome to Exercice Screen </Text>
+                            <HeaderProfileComponent/>
-                <Text>We will do it soon</Text>
+                        </View>
+                        <View className="mt-4">
+                            <View className="flex-row justify-between items-center mb-4">
+                                <Text className="text-lg font-bold text-black">Séance du jour</Text>
+                            </View>
                         </View>
-        </SafeAreaView>
+                    </>
+                }
+                data={exercise}
+                className="h-full"
+                renderItem={({ item }: { item: Workout }) =>
+                    <View className="mt-2 h-52">
+                    <WorkoutCardComponent exercise={item}/>
+                </View>
+            }
+            />
+        </Screen>
     );
 }

app/(tabs)/(home)/HomeScreen.tsx

@@ -5,47 +5,56 @@ import Screen from "@/components/ui/Screen";
 import CalendarComponent from "@/components/CalendarComponent";
 import WelcomeComponent from "@/components/WelcomeComponent";
 import ActivitiesComponent from "@/components/ActivitiesComponent";
+import {Workout} from "@/model/Workout";
 
 
 export default function HomeScreen() {
+    const exercise = new Workout("Développé couché",  25,"8 Series Workout", 412, "assets/images/Sigma-2.png","Intense" );
 
     return (
             <Screen>
-            <ScrollView>
+            <ScrollView className="h-full ">
 
-                <View >
+                <View className="h-1/6 justify-center">
                     <WelcomeComponent />
                 </View>
 
-
+                <View className="h-1/6 mt-2">
-                <View className="mt-2">
                     <View className="flex-row justify-between items-center mb-4">
-                        <Text className="text-lg font-bold text-black">Fitness Metrics</Text>
+                        <Text className="text-lg font-bold text-black">
-                        <Text className="text-orange-500 font-semibold">See All</Text>
+                            Fitness Metrics
+                        </Text>
+                        <Text className="text-orange-500 font-semibold">
+                            See All
+                        </Text>
                     </View>
                     <CalendarComponent />
                 </View>
 
-            <View className="mt-2">
+                <View className="h-1/5">
                     <View className="flex-row justify-between items-center mb-4">
-                    <Text className="text-lg font-bold text-black">Workout</Text>
+                        <Text className="text-lg font-bold text-black">
-                    <Text className="text-orange-500 font-semibold">See All</Text>
+                            Workout
+                        </Text>
+                        <Text className="text-orange-500 font-semibold">
+                            See All
+                        </Text>
                     </View>
-                <WorkoutCardComponent/>
+                    <WorkoutCardComponent exercise={exercise} background="bg-black" />
                 </View>
 
-
+                <View className="h-1/5 mt-8">
-
+                    <View className="flex-row justify-between items-center mb-4 mt-6 ">
-                <View className="mt-2">
+                        <Text className="text-lg font-bold text-black">
-                    <View className="flex-row justify-between items-center mb-4">
+                            Activities
-                        <Text className="text-lg font-bold text-black">Activities</Text>
+                        </Text>
-                        <Text className="text-orange-500 font-semibold">See All</Text>
+                        <Text className="text-orange-500 font-semibold">
+                            See All
+                        </Text>
                     </View>
                     <ActivitiesComponent />
                 </View>
 
-
-
             </ScrollView>
             </Screen>
     );

app/_layout.tsx

@@ -6,9 +6,6 @@ import { SessionProvider } from "@/ctx";
 import {Slot, Stack} from "expo-router";
 import "@/global.css";
 
-import "@/global.css";
-
-// Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {

components/ActivitiesComponent.tsx

@@ -80,7 +80,7 @@ export default function ActivitiesComponent() {
     };
 
     return (
-        <View className="bg-gray-200 rounded-2xl p-1">
+        <View className="bg-gray-200 rounded-2xl p-1 h-full">
             <View className=" m-2 flex-row justify-center  rounded-2xl bg-white">
                 {months.map((item, index) => {
                     return (

components/HeaderProfileComponent.tsx

@@ -0,0 +1,28 @@
+import {Image, Text, TouchableOpacity, View} from "react-native";
+import {Ionicons} from "@expo/vector-icons";
+import React from "react";
+import {useSession} from "@/ctx";
+
+export default function HeaderProfileComponent() {
+    const {session} = useSession();
+
+
+    return (
+        <View className="rounded-2xl overflow-hidden shadow-lg h-auto p-4">
+
+            <View className="flex-row items-center justify-between">
+                <View className="flex-row items-center  w-full">
+                    <Image className="h-16 w-16 rounded-2xl"
+                           source={require("assets/images/sigma-profile.jpeg")}
+                    />
+
+                    <View>
+                        <Text className="text-gray-500 font-semibold ml-4">Prêt pour t'entrainer ?</Text>
+                        <Text className="text-black text-4xl ml-4 mt-0.5">{session}</Text>
+                    </View>
+                </View>
+            </View>
+
+        </View>
+    );
+}

components/WelcomeComponent.tsx

@@ -1,6 +1,7 @@
-import {Image, Text, TouchableOpacity, View} from "react-native";
+import {Image, ImageBackground, Text, TouchableOpacity, View} from "react-native";
 import {Ionicons} from "@expo/vector-icons";
 import React from "react";
+import {useSession} from "@/ctx";
 
 export default function WelcomeComponent() {
     const date = new Date();
@@ -9,25 +10,31 @@ export default function WelcomeComponent() {
         month: 'long',
         day: 'numeric',
     });
+    const {session} = useSession();
 
-    return (
-      <View className="rounded-2xl overflow-hidden shadow-lg h-auto bg-black pb-4">
 
-          <View className="flex-row m-4 ">
-              <Ionicons name="calendar" size={24} color="white" />
-              <Text className="text-gray-400 text-2xl mb-2 ml-1">{formattedDate}</Text>
 
-          </View>
+    return (
+      <View className="rounded-2xl overflow-hidden shadow-lg h-full bg-black justify-center">
+            <ImageBackground
+                source={require("assets/images/black-back.png")}
+                className="w-full h-full justify-center"
+            >
 
-          <View className="flex-row items-center justify-between m-2">
+              <View className="flex-row items-center justify-between">
-              <View className="flex-row items-center">
+                  <View className="flex-row items-center  w-full">
-                  <Image className="h-20 w-24 rounded-2xl"
+                      <Image className="h-16 w-16 rounded-2xl"
                              source={require("assets/images/sigma-profile.jpeg")}
                       />
-                  <Text className="text-white text-4xl font-extrabold ml-2 ">Hello, Tata Yoyo!</Text>
+
+                      <View>
+                          <Text className="text-gray-500 font-semibold ml-4">{formattedDate}</Text>
+                          <Text className="text-white text-4xl ml-4 mt-0.5">Hello {session} !</Text>
+                      </View>
                   </View>
               </View>
 
+            </ImageBackground>
       </View>
   );
 }

components/WorkoutCardComponent.tsx

@@ -3,40 +3,57 @@ import React from "react";
 import {AntDesign, MaterialCommunityIcons} from "@expo/vector-icons";
 import {Workout} from "@/model/Workout";
 
-export default function WorkoutCardComponent() {
+interface WorkoutCardComponentProps {
+    exercise: Workout,
+    background?: String,
+    height?: number,
+
+}
+
+export default function WorkoutCardComponent({exercise, height, background}: WorkoutCardComponentProps) {
 
-    const exercise = new Workout("Développé couché",  25,"8 Series Workout", 412, "assets/images/Sigma-2.jpg","Intense" );
 
 
+    const style = () => {
+        return `rounded-2xl overflow-hidden ${background ?? "bg-black"}`
+    }
+
+    const styleImage = () => {
+        return `w-full h `
+    }
+
+    console.log(styleImage())
+
+    console.log(style())
 
     return (
-            <View>
+        <View className={style()}>
-                <View className="rounded-2xl overflow-hidden shadow-lg h-72">
+
 
                 <ImageBackground
-                        source={require("assets/images/Sigma-2.jpg")}
+                    source={require("assets/images/Sigma-2.png")}
-                        className="w-full h-full"
+                    className='h-full w-full'
                 >
-                        <View className="flex-row justify-between items-center p-4">
+                    <View className="flex-row justify-between p-4">
-                            <View className="flex-row space-x-4">
+                        <View className="flex-row space-x-4 h-44  items-top justify-center ">
-                                <View className="flex-row items-center">
+                            <View className="flex-row items-top">
                                 <Text className="text-white text-sm ml-1">{exercise.duration} min</Text>
                             </View>
-                                <View className="justify-center ml-0.5">
+                            <View className="flex-row justify-center">
                                 <MaterialCommunityIcons name="square-rounded" size={8} color="white"/>
                             </View>
-                                <View className="flex-row items-center">
+                            <View className="flex-row">
                                 <Text className="text-white text-sm ml-1">{exercise.calories} kcal</Text>
                             </View>
                         </View>
                     </View>
 
-                        <View className="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-50">
+                    <View className="absolute bottom-0 left-0 right-0 p-4  bg-opacity-50">
                         <Text className="text-white text-lg font-bold">{exercise.name}</Text>
                         <Text className="text-gray-300 text-sm">{exercise.repetitions}</Text>
                         <View className="flex-row items-center mt-2">
                             <Text className="text-white text-xs bg-gray-800 py-1 px-3 rounded-full">
-                                    Intense
+                                {exercise.level}
                             </Text>
                         </View>
                     </View>
@@ -45,7 +62,7 @@ export default function WorkoutCardComponent() {
                         <AntDesign name="play" size={50} color="orange"/>
                     </TouchableOpacity>
                 </ImageBackground>
-                </View>
+
         </View>
     );
 }