react native apply styles to all Text Components

Question

Is there an easy way to apply styles to all components of a specific type such as Text or ScrollView etc in react native to build templates?
For example, I wish to use verdana fontFamily style to all Text components across all scenes. Is there an easy way to achieve than specifying the style everytime I use Text component?
Or does it require creating a custom Text component? and use it instead of the basic component such as below example. Use MyText instead of Text

const MyText = ({data}) => <Text style={style.commonTextStyle}>{data}</Text>

Answer 1

You must create a RN Component like this:

/* @flow */

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

export default class Text extends Component {
  render() {
    return (
      <TextRN style={[YOUR_CUSTOM_STYLES, this.props.style]}>
        {this.props.children}
      </TextRN>
    )
  }
}

In this way, your own Text component can inheritance additional styles from anywhere you use them.

Note: Have in mind that your own custom text component can't be used in all cases, e.g. inside TouchableHighlight, in these case you must be use the native text from react-native library.

Now, you just can change your imports for:

import Text from 'YOUR_PATH/Text.js'

Hope this helps.

Answer 2

In addition to Vicky's answer, you can simply create a new Component with name Text or MyText etc, and import it to your project whenever you need it.

function MyText(props) {
  return (
    <Text style={styles.MY_CUSTOM_STYLES}>
      {props.children}
    </Text>
  );
}

And use it like,

import MyText from '/path/to/MyText';

...

render() {
  return ( <MyText>Now I have my custom styles.</MyText> );
}

You can use it as import Text by changing its name if you feel so used to defining Text components. Refer to this documentation for further reading. (Note that: MyText Component above is a functional stateless component for lightweight definitions.)