theme

app/(tabs)/explore.tsx

@@ -1,5 +1,5 @@
 import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import { ExternalLink } from '@/components/external-link';
 import ParallaxScrollView from '@/components/parallax-scroll-view';
@@ -8,7 +8,8 @@ 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';
+import SelectChantier from '@/components/selectChantier';
+
 
 export default function TabTwoScreen() {
   return (
@@ -21,8 +22,10 @@ export default function TabTwoScreen() {
           name="chevron.left.forwardslash.chevron.right"
           style={styles.headerImage}
         />
-      }>
-      <SelectChantier></SelectChantier>
+    }>
+      <ThemedView style={styles.selectChantier}>
+        <SelectChantier ></SelectChantier>
+      </ThemedView>
       <ThemedView style={styles.titleContainer}>
         
         <ThemedText
@@ -112,4 +115,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     gap: 8,
   },
+  selectChantier:{
+    width:"100%",
+    margin:0
+  },
 });

app/(tabs)/selectChantier.tsx

@@ -1,69 +0,0 @@
-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,
-  }
-});