47 lines
No EOL
2.1 KiB
TypeScript
47 lines
No EOL
2.1 KiB
TypeScript
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}/>
|
|
} |