theme

components/Theme.tsx

@@ -0,0 +1,17 @@
+import {Appearance,ColorSchemeName } from "react-native";
+import {lightTheme,darkTheme} from './themeColors';
+
+
+declare global {
+    var theme: typeof  lightTheme;
+}
+
+global.theme = Appearance.getColorScheme() === "light" ? lightTheme : darkTheme;
+
+
+/*Appearance.addChangeListener(({ colorScheme }) => {
+    if(colorScheme==="light"){
+        global.theme = lightTheme;
+    }
+    else global.theme = darkTheme;
+});*/

components/selectChantier.tsx

@@ -0,0 +1,85 @@
+import { ThemedView } from '@/components/themed-view';
+import { useState } from 'react';
+import { Button, GestureResponderEvent, ScrollView, StyleSheet, TextInput, View } from 'react-native';
+import "@/components/Theme";
+
+export default function SelectChantier() {
+
+    const [search, setSearch] = useState('');
+    const [isOpen,setIsOpen] = useState(false);
+    const [chantiers,setChantiers] = useState([]);
+    
+
+  function onPressOpen(event: GestureResponderEvent): void {
+    setIsOpen(!isOpen);
+  }
+
+
+    const renderChantier = ()  => {
+      return(
+      <View style={styles.chantier}>
+      </View>
+      );
+    };
+
+    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({
+    selectZone:{
+    position: 'absolute',
+    backgroundColor: global.theme.colors.c0,
+    width: "100%",
+    margin: 0,
+    borderRadius: 5,
+    zIndex: 9999,
+    elevation: 9999,
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  searchMenu:{
+    backgroundColor: global.theme.colors.c2,
+    borderRadius: 5,
+    width: "100%",
+    margin: 0,
+
+    
+  },
+    searchZone:{
+    width: "100%",
+    padding:20,
+    marginTop:50,
+    alignItems: 'center',
+  },
+  chantier:{
+    backgroundColor:'#202020'
+  }
+});

components/themeColors.tsx

@@ -0,0 +1,25 @@
+export const lightTheme = {
+  colors: {
+    text: '#000000',
+    text2: '#505050',
+    c0: '#FFFFFF',
+    c1: '#F0F0F0',
+    c2: '#E0E0E0',
+    c3: '#D0D0D0',
+    c4: '#C0C0C0',
+    c5: '#B0B0B0',
+  },
+};
+
+export const darkTheme = {
+  colors: {
+    text: '#FFFFFF',
+    text2: '#B0B0B0',
+    c0:'#000000',
+    c1: '#101010',
+    c2: '#202020',
+    c3: '#303030',
+    c4: '#404040',
+    c5: '#505050',
+  },
+};