Idea / Proof of concept for React Native component scaffolding

MyComponent.js

var React = require('react-native');
var {
  StyleSheet,
  ListView,
  ActivityIndicatorIOS,
  Image,
  // ...
} = React;
var {
  Text,
  Row,
  Col,
  H1,
  H2,
  H3,
  Button,
  B,
  I,
  Small,
  Muted
} = require('./Scaffold.js');


var MyComponent = React.createClass({
  render(){
    return (
      <Col fill>
        <H1>This is a title!</H1>
        <Text>
          This is interesting, right? I can <B>bold</B> stuff
          pretty easily. Or maybe some <Code>console.log('code');</Code>
        </Text>
        <Row>
          <Text>One</Text>
          <Text>Two</Text>
          <Text>Three</Text>
        </Row>
      </Col>
    );
  }
})

react-native-component-scaffold.js

var React = require('react-native');
var { Text, View } = React;

function createFlexComponent(Base, styleArray, options) {
  var styles = StyleSheet.create({
    base: Object.assign({}, ...styleArray),
    fill: {
      flex: 1
    },
    center: {
      alignSelf: 'center',
      justifyContent: 'center',
      alignItems: 'center',
    }
  });
  
  return React.createClass({
    setNativeProps(props){
      // ...
    },
    render() {
      var {
        style,
        fill,
        center,
        ...props
      } = this.props;
      return <Base {...props} style={[styles.root, fill && styles.fill, center && styles.center, style]} />; 
    }
  });
}

function createComponent(Base, styleArray, options) {
  var styles = StyleSheet.create({
    base: Object.assign({}, ...styleArray)
  });
  
  return React.createClass({
    setNativeProps(props){
      // ...
    },
    render() {
      var {
        style,
        ...props
      } = this.props;
      return <Base {...props} style={[styles.root, style]} />; 
    }
  });
}
module.exports = (styles) => ({
  Row: createFlexComponent(View, [{ flexDirection: 'row'}, styles.Row]),
  Col: createFlexComponent(View, [{ flexDirection: 'column'}, styles.Col]),
  Text: createComponent(Text, [styles.Text]),
  H1: createComponent(Text, [styles.Text, styles.H1]),
  H2: createComponent(Text, [styles.Text, styles.H2]),
  H3: createComponent(Text, [styles.Text, styles.H3]),
  B: createComponent(Text, [styles.Text, { fontWeight: 'bold' }, styles.B]),
  I: createComponent(Text, [styles.Text, { fontStyle: 'italic' }, styles.I]),
  Small: createComponent(Text, [styles.Text, { fontSize: Math.floor(0.7, styles.Text.fontSize || 16)}, styles.Small]),
  Muted: createComponent(Text, [styles.Text, { fontColor: '#999999'}, styles.Muted]),
  // ...
});

Scaffold.js

module.exports = require('react-native-component-scaffold')({
  Text: {
    fontFamily: 'custom-font',
    color: '#2e2f31',
    fontSize: 16,
  },
  h1: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  h2: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  h3: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  muted: {
    fontColor: '#999999',
  },
  Code: {
    fontFamily: 'consolas',
    backgroundColor: '#f3f3f3',
    paddingHorizontal: 3,
    paddingVertical: 1
  }
});