Text.tsx

import { TranslateOptions } from 'i18n-js/typings'
import {StyleProp, Text as RNText, TextProps as RNTextProps, TextStyle} from 'react-native'
import { TxKeyPath, useI18n } from '../hooks/useI18n'
import { ThemeProps, useThemeColor } from './Themed'

const presets = {
  default: {fontSize: 17, lineHeight: 24, fontWeight: 'normal'} as StyleProp<TextStyle>,
  primary: {fontSize: 17, lineHeight: 24, fontWeight: '600'} as StyleProp<TextStyle>,
  secondary: {fontSize: 17, lineHeight: 24, fontWeight: 'normal'} as StyleProp<TextStyle>,
  header: {fontSize: 27, lineHeight: 34, fontWeight: '600' } as StyleProp<TextStyle>,
  placeholder: {fontSize: 15, lineHeight: 20, fontWeight: '300' } as StyleProp<TextStyle>,
};
export type Presets = keyof typeof presets;
export type TextProps = RNTextProps & ThemeProps & {
  tx?: TxKeyPath
  txOptions?: TranslateOptions
  preset?: Presets
}
export function Text(props: TextProps) {
  const {tx, txOptions, children, darkColor, lightColor, style, ...textProps} = props
  const i18n = useI18n()
  const text = typeof tx === 'string' ? i18n.t(tx, txOptions) : children
  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
  const preset: StyleProp<TextStyle> = presets[textProps.preset || 'default'];
  const textStyle = [{color}, preset, style]
  return <RNText {...textProps} style={textStyle}>{text}</RNText>
}

<Text preset="header">Text Header</Text>

<Text preset="primary">Text Primary</Text>