test

components/selectChantier.tsx

@@ -5,7 +5,6 @@ import { useEffect, useState } from "react";
 import {
   Dimensions,
   Image,
-  LayoutAnimation,
   Pressable,
   ScrollView,
   StyleSheet,
@@ -42,9 +41,16 @@ export default function SelectChantier() {
   const AnimatedThemedTextInput =
     Animated.createAnimatedComponent(ThemedTextInput);
 
-  function onPressOpen(): void {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+  async function onPressOpen(){
     setIsOpen(!isOpen);
+    if(!isOpen){
+      const updatedChantiers = await getChantiers();
+      setChantiers(updatedChantiers)
+    }
+  }
+
+  function onPressAddChantier(){
+
   }
 
   useEffect(() => {
@@ -90,15 +96,28 @@ export default function SelectChantier() {
         </AnimatedThemedButton>
         {isOpen && (
           <View style={styles.menu}>
+
             <ThemedTextInput lvl={1} border={4} style={styles.input} placeholder="Rechercher un chantier" value={search} onChangeText={setSearch}/>
+
+            <ThemedButton style={styles.buttonAdd} onPress={() => onPressAddChantier()}>
+              <ThemedText style={styles.buttonText}>
+                +
+              </ThemedText>
+            </ThemedButton>
+
             <ThemedView lvl={2} style={styles.list}>
               <ScrollView contentContainerStyle={styles.chantiersList}>
                 {chantiers.map((chantier, index) =>
+                <>
                   renderChantier(chantier, index)
+                  renderChantier(chantier, index)
+                  renderChantier(chantier, index)
+                  renderChantier(chantier, index)
+                </>
                 )}
               </ScrollView>
             </ThemedView>
-          </View>
+        </View>
         )}
       </AnimatedThemedView>
     </Animated.View>
@@ -197,4 +216,8 @@ const styles = StyleSheet.create({
   buttonText: {
     textAlign: "center",
   },
+  buttonAdd:{
+    borderRadius: 10,
+    marginBottom: 10,
+  }
 });