select chantier en cours

app/(tabs)/explore.tsx

@@ -1,13 +1,14 @@
 import { Image } from 'expo-image';
 import { Platform, StyleSheet } from 'react-native';
 
-import { Collapsible } from '@/components/ui/collapsible';
 import { ExternalLink } from '@/components/external-link';
 import ParallaxScrollView from '@/components/parallax-scroll-view';
 import { ThemedText } from '@/components/themed-text';
 import { ThemedView } from '@/components/themed-view';
+import { Collapsible } from '@/components/ui/collapsible';
 import { IconSymbol } from '@/components/ui/icon-symbol';
 import { Fonts } from '@/constants/theme';
+import SelectChantier from './selectChantier';
 
 export default function TabTwoScreen() {
   return (
@@ -21,7 +22,9 @@ export default function TabTwoScreen() {
           style={styles.headerImage}
         />
       }>
+      <SelectChantier></SelectChantier>
       <ThemedView style={styles.titleContainer}>
+        
         <ThemedText
           type="title"
           style={{

app/(tabs)/selectChantier.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Button, GestureResponderEvent, ScrollView, StyleSheet, TextInput, View } from 'react-native';
+
+export default function SelectChantier() {
+
+    const [search, setSearch] = useState('');
+    const [isOpen,setIsOpen] = useState(false);
+
+  function onPressOpen(event: GestureResponderEvent): void {
+    setIsOpen(!isOpen);
+  }
+
+    return (
+        <View style={styles.selectZone}>
+          {!isOpen && (
+             <Button onPress={onPressOpen} title={"Open"}/>
+          )}
+           {isOpen && (
+            <ScrollView>
+               <Button onPress={onPressOpen} title={"Close"}/>
+                <View style={styles.searchZone}>
+                    <View style={styles.searchMenu}>
+                        <TextInput
+                            placeholder='Rechercher un chantier'
+                            value={search}
+                            onChangeText={setSearch}
+                        />
+                    </View>
+                </View>
+                
+                <View>
+
+                </View>
+            </ScrollView>
+           )}
+        </View>
+
+    );
+}
+
+const styles = StyleSheet.create({
+  titleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  searchMenu:{
+    backgroundColor: "#BB0000",
+    width: "100%",
+    margin: 0,
+
+    
+  },
+    searchZone:{
+    width: "100%",
+    padding:20,
+    marginTop:50,
+    alignItems: 'center',
+  },
+  selectZone:{
+    position: 'absolute',
+    backgroundColor: "#FF0000",
+    width: "100%",
+    margin: 10,
+    borderRadius: 5,
+    zIndex: 9999,
+    elevation: 9999,
+  }
+});

app/_layout.tsx

@@ -13,13 +13,14 @@ export default function RootLayout() {
   const colorScheme = useColorScheme();
 
   return (
+
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Stack>
-        <Stack.Screen name="selectChantier" options={{ headerShown: false }}/>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
       </Stack>
       <StatusBar style="auto" />
     </ThemeProvider>
+
   );
 }

app/selectChantier.tsx

@@ -1,43 +0,0 @@
-import { useState } from 'react';
-import { ScrollView, StyleSheet, TextInput, View } from 'react-native';
-
-export default function SelectChantier() {
-
-      const [search, setSearch] = useState('');
-
-
-    return (
-        <ScrollView>
-            <View style={styles.searchZone}>
-                <TextInput
-                    placeholder='Rechercher un chantier'
-                    value={search}
-                    onChangeText={setSearch}
-                />
-            </View>
-            
-            <View>
-
-            </View>
-        </ScrollView>
-
-    );
-}
-
-const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  searchZone:{
-    position: 'absolute',
-    backgroundColor: "#FF0000",
-    width: "100%",
-    margin: 0,
-    padding:20,
-    alignItems: 'center',
-
-    
-  }
-});