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,30 +67,28 @@ export default function BonjourScreen() {
 
 
   return(
-    <ThemedView style={styles.container}>
+    <ThemedView lvl={3} style={styles.container}>
-      <ThemedView style={styles.selectChantier}>
-            <SelectChantier ></SelectChantier>
-      </ThemedView>
       <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>
 
+            <ThemedView style={styles.inputBack} shadow={true}>
               <ThemedTextInput
                 lvl={0}
-              border={5}
                 style={styles.input}
                 placeholder="Rechercher un groupe..."
                 value={search}
                 onChangeText={setSearch}
               />
             </ThemedView>
+          </ThemedView>
         }
         ListEmptyComponent={
           <Text style={styles.empty}>Aucun résultat n'a été trouvé</Text>
@@ -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,7 +68,7 @@ export default function RootLayout() {
   }, []);
 
   return (
-
+    <ChantierProvider>
       <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
         <Stack>
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
@@ -69,5 +81,6 @@ export default function RootLayout() {
         </Stack>
         <StatusBar style="auto" />
       </ThemeProvider>
+    </ChantierProvider>
   );
 }

components/example.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, LayoutAnimation, Platform, UIManager } from 'react-native';
+import Animated, { Layout } from 'react-native-reanimated';
+
+
+export default function Example() {
+  useEffect(() => {
+    // Activer sur Android
+    if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+      UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
+  }, []);
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  function onPressOpen() {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setIsOpen(prev => !prev);
+  }
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={onPressOpen} style={styles.button}>
+        <Text>Toggle</Text>
+      </TouchableOpacity>
+
+      <Animated.View layout={Layout.springify()} style={[styles.box, isOpen ? styles.boxOpen : styles.boxClosed]}>
+        <View
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'tomato',
+          }}
+        >
+          <View
+          style={{
+            width: '10%',
+            height: '10%',
+            backgroundColor: '#FFFFFF',
+          }}
+        >
+          
+        </View>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 20 },
+  button: { marginBottom: 12, padding: 10, backgroundColor: '#eee' },
+  box: {
+    // important pour masquer l'excédent pendant l'animation
+    overflow: 'hidden',
+  },
+  boxClosed: {
+    height: 10,
+    width:10,
+    //backgroundColor: '#00FF00',
+  },
+  boxOpen: {
+    // mettre une valeur numérique (pas 'auto')
+    height: 120,
+    width:120,
+    //backgroundColor: '#00FF00',
+  },
+});

components/selectChantier.tsx

@@ -1,58 +1,77 @@
 import { useState } from 'react';
-import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View } from 'react-native';
+import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View, LayoutAnimation } from 'react-native';
 import { ThemedTextInput } from './themed-textinpute';
 import { ThemedView } from "./themed-view";
 import { ThemedText } from './themed-text';
 import { ThemedButton } from './themed-button';
 import { Chantier, Chef, exempleChantier } from '@/class/class';
-import {BlurView} from 'expo-blur';
 import { Dimensions } from "react-native";
+import Animated, { Layout,LinearTransition,Easing,runOnJS } from 'react-native-reanimated';
+import { useChantier } from '@/app/Context';
 
 const screenHeight = Dimensions.get("window").height;
 
