Set a default font globally in React Native project

user_369185 0
Viewed 1193

I've set up and added a set of fonts under /assest/fonts/, created react-neative.config.js and linked these accordingly.

I can call the custom font in my styles but haven't been able to initialize a global setting for it.

Trying to do this through a component, like so

import React from 'react';
import { Text } from 'react-native';
export default props => <Text {...props} style={[{ fontFamily: 'Roboto-Regular' }, props.style]}>{props.children}</Text>

Then importing this either via App.js or a page component etc by calling CustomFont. This doesn't render the font though (I'm stuck with the OS default or whatever style has been applied for that particular element). Any ideas?

react-native global fonts
2 Answers

I think that the problem here is that you inversed the order in the style object. You should assign to the style all the properties of props.style and then apply on them your custom font

import React from 'react';
import { Text } from 'react-native';
export default props => <Text {...props} style={{...props.style, fontFamily: 'Roboto-Regular'}}>{props.children}</Text>
user_110903210

Please correct assest to assets.

module.exports = {
  assets: ['./assets/fonts']
}
user_66809250
Related