How to set the custom font family globally at once and use throughout the react-native app without calling in every 'Text' component?

Question

As per this stack overflow solution custom font can be used by calling it in each and every Text component. But we may happen to miss the same font family when we have some thousands of Text components in our App. Then we lose consistency in case of font family.

Hence, Is there any way to use custom font family by not calling in every Text component?

Answer 1

You can override Text behaviour by adding this in any of your component using Text:

Edit: Add this code in your App.js or main file

let oldRender = Text.render;
Text.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
} 

For react Native Version 0.56 or below, Add this code in your App.js or main file

let oldRender = Text.prototype.render;
Text.prototype.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
};

Reference Or create your own component, such as MyAppText. MyAppText would be a simple component that renders a Text component using your universal style and can pass through other props, etc.