this repo has no description
hailey.at
1import { StyleSheet, Text, type TextProps } from 'react-native';
2
3import { useThemeColor } from '@/hooks/useThemeColor';
4
5export type ThemedTextProps = TextProps & {
6 lightColor?: string;
7 darkColor?: string;
8 type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
9};
10
11export function ThemedText({
12 style,
13 lightColor,
14 darkColor,
15 type = 'default',
16 ...rest
17}: ThemedTextProps) {
18 const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
19
20 return (
21 <Text
22 style={[
23 { color },
24 type === 'default' ? styles.default : undefined,
25 type === 'title' ? styles.title : undefined,
26 type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
27 type === 'subtitle' ? styles.subtitle : undefined,
28 type === 'link' ? styles.link : undefined,
29 style,
30 ]}
31 {...rest}
32 />
33 );
34}
35
36const styles = StyleSheet.create({
37 default: {
38 fontSize: 16,
39 lineHeight: 24,
40 },
41 defaultSemiBold: {
42 fontSize: 16,
43 lineHeight: 24,
44 fontWeight: '600',
45 },
46 title: {
47 fontSize: 32,
48 fontWeight: 'bold',
49 lineHeight: 32,
50 },
51 subtitle: {
52 fontSize: 20,
53 fontWeight: 'bold',
54 },
55 link: {
56 lineHeight: 30,
57 fontSize: 16,
58 color: '#0a7ea4',
59 },
60});