react native apply styles to all Text Components

13

votes

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>

react-native

13

votes

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

5

votes

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.

5

votes

https://github.com/Ajackster/react-native-global-props seems to offer global styles for most of the react native components including Text, View etc. Readme from the GitHub has examples. This appears to address the need however I have not tested this yet.

3

votes

You can extract the common styles and provide them as global. you can them add/ edit the styles for each textview if needed.

export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
})

Then u can use <Text style={[styles.welcome, {color:'red'}]]}>Hello</Text>

U should look into libs like react-native-extended-stylesheet

You can also follow these techniques on how to keep the stylesheet simple and readble.
Refer Tips for styling React

2

votes

In your Global-Styles js file:

import React from "react";
import {
  Text as RNText
} from "react-native";

const styles = {
  text: {
    lineHeight: "1.5em",
    fontSize: "1.125rem",
    marginVertical: "0.2em",
    textAlign: "center"
  }
}

export var Text = (props) => <RNText style={[styles.text, props.style]}>{props.children}</RNText>

Usage (Same as normal Text):

import {Text} from './StyledComponents'

...
<Text style={{marginTop: '20px', color: 'red'}}>Hello, World!</Text>

1

votes

You can create a new component and apply any modification you want in it.

class MyText extends Component {
    render() {
        return <Text {...this.props}
                     style={[this.props.style, style.commonTextStyle]}>{this.props.children}</Text>;
    }
}

Don't forget to add {...this.props}. this way you pass all props to the new component you are defining.

0

votes

Glamorous also handles this very cleanly in React Native:

const MyText = glamorous.Text({
  // ... any styles
});

export MyText;

react native apply styles to all Text Components

7 Answers