test commit

components/themed-components.tsx

@@ -0,0 +1,47 @@
+import { Text as DefaultText, View as DefaultView, useColorScheme} from "react-native";
+import colors from "../constants/colors";
+
+type ThemeProperties = {
+    lightColor?: string;
+    darkColor?: string;
+};
+
+/**
+ * It is a TypeScript intersection type encompassing both ThemeProperties and DefaultReactComponent properties.
+ */
+export type TextProperties = ThemeProperties & DefaultText["props"];
+export type ViewProperties = ThemeProperties & DefaultView["props"];
+
+
+/**
+ * This function 'useThemeColor' allows you to apply different colors for light and dark theme mode in a React Native application.
+ * The function takes a 'properties' object (with possible 'light' and 'dark' properties representing color strings) and 'colorName' - a key from predefined colors for both 'light' and 'dark' mode.
+ * The function first checks the current color scheme using the 'useColorScheme' hook from React Native, defaulting to 'light' mode if none is defined. 
+ * If no color is specified in 'properties' for current theme, the function falls back to returning a color corresponding to the provided 'colorName' from the predefined 'colors' object for the current theme.
+*/
+export function useThemeColor(
+    properties: {light?: string, dark?: string},
+    colorName: keyof typeof colors.light & keyof typeof colors.dark
+) {
+    const theme = useColorScheme() ?? "light";
+    const colorFromProps = properties[theme];
+    
+    if(colorFromProps) {
+        return colorFromProps;
+    }
+    return colors[theme][colorName];
+}
+
+export function Text(properties: TextProperties) {
+    const { style, lightColor, darkColor, ...otherProps } = properties;
+    const color = useThemeColor({ light: lightColor, dark: darkColor }, "color");
+    
+    return <DefaultText style={[{ color }, style]} {...otherProps} />
+}
+
+export function View(properties: TextProperties) {
+    const { style, lightColor, darkColor, ...otherProps } = properties;
+    const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, "backgroundColor");
+    
+    return <DefaultView style={[{backgroundColor}, style]} {...otherProps}/>
+}