1import { useTheme } from '@react-navigation/native'; 2import * as React from 'react'; 3import { Text } from 'react-native'; 4 5import Colors, { ColorTheme } from '../constants/Colors'; 6 7type TextProps = Text['props']; 8interface Props extends TextProps { 9 lightColor?: string; 10 darkColor?: string; 11} 12 13type ThemedColors = keyof typeof Colors.light & keyof typeof Colors.dark; 14 15function useThemeColor(props: Props, colorName: ThemedColors) { 16 const theme = useTheme(); 17 const themeName = theme.dark ? ColorTheme.DARK : ColorTheme.LIGHT; 18 const colorFromProps = themeName === ColorTheme.DARK ? props.darkColor : props.lightColor; 19 20 if (colorFromProps) { 21 return colorFromProps; 22 } else { 23 return Colors[themeName][colorName]; 24 } 25} 26 27export const StyledText = (props: Props) => { 28 const { style, ...otherProps } = props; 29 const color = useThemeColor(props, 'text'); 30 31 return <Text style={[{ color }, style]} {...otherProps} />; 32}; 33