Skip to content

Instantly share code, notes, and snippets.

@neilsarkar
Created January 10, 2017 01:48
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • 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>
)}
}
@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