React-native – react native apply styles to all Text Components

react-native

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>

Best Answer

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.)