Skip to content

Instantly share code, notes, and snippets.

@neilsarkar
Created January 10, 2017 01:48
Show Gist options
  • Save neilsarkar/c9b5fc7e67bbbe4c407eec17deb7311e to your computer and use it in GitHub Desktop.
Save neilsarkar/c9b5fc7e67bbbe4c407eec17deb7311e to your computer and use it in GitHub Desktop.
React Native Text Wrapper for default font
'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>
)}
}
'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>
)}
}
@kylanhurt
Copy link

kylanhurt commented May 16, 2017

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.

@jkomyno
Copy link

jkomyno commented Jun 22, 2017

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;

@neilsarkar
Copy link
Author

thanks yeah that's better for sure

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment