6

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?

ThinkAndCode
  • 1,319
  • 3
  • 29
  • 60

2 Answers2

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.

Santosh Kumar
  • 552
  • 4
  • 13
0

Just go through the below link, I believe this your requirement

https://facebook.github.io/react-native/docs/text.html#limited-style-inheritance

How to set default font family in React Native?

fAiSaL
  • 754
  • 1
  • 10
  • 29
  • In this solution constants are being used instead of hard coded values. But i am looking for a way not to use neither hard coded values nor constants. As I stated in the question font family should be changed throughout the app automatically. – ThinkAndCode Feb 27 '18 at 06:56