selection chantier (animation,correction) ; ajustement et amélioration du thème ; chantier provider

app/(tabs)/bonjourFL.tsx

@@ -6,6 +6,11 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useMemo, useState } from 'react';
 import { Button, FlatList, Image, StyleSheet, Text } from 'react-native';
 import rawConcerts from '../../data/concerts.json';
+import Constants from 'expo-constants' //pour connaître la taille de la barre menu de l'OS en haut
+
+import Example from '@/components/example';
+import { useChantier } from '../Context';
+
 
 type Concert = {
   group: string;
@@ -23,6 +28,8 @@ export default function BonjourScreen() {
   const router = useRouter();
   const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
   const [search, setSearch] = useState('');
+  const { chantier, setChantier } = useChantier();
+
 
 
   const concertsData: Concert[] = Array.isArray(rawConcerts)
@@ -44,9 +51,9 @@ export default function BonjourScreen() {
       return null;
     }
     return(
-    <ThemedView lvl={2} border={5} style={styles.card}>
+    <ThemedView lvl={1} shadow={true} style={styles.card}>
       <Image source={{ uri: item.Image }} style={styles.image} />
-      <ThemedView lvl={2} style={styles.info}>
+      <ThemedView lvl={1} style={styles.info}>
         <ThemedText style={styles.group}>{item.group}</ThemedText>
         <ThemedText>{item.date}</ThemedText>
         <ThemedText>{item.location}</ThemedText>
@@ -60,29 +67,27 @@ export default function BonjourScreen() {
 
 
   return(
-    <ThemedView style={styles.container}>
-      <ThemedView style={styles.selectChantier}>
-            <SelectChantier ></SelectChantier>
-      </ThemedView>
+    <ThemedView lvl={3} style={styles.container}>
       <FlatList
         data={filteredData}
         renderItem={renderItem}
         keyExtractor={(_, index) => index.toString()}
         contentContainerStyle={{ paddingBottom: 40 }}
         ListHeaderComponent={
-          <ThemedView style={styles.header}>
+          <ThemedView opacity="00" style={styles.header}>
             <ThemedText style={styles.text}>
-              Bonjour {prenom} {nom}
+              Bonjour {prenom} {nom} {chantier&&chantier.chef.nom}
             </ThemedText>
 
-            <ThemedTextInput
-              lvl={0}
-              border={5}
-              style={styles.input}
-              placeholder="Rechercher un groupe..."
-              value={search}
-              onChangeText={setSearch}
-            />
+            <ThemedView style={styles.inputBack} shadow={true}>
+              <ThemedTextInput
+                lvl={0}
+                style={styles.input}
+                placeholder="Rechercher un groupe..."
+                value={search}
+                onChangeText={setSearch}
+              />
+            </ThemedView>
           </ThemedView>
         }
         ListEmptyComponent={
@@ -93,6 +98,11 @@ export default function BonjourScreen() {
       <ThemedView style={styles.footer}>
         <Button title="Retour" onPress={() => router.push("/(tabs)/mapScreen") } />
       </ThemedView>
+
+      <ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
+            <SelectChantier ></SelectChantier>
+      </ThemedView>
+
     </ThemedView>
   )
 }
@@ -100,7 +110,8 @@ export default function BonjourScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    //backgroundColor: '#fff',
+    marginTop: Constants.statusBarHeight, //pour la barre menu du haut
+    //backgroundColor: '#00FFFF',
   },
   header: {
     marginTop: 60,
@@ -113,9 +124,14 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     marginBottom: 10,
   },
+  inputBack:{
+    width:"100%",
+    borderRadius:10,
+    backgroundColor:'transparent'
+  },
   input: {
     width: '100%',
-    borderWidth: 1,
+    //borderWidth: 1,
     //borderColor: '#ccc',
     borderRadius: 10,
     padding: 10,
@@ -125,11 +141,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginHorizontal: 20,
     marginBottom: 15,
-    borderWidth: 1,
+    //borderWidth: 1,
     //borderColor: '#ddd',
     borderRadius: 10,
     padding: 10,
     //backgroundColor: '#fafafa',
+
   },
   image: {
     width: 80,
@@ -154,7 +171,4 @@ const styles = StyleSheet.create({
     marginTop: 30,
     color: '#888',
   },
-  selectChantier:{
-    width:"100%",
-  },
 });

app/Context.tsx

@@ -0,0 +1,36 @@
+import { Chantier, Chef, exempleChantier } from '@/class/class';
+import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
+
+type ChantierContextType = {
+  chantier: Chantier | null;
+  setChantier: (p: Chantier | null) => void;
+};
+
+const ChantierContext = createContext<ChantierContextType | null>(null);
+
+type ChantierProviderProps = {
+  children: ReactNode;
+};
+
+export const ChantierProvider = ({ children }: ChantierProviderProps) => {
+  const [chantier, setChantier] = useState<Chantier | null>(null);
+
+  const value = useMemo(
+    () => ({ chantier, setChantier }),
+    [chantier]
+  );
+
+  return (
+    <ChantierContext.Provider value={value}>
+      {children}
+    </ChantierContext.Provider>
+  );
+};
+
+export const useChantier = () => {
+  const context = useContext(ChantierContext);
+  if (!context) {
+    throw new Error('useChantier doit être utilisé dans <ChantierProvider>');
+  }
+  return context;
+};

app/_layout.tsx

@@ -13,6 +13,10 @@ import { useRouter } from "expo-router";
 import { useColorScheme } from "@/hooks/use-color-scheme";
 import { doc, getDoc } from "firebase/firestore";
 
+import { UIManager, Platform } from 'react-native';
+import { ChantierProvider } from "./Context";
+
+
 export const unstable_settings = {
   anchor: "(tabs)",
 };
@@ -23,6 +27,14 @@ export default function RootLayout() {
   const [user, setUser] = useState<User | null>(null);
   const [userRole, setUserRole] = useState<string | null>(null);
 
+
+    useEffect(() => {
+      if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+          UIManager.setLayoutAnimationEnabledExperimental(true);
+      }
+    }, []);
+
+
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
       setUser(currentUser);
@@ -56,18 +68,19 @@ export default function RootLayout() {
   }, []);
 
   return (
-
-    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="selectChantier" options={{ headerShown: false }}/>
-        <Stack.Screen
-          name="modal"
-          options={{ presentation: "modal", title: "Modal" }}
-        />
-        <Stack.Screen name="login" options={{ headerShown: false }} />
-      </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
+    <ChantierProvider>
+      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="selectChantier" options={{ headerShown: false }}/>
+          <Stack.Screen
+            name="modal"
+            options={{ presentation: "modal", title: "Modal" }}
+          />
+          <Stack.Screen name="login" options={{ headerShown: false }} />
+        </Stack>
+        <StatusBar style="auto" />
+      </ThemeProvider>
+    </ChantierProvider>
   );
 }