summaryrefslogtreecommitdiff
path: root/components/ThemedText.tsx
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2024-08-28 15:53:21 +0200
committerSanto Cariotti <santo@dcariotti.me>2024-08-28 15:53:21 +0200
commit83643a78b73dee5610be6ad9837fb72e9b944cb7 (patch)
tree1eca6bad452656f78879c829181362f3b586d697 /components/ThemedText.tsx
Initial commit
Generated by create-expo-app 3.0.0.
Diffstat (limited to 'components/ThemedText.tsx')
-rw-r--r--components/ThemedText.tsx60
1 files changed, 60 insertions, 0 deletions
diff --git a/components/ThemedText.tsx b/components/ThemedText.tsx
new file mode 100644
index 0000000..c0e1a78
--- /dev/null
+++ b/components/ThemedText.tsx
@@ -0,0 +1,60 @@
+import { Text, type TextProps, StyleSheet } from 'react-native';
+
+import { useThemeColor } from '@/hooks/useThemeColor';
+
+export type ThemedTextProps = TextProps & {
+ lightColor?: string;
+ darkColor?: string;
+ type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+};
+
+export function ThemedText({
+ style,
+ lightColor,
+ darkColor,
+ type = 'default',
+ ...rest
+}: ThemedTextProps) {
+ const color = useThemeColor({ light: lightColor, dark: darkColor }, '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',
+ },
+});