React Native Text Wrapper

Text.tsx

import React from 'react';
import {
  StyleSheet,
  Text as RNText,
  TextProps as RNTextProps,
  TextStyle,
} from 'react-native';

const styles = StyleSheet.create({
  header: {
    fontSize: 32,
    fontWeight: 'bold',
    lineHeight: 40,
    textTransform: 'uppercase',
  },
  subheader: {
    fontSize: 24,
    fontWeight: '600',
    lineHeight: 30,
  },
  body: {
    fontSize: 16,
    fontWeight: 'normal',
    lineHeight: 24,
  },
  defaultColor: { color: '#000000' },
});

type PresetNames = 'header' | 'subheader' | 'body';

export interface TextProps extends RNTextProps {
  text?: string;
  preset?: PresetNames;
  color?: string;
}

export function BrandText(props: TextProps) {
  const {
    text,
    preset = 'body',
    color = styles.defaultColor.color,
    style,
    ...rest
  } = props;

  const presetStyle = styles[preset] || styles.body;
  const colorStyle = { color };
  const combinedStyles = [presetStyle, colorStyle, style];

  return (
    <RNText {...rest} style={combinedStyles}>
      {text}
    </RNText>
  );
}