Hello,
I took a step by step to get you to install and use the custom font.
- Download the font you want to use on google fonts, in the example I will use the Poppins.
- At the root of the project creates the following structure
/assets/fonts.
- In the project ra creates the file
react-native.config.js with the following content.
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'],
};
- Executes the command
react-native-link, at that time the sources were installed.
- Perform the
yarn react-native ios or yarn react-native android to reinstall the app.
- To use the font, you must use the entire file name .ttf, example for the source Poppins-Regular.ttf, you define
fontFamily: 'Poppins-Regular'.
The sources of React-Native, has something a little uncomfortable, as the React-Native does not inherit style, in all texts you need to define, your font family, more this can be bypassed.
Follow the step by step to resolve this.
- At the root of the project create the file
override.js with the following content.
import React from 'react';
import { Text, TextInput, StyleSheet } from 'react-native';
import theme from './src/global/theme';
const styles = StyleSheet.create({
defaultText: {
fontFamily: 'Poppins-Regular'
},
});
const override = () => {
const oldTextRender = Text.render;
Text.render = (...args) => {
const origin = oldTextRender.call(this, ...args);
return React.cloneElement(origin, {
style: [styles.defaultText, origin.props.style],
allowFontScaling: false,
});
};
const oldTextInputRender = TextInput.render;
TextInput.render = (...args) => {
const origin = oldTextInputRender.call(this, ...args);
return React.cloneElement(origin, {
style: [styles.defaultText, origin.props.style],
allowFontScaling: false,
});
};
};
export default override;
Should change the Poppins-Regular by his installed source family.
2. In the archive index.js, shall place the following code.
import override from './override';
override();
What you did above was overwrite the standard Text and Textinput style and now every time you put a Text or Textinput they will already have the X font by default.