+
+/*
+
+<ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
+  <SelectChantier ></SelectChantier>
+</ThemedView>
+
+*/
+
 export default function SelectChantier() {
 
+    const { chantier, setChantier } = useChantier();
     const [search, setSearch] = useState('');
     const [isOpen,setIsOpen] = useState(false);
     const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
     
+    const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
+    const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
+    const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
+    const AnimatedThemedTextInput = Animated.createAnimatedComponent(ThemedTextInput);
 
-  function onPressOpen(event: GestureResponderEvent): void {
+  function onPressOpen(): void {
+    LayoutAnimation.configureNext(
+      LayoutAnimation.Presets.easeInEaseOut
+    );
     setIsOpen(!isOpen);
   }
 
+  function selectChantier(chantier: Chantier): void {
+    setChantier(chantier);
+    setIsOpen(false);
+  }
+
+
 
     const renderChantier = (chantier:Chantier, index: number)  => {
       return(
-      <ThemedView key={index} lvl={3} style={styles.chantier}>
+      <Pressable key={index} onPress={() => selectChantier(chantier)}>
+        <ThemedView lvl={4} style={styles.chantier}>
           <ThemedText>adresse: {chantier.adresse}</ThemedText>
           <ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
-        <ThemedText>date de début: {chantier.dateDep}</ThemedText>
+          <ThemedText >date de début: {chantier.dateDep}</ThemedText>
           <ThemedText>etat: {chantier.etat}</ThemedText>
-      </ThemedView>
+        </ThemedView >
+      </Pressable>
       );
+      
     };
 
-    if(!isOpen){
+
-    return (
-        <View style={styles.closedSelectZone}>
-          <ThemedButton  style={styles.button} lvl={2} onPress={onPressOpen}>
-            <ThemedText style={styles.buttonText}>Open</ThemedText>
-          </ThemedButton>
-        </View>
-    )
-    }
-    else{
     return(
-        <View style={styles.openedSelectZone}>
+      <Animated.View 
-          <BlurView intensity={1} blurReductionFactor={0.2} experimentalBlurMethod='dimezisBlurView' style={styles.blur}>
+      layout={LinearTransition.duration(200)}
-            <ThemedView lvl={0} opacity="40">
+      style={isOpen ? styles.windowOpean : styles.windowClose}>
 
-                <ThemedButton  style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
+        <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
-                  <ThemedText style={styles.buttonText}>Close</ThemedText>
+          <ThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
+            <ThemedText style={styles.buttonText}>{isOpen ? "Close" : "Open"}</ThemedText>
           </ThemedButton>
-
+          {isOpen &&
-                <View style={styles.searchZone}>
+            <View style={styles.menu}>
                 <ThemedTextInput
                   lvl={1}
                   border={4}
@@ -61,73 +80,73 @@ export default function SelectChantier() {
                   value={search}
                   onChangeText={setSearch}
                 />
-                </View>
+                  <ThemedView lvl={2} style={styles.list}>
+                    <ScrollView contentContainerStyle={styles.chantiersList} >
                       
-                
-                  <ScrollView>
                       {chantiers.map((chantier, index) => (
                         renderChantier(chantier, index)
                         ))
                       }
                     </ScrollView>
-                  
-
                   </ThemedView>
-            
-        </BlurView>
             </View>
-
+          }
-
+        </AnimatedThemedView>
+      </Animated.View>
     )
-    };
+    
 }
 
 const styles = StyleSheet.create({
-  openedSelectZone:{
+
-    position: 'absolute',
+  windowClose:{
-    width: "100%",
+    //backgroundColor: '#00FFFF',
-    borderRadius: 10,
+    //borderRadius:10,
-    zIndex: 9999,
+    padding: 10,
-    elevation: 9999,
+    width:"50%",
-    overflow: "hidden",
+    height:60,
-    paddingTop:25,
+    overflow: 'hidden',    
+  },
+  windowOpean:{
+    //backgroundColor: '#00FFFF',
+    //borderRadius:10,
+    width:"100%",
     height: screenHeight/2,
+    padding: 10,
   },
-  blur:{
+  window:{
-    /*flex: 1,*/
+    borderRadius:15,
-    /*backgroundColor: "rgba(255,255,255,0.0001)",*/
+    height: "100%",
+    //backgroundColor: '#00FF00',
+    overflow: 'hidden',
   },
-  closedSelectZone:{
+  menu:{
-    position: 'absolute',
+    padding:5,
-    width: "50%",
+    flex: 1, 
-    borderRadius: 10,
+    minHeight: 0,
-    zIndex: 9999,
+    //backgroundColor:'#FF00FF',
-    elevation: 9999,
   },
-  titleContainer: {
+  list:{
-    flexDirection: 'row',
+    flex: 1,
-    alignItems: 'center',
+    overflow: 'hidden',
+    borderRadius:10,
+
+  },
+  chantiersList:{
+    //padding:5,
+    //backgroundColor:'0000FF',
+    //flexDirection: 'row',
+    //alignItems: 'center',
     gap: 8,
-  },
-  searchMenu:{
-    color:'#FFAAAA',
-    borderRadius: 5,
-    width: "100%",
-    margin: 0,
     
-    
-  },
-    searchZone:{
-    width: "100%",
-    padding:10,
-    marginTop:10,
-    alignItems: 'center',
   },
   chantier:{
-    padding:10,
+    padding:5,
-    margin:10,
+    //marginTop:5,
+    //margin:5,
     borderRadius:10,
     //borderWidth: 1,
+    
   },
   input: {
     width: '100%',
@@ -135,18 +154,21 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     padding: 10,
     fontSize: 16,
+    marginBottom:10,
   },
-  button:{
+  buttonClose:{
     width:'100%',
-    margin: 5,
+    margin: 0,
-    borderRadius: 10,
+    borderRadius: 15,
     padding: 10,
+    height:40,
   },
   buttonOpen:{
     width:'50%',
     margin: 5,
     borderRadius: 10,
     padding: 10,
+    height:40,
   },
   buttonText:{
     textAlign: 'center',

components/themed-button.tsx

@@ -1,4 +1,4 @@
-import { Pressable, type PressableProps } from 'react-native';
+import { Pressable, ViewStyle, type PressableProps } from 'react-native';
 
 import { useThemeColor } from '@/hooks/use-theme-color';
 
@@ -8,10 +8,11 @@ export type ThemedPressableProps = PressableProps & {
   lvl?:number;
   border?:number;
   opacity?:string;
+  shadow?: boolean;
 };
 
 //nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
-export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF", ...otherProps }: ThemedPressableProps) {
+export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF",shadow=false, ...otherProps }: ThemedPressableProps) {
   var lvlStr:string = "background";
   var borderColor ="";
   if(lvl>=0 && lvl<6){
@@ -33,7 +34,15 @@ export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opac
     }
   }
 
+  const shadowStyle: ViewStyle = {
+    //android
+    elevation: 10,
+    //iOS
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+  }
 
-
+  return <Pressable  style={(state) =>[{ backgroundColor, borderColor }, shadow && shadowStyle, typeof style === 'function' ? style(state) : style,]} {...otherProps}/>;
-  return <Pressable  style={(state) =>[{ backgroundColor, borderColor }, typeof style === 'function' ? style(state) : style,]} {...otherProps}/>;
 }

components/themed-textinpute.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, TextInput, type TextInputProps } from 'react-native';
+import { StyleSheet, TextInput, ViewStyle, type TextInputProps } from 'react-native';
 
 import { useThemeColor } from '@/hooks/use-theme-color';
 
@@ -41,7 +41,6 @@ export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lv
     }
   }
 
-
   return (
     <TextInput
       style={[

components/themed-view.tsx

@@ -1,4 +1,4 @@
-import { View, type ViewProps } from 'react-native';
+import { View, ViewStyle, type ViewProps } from 'react-native';
 
 import { useThemeColor } from '@/hooks/use-theme-color';
 
@@ -8,11 +8,12 @@ export type ThemedViewProps = ViewProps & {
   lvl?:number;
   border?:number;
   opacity?:string;
+  shadow?: boolean;
 };
 
 
 //nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
-export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF", ...otherProps }: ThemedViewProps) {
+export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF",shadow=false, ...otherProps }: ThemedViewProps) {
   var lvlStr:string = "background";
   var borderColor ="";
   if(lvl>=0 && lvl<6){
@@ -34,7 +35,15 @@ export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1,opacit
     }
   }
 
+  const shadowStyle: ViewStyle = {
+    //android
+    elevation: 10,
+    //iOS
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+  }
 
-
+  return <View style={[{ backgroundColor, borderColor }, shadow && shadowStyle, style]} {...otherProps} />;
-  return <View style={[{ backgroundColor, borderColor }, style]} {...otherProps} />;
 }

constants/theme.ts

@@ -13,11 +13,11 @@ export const Colors = {
     text: '#11181C',
     text_: '#ECEDEE',
     background0: '#ffffff',
-    background1: '#F0F0F0',
+    background1: '#F1F1F0',
-    background2: '#E0E0E0',
+    background2: '#E2E1E0',
-    background3: '#D0D0D0',
+    background3: '#D3D2D0',
-    background4: '#C0C0C0',
+    background4: '#C4C2C0',
-    background5: '#B0B0B0',
+    background5: '#B5B3B0',
     tint: tintColorLight,
     icon: '#687076',
     tabIconDefault: '#687076',
@@ -27,11 +27,11 @@ export const Colors = {
     text: '#ECEDEE',
     text_: '#11181C',
     background0: '#000000',
-    background1: '#101112',
+    background1: '#111010',
-    background2: '#202224',
+    background2: '#222120',
-    background3: '#303336',
+    background3: '#333130',
-    background4: '#404448',
+    background4: '#444240',
-    background5: '#50555A',
+    background5: '#555250',
     tint: tintColorDark,
     icon: '#9BA1A6',
     tabIconDefault: '#9BA1A6',