Label component for common typography | react-native, typescript

Label.tsx

import React, { useMemo } from 'react'
import { Text } from 'react-native'

type LabelProps = {
  children: string | number,
  size: 'small' | 'normal' | 'medium' | 'large' | 'xlarge' | 'xxlarge',
  weight: 'light' | 'regular' | 'medium' | 'bold',
  color: 'primary' | 'secondary' | 'disabled',
}

const Label: React.FC<LabelProps> = ({
  children,
  size,
  weight,
  color,
}: LabelProps) => {
  const sizeValue: number = useMemo(
    () => ({
      small: 14,
      normal: 16,
      medium: 20,
      large: 24,
      xlarge: 32,
      xxlarge: 72,
    }[size]),
    [size],
  )
  const weightValue: '300' | '400' | '500' | '700' = useMemo(
    () => ({
      light: '300' as const,
      regular: '400' as const,
      medium: '500' as const,
      bold: '700' as const,
    }[weight]),
    [weight],
  )
  const colorValue: string = useMemo(
    () => ({
      primary: '#212121',
      secondary: '#666666',
      disabled: '#00000050',
    }[color]),
    [color],
  )

  return (
    <Text
      style={{
        fontSize: sizeValue,
        fontWeight: weightValue,
        color: colorValue,
      }}
    >
      {children}
    </Text>
  )
}

export default Label