CODEWITHSUNDEEP
react-native
AKHIL
AKHIL

Reputation: 73

How to change the default font family of the entire react native app

I need to add a custom font to my app. And all the text, including the button title, have to be displayed in the custom font. How can I achieve this?

I have added custom font in my app. But it needs to provide font family style to every text and can't change the font family of the button title.

Upvotes: 4

Views: 6059

Answers (1)

iuliu.net
iuliu.net

Reputation: 7145

These answers seem like they didn't really read your question.. So here's how to use a font globally without the need of specifying it each and every time:

Create a component like so:

import * as React from 'react';
import { Text } from 'react-native';


export default (props) => {
  const defaultStyle = { fontFamily: 'Muli', color: '#14181c' };
  const incomingStyle = Array.isArray(props.style) ? props.style : [props.style];
  return <Text {...props} style={[defaultStyle, ...incomingStyle]} />;
};

Now, everywhere you have

import { Text } from 'react-native',

replace with

import { Text } from 'src/global-components' :)

Upvotes: 10

Related Questions