rn-base-project-expo/src/components/ThemedText.tsx at 2ee7f3419cb0bb83867defe439ffda846dbf757e · saigontechnology/rn-base-project-expo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React from 'react'
import { Text, type TextProps, StyleSheet } from 'react-native'

import { useThemeColor } from '@/hooks/useThemeColor'
import { colors, fonts, fontSizes, lineHeights } from '@/themes'

export type ThemedTextProps = TextProps & {
  lightColor?: string
  darkColor?: string
  type?:
    | 'span'
    | 'spanMedium'
    | 'small'
    | 'smallMedium'
    | 'body'
    | 'bodyMedium'
    | 'title'
    | 'subtitle'
    | 'link'
    | 'label'
}

export const ThemedText: React.FC<ThemedTextProps> = ({
  style,
  lightColor,
  darkColor,
  type = 'body',
  ...rest
}) => {
  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text')

  return (
    <Text
      style={[
        { color },
        type === 'span' ? styles.span : undefined,
        type === 'spanMedium' ? styles.spanMedium : undefined,
        type === 'small' ? styles.small : undefined,
        type === 'smallMedium' ? styles.smallMedium : undefined,
        type === 'body' ? styles.body : undefined,
        type === 'bodyMedium' ? styles.bodyMedium : undefined,
        type === 'title' ? styles.title : undefined,
        type === 'subtitle' ? styles.subtitle : undefined,
        type === 'link' ? styles.link : undefined,
        type === 'label' ? styles.label : undefined,
        style,
      ]}
      {...rest}
    />
  )
}

const styles = StyleSheet.create({
  span: {
    fontSize: fontSizes.span,
    fontFamily: fonts.regular,
    lineHeight: lineHeights.span,
  },
  spanMedium: {
    fontSize: fontSizes.span,
    fontFamily: fonts.medium,
    lineHeight: lineHeights.span,
  },
  small: {
    fontSize: fontSizes.small,
    fontFamily: fonts.regular,
    lineHeight: lineHeights.small,
  },
  smallMedium: {
    fontSize: fontSizes.small,
    fontFamily: fonts.medium,
    lineHeight: lineHeights.small,
  },
  body: {
    fontSize: fontSizes.body,
    fontFamily: fonts.regular,
    lineHeight: lineHeights.body,
  },
  bodyMedium: {
    fontSize: fontSizes.body,
    fontFamily: fonts.medium,
    lineHeight: lineHeights.body,
  },
  title: {
    fontSize: fontSizes.title,
    fontFamily: fonts.bold,
    lineHeight: lineHeights.title,
  },
  subtitle: {
    fontSize: fontSizes.large,
    fontFamily: fonts.bold,
    lineHeight: lineHeights.large,
  },
  link: {
    fontSize: fontSizes.body,
    color: colors.info,
    fontFamily: fonts.regular,
    lineHeight: lineHeights.body,
  },
  label: {
    fontSize: fontSizes.label,
    fontFamily: fonts.medium,
    lineHeight: lineHeights.label,
  },
})