React-native Typography

config.js

const CONFIG = {}


// Application colors.
CONFIG.colors = {
  // Base
  transparent: 'transparent',
};


// Typography.
const type = {
  base: 'Roboto'
}

CONFIG.typography = {
  size10: {
    fontFamily: type.base,
    fontSize: 10,
    backgroundColor: CONFIG.colors.transparent
  },
  size11: {
    fontFamily: type.base,
    fontSize: 11,
    backgroundColor: CONFIG.colors.transparent
  },
  size12: {
    fontFamily: type.base,
    fontSize: 12,
    backgroundColor: CONFIG.colors.transparent
  },
  size15: {
    fontFamily: type.base,
    fontSize: 15,
    backgroundColor: CONFIG.colors.transparent
  },

  // Note these get mapped to the typography component.
  h1: {
    fontFamily: type.base,
    fontSize: 20,
    backgroundColor: CONFIG.colors.transparent,
    marginBottom: 25
  },
  h2: {
    fontFamily: type.base,
    fontSize: 17,
    backgroundColor: CONFIG.colors.transparent,
    marginBottom: 20
  },
  h3: {
    fontFamily: type.base,
    fontSize: 15,
    backgroundColor: CONFIG.colors.transparent,
    marginBottom: 16
  },
  p: {
    fontFamily: type.base,
    fontSize: 12,
    backgroundColor: CONFIG.colors.transparent,
    marginBottom: 16
  },
  bold: {
    fontWeight: 'bold'
  }
}


export default CONFIG;

typography.js

import React, { Component, PropTypes } from 'react';
import { View, Text } from 'react-native';
import CONFIG from './config';


/**
 *  // Sample
 *   <H1>This is a test</H1>
 *   <H2>This is a test</H2>
 *   <H3>This is a test</H3>
 *   <P>This is a paragraphy test.  <BOLD>Hohohohoho.</BOLD>  Yoyoyoyo.</P>
 *
 *   <H1 style={[{
 *     color: '#B23456'
 *   }]}>This is a test</H1>
 */
class TypographyComponent extends Component {
  constructor(props, typography) {
    super(props);
    this.baseStyle = props.style ? [
      typography,
      ...props.style
    ] : typography

  }
  render() {
    return(
      <Text {...this.props} style={this.baseStyle}>{this.props.children}</Text>
    )
  }
}

export class H1 extends TypographyComponent {
  constructor(props) {
    super(props, CONFIG.typography.h1);
  }
};

export class H2 extends TypographyComponent {
  constructor(props) {
    super(props, CONFIG.typography.h2);
  }
};


export class H3 extends TypographyComponent {
  constructor(props) {
    super(props, CONFIG.typography.h3);
  }
};



export class P extends TypographyComponent {
  constructor(props) {
    super(props, CONFIG.typography.p);
  }
};


export class BOLD extends TypographyComponent {
  constructor(props) {
    super(props, CONFIG.typography.bold);
  }
};