Text.js

import React from 'react'
import { Text as RNText, StyleSheet } from 'react-native'
import colors from '~/constants/colors'

const styles = StyleSheet.create({
  base: {
    fontFamily: 'open-sans-regular',
    backgroundColor: 'transparent',
    color: colors.black,
    fontSize: 16
  },
  // Colors
  secondary: {
    color: colors.light
  },
  primary: {
    color: colors.primary
  },
  white: {
    color: colors.white
  },
  // Sizes
  xsmall: {
    fontSize: 12
  },
  small: {
    fontSize: 14
  },
  large: {
    fontSize: 18
  },
  xlarge: {
    fontSize: 20
  },
  // Highlights
  bold: {
    fontFamily: 'open-sans-bold'
  },
  light: {
    fontFamily: 'open-sans-light'
  },
  // Positioning
  centered: {
    textAlign: 'center'
  }
})

export default class Text extends React.PureComponent {
  render () {
    const {
      style, children,
      size,
      primary, secondary, white,
      bold, light,
      centered,
      ...otherProps
    } = this.props

    const passedStyle = [
      styles.base,
      primary && styles.primary,
      secondary && styles.secondary,
      white && styles.white,
      size && styles[size],
      light && styles.light,
      bold && styles.bold,
      centered && styles.centered,
      style
    ]

    return (
      <RNText
        style={passedStyle}
        {...otherProps}
      >
        {children}
      </RNText>
    )
  }
}