React Native Text Wrapper for default font

AppText.js

'use strict';

import React, {Component} from 'react';
import {
  Text,
} from 'react-native';

export default class AppText extends Component {
  constructor(props) {
    super(props)
    // Put your default font styles here. 
    this.style = [{fontFamily: 'Helvetica', fontSize: 10}]; 
    if( props.style ) {
      if( Array.isArray(props.style) ) {
        this.style = this.style.concat(props.style)
      } else {
        this.style.push(props.style)
      }
    }
  }

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

Foo.js

'use strict';

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

export default class Foo extends Component {
  render() { return (
    <View>
      <Text>
        This will show in default font.
      </Text>

      <Text onPress={() => alert('tapped')}>
        Properties are passed through to the rendered node, so onPress etc will work.
      </Text>

      <Text style={{fontSize: 40, fontFamily: 'Arial'}}>
        Defaults can be overridden.
      </Text>
    </Text>
  )}
}

For whatever reason I am getting the "Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function..." warning

Edit: Apparently my problem was that I was using import {myComponent} from ... syntax instead of import myComponent from ... (notice the curly braces, in case anyone else comes across this issue.

I'd refactor AppText.js this way, because your original solution prevents style updating during the component life cycle. Another possibility would be to call the code you're using in the constructor in componentWillReceiveProps too.

'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import {
  Text,
  StyleSheet,
  ViewPropTypes,
} from 'react-native';

const baseStyle = StyleSheet.create({
  fontFamily: 'Helvetica',
  fontSize: 10,
});

const AppText = ({ style, children, ...props }) => {
  let newStyle;
  if (Array.isArray(style)) {
    newStyle = [baseStyle, ...style];
  } else {
    newStyle = [baseStyle, style];
  }

  return (
     <Text {...props} style={newStyle}>
       {children}
     </Text>
  );
};

AppText.propTypes = {
  children: PropTypes.node.isRequired,
  style: ViewPropTypes.style,
};

AppText.defaultProps = {
  style: {},
};

export default AppText;

thanks yeah that's better for sure