React Native Font System Code

react-native-font-system-code.js

// constants/fonts.js

/*
Define font constants so they are easy to refactor
if you need to change your pimary font
*/

export const PRIMARY_FONT_REGULAR = 'NunitoSans-Regular';
export const PRIMARY_FONT_SEMI = 'NunitoSans-SemiBold';
export const PRIMARY_FONT_BOLD = 'NunitoSans-Bold';

/* -------------------------------------------------------------- */
// components/Text/index.js

export { default } from './Text';

/* -------------------------------------------------------------- */
// components/Text/Text.js

import React from 'react';
import { arrayOf, instanceOf, oneOf, oneOfType, string } from 'prop-types';
import { Text as RNText } from 'react-native';

import styles from './Text.styles';

// AVAILABLE TEXT TYPES
/*
	Define all your text types here and add them to the typeShape.
	That way they are validated with the prop-type checker.
*/
const H1 = 'H1';
const H2 = 'H2';
const H3 = 'H3';
const H4 = 'H4';
const P1 = 'P1';
const P2 = 'P2';
const P3 = 'P3';

export const typeShape = oneOf([H1, H2, H3, H4, P1, P2, P3]);

/*
	You can set extra styles that add or override to the default ones.
	You can also pass any other RN Text component props.
*/
const Text = ({ children = '', as = P1, style, ...restProps }) => (
  <RNText style={[styles.base, styles[as], style]} {...restProps}>
    {children}
  </RNText>
);

Text.propTypes = {
  children: oneOfType([string, instanceOf(Text), instanceOf(RNText)]),
  as: typeShape,
  style: oneOfType([arrayOf(RNText.propTypes.style), RNText.propTypes.style]),
};

export default Text;

/* -------------------------------------------------------------- */
// components/Text/Text.styles.js

import { StyleSheet } from 'react-native';

import {
	PRIMARY_FONT_REGULAR,
	PRIMARY_FONT_BOLD,
	PRIMARY_FONT_SEMI,
} from '..(relative_path)/constants/fonts';
// Import color from your color constants file
import { BLACK } from '..(relative_path)/constants/colors';

/*
	For any common styles you can add them to base.
	Define a rule group for each of the types defined in Text.js
*/
const styles = StyleSheet.create({
  base: { color: BLACK },
  H1: {
    fontFamily: PRIMARY_FONT_BOLD,
    fontSize: 30,
    lineHeight: 41,
  },
  H2: {
    fontFamily: PRIMARY_FONT_SEMI,
    fontSize: 24,
    lineHeight: 33,
  },
  H3: {
    fontFamily: PRIMARY_FONT_BOLD,
    fontSize: 16,
    lineHeight: 20,
  },
  H4: {
    fontFamily: PRIMARY_FONT_BOLD,
    fontSize: 14,
    lineHeight: 19,
  },
  P1: {
    fontFamily: PRIMARY_FONT_REGULAR,
    fontSize: 16,
    lineHeight: 20,
  },
  P2: {
    fontFamily: PRIMARY_FONT_REGULAR,
    fontSize: 14,
    lineHeight: 19,
  },
  P3: {
    fontFamily: PRIMARY_FONT_REGULAR,
    fontSize: 10,
    lineHeight: 14,
  },
});

export default styles;