CODEWITHSUNDEEP
react-nativereact-native-ios
ThinkAndCode
ThinkAndCode

Reputation: 1667

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

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?

Upvotes: 6

Views: 9996

Answers (2)

Santosh Kumar
Santosh Kumar

Reputation: 580

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.

Upvotes: 1

fAiSaL
fAiSaL

Reputation: 774

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?

Upvotes: 0

Related Questions