clean des composants, dossiers

components/theme/themed-button.tsx

@@ -0,0 +1,50 @@
+import { Pressable, ViewStyle, type PressableProps } from 'react-native';
+
+import { useThemeColor } from '@/hooks/use-theme-color';
+
+export type ThemedPressableProps = PressableProps & {
+  lightColor?: string;
+  darkColor?: string;
+  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",shadow=false, ...otherProps }: ThemedPressableProps) {
+  var lvlStr:string = "background";
+  var borderColor ="";
+  var borderWidth = 0;
+  if(lvl>=0 && lvl<6){
+    lvlStr+=lvl;
+  }
+  else lvlStr+='5';
+
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
+
+
+  if(border!=-1){
+    var borderStr = "";
+    if(border>=0 && border<6){
+      borderStr="background"+border;
+      borderColor = useThemeColor({ light: lightColor, dark: darkColor },borderStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
+      borderWidth = 2;
+    }
+    else{
+      borderColor = backgroundColor
+    }
+  }
+
+  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, borderWidth }, shadow && shadowStyle, typeof style === 'function' ? style(state) : style,]} {...otherProps}/>;
+}

components/theme/themed-mapview.tsx

@@ -0,0 +1,22 @@
+import MapView, { Marker, PROVIDER_DEFAULT, type MapViewProps  } from 'react-native-maps';
+
+
+import { useThemeColor, useThemeColorMap } from '@/hooks/use-theme-color';
+
+export type ThemedMapViewProps = MapViewProps & {
+  lightColor?: string;
+  darkColor?: string;
+};
+
+export function ThemedMapView({children, style, lightColor, darkColor, ...otherProps }: ThemedMapViewProps) {
+
+
+  const mapeStyle = useThemeColorMap();
+
+
+
+
+  return<MapView customMapStyle={mapeStyle} style={style} {...otherProps}>
+      {children}
+      </MapView>;
+}

components/theme/themed-text.tsx

@@ -0,0 +1,68 @@
+import { StyleSheet, Text, type TextProps } from 'react-native';
+
+import { useThemeColor } from '@/hooks/use-theme-color';
+
+export type ThemedTextProps = TextProps & {
+  lightColor?: string;
+  darkColor?: string;
+  reverse?:boolean;
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+};
+
+export function ThemedText({
+  style,
+  lightColor,
+  darkColor,
+  reverse,
+  type = 'default',
+
+  ...rest
+}: ThemedTextProps) {
+
+  var text:string = 'text'
+  if(reverse){
+    text += '_';
+  }
+  const color = useThemeColor({ light: lightColor, dark: darkColor }, text as 'text'|'text_');
+
+  return (
+    <Text
+      style={[
+        { color },
+        type === 'default' ? styles.default : undefined,
+        type === 'title' ? styles.title : undefined,
+        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
+        type === 'subtitle' ? styles.subtitle : undefined,
+        type === 'link' ? styles.link : undefined,
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  default: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  defaultSemiBold: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  link: {
+    lineHeight: 30,
+    fontSize: 16,
+    color: '#0a7ea4',
+  },
+});

components/theme/themed-textinput.tsx

@@ -0,0 +1,86 @@
+import { StyleSheet, TextInput, ViewStyle, type TextInputProps } from 'react-native';
+
+import { useThemeColor } from '@/hooks/use-theme-color';
+
+export type ThemedTextInputProps = TextInputProps & {
+  lightColor?: string;
+  darkColor?: string;
+  reverse?:boolean;
+  lvl?:number;
+  border?:number;
+  opacity?:string;
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+};
+
+//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
+export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lvl=1,border=-1,opacity="FF",type = 'default', ...rest}: ThemedTextInputProps) {
+
+  var text:string = 'text'
+  if(reverse){
+    text += '_';
+  }
+  const color = useThemeColor({ light: lightColor, dark: darkColor}, text as 'text'|'text_');
+
+  var lvlStr:string = "background";
+  var borderColor ="";
+  if(lvl>=0 && lvl<6){
+    lvlStr+=lvl;
+  }
+  else lvlStr+='5';
+
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
+
+
+  if(border!=-1){
+    if(border>=0 && border<6){
+      const borderStr="background"+border;
+      borderColor = useThemeColor({ light: lightColor, dark: darkColor },borderStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
+    }
+    else{
+      borderColor = backgroundColor
+    }
+  }
+
+  return (
+    <TextInput
+      style={[
+        { color,backgroundColor,borderColor },
+        type === 'default' ? styles.default : undefined,
+        type === 'title' ? styles.title : undefined,
+        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
+        type === 'subtitle' ? styles.subtitle : undefined,
+        type === 'link' ? styles.link : undefined,
+        style,
+      ]}
+      {...rest}
+      placeholderTextColor="#808080"
+    />
+  );
+  
+}
+
+const styles = StyleSheet.create({
+  default: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  defaultSemiBold: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  link: {
+    lineHeight: 30,
+    fontSize: 16,
+    color: '#0a7ea4',
+  },
+});

components/theme/themed-view.tsx

@@ -0,0 +1,51 @@
+import { View, ViewStyle, type ViewProps } from 'react-native';
+
+import { useThemeColor } from '@/hooks/use-theme-color';
+
+export type ThemedViewProps = ViewProps & {
+  lightColor?: string;
+  darkColor?: string;
+  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",shadow=false, ...otherProps }: ThemedViewProps) {
+  var lvlStr:string = "background";
+  var borderColor ="";
+  var borderWidth =0;
+  if(lvl>=0 && lvl<6){
+    lvlStr+=lvl;
+  }
+  else lvlStr+='5';
+
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
+
+
+  if(border!=-1){
+    var borderStr = "";
+    if(border>=0 && border<6){
+      borderStr="background"+border;
+      borderColor = useThemeColor({ light: lightColor, dark: darkColor },borderStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
+      borderWidth = 2;
+    }
+    else{
+      borderColor = backgroundColor
+    }
+  }
+
+  const shadowStyle: ViewStyle = {
+    //android
+    elevation: 10,
+    //iOS
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+  }
+
+  return <View style={[{ backgroundColor, borderColor, borderWidth }, shadow && shadowStyle, style]} {...otherProps} />;
+}