How to add custom fonts in React Native Version 0.70.5-CodePudding

I am trying to load custom fonts in my React Native App. However, I am using version 0.69 and I don't know how to add them anymore, because:

link and unlink commands have been removed in the favour of autolinking
Removed assets and hooks from react-native.config.js – you'll need to remove these properties from your config

So how can this now be done in Android and iOS now?

CodePudding user response：

You can add your font files to the project's main assets folder, it should automatically link for you but you should still run the following command from your terminal: npx react-native-asset.

Afterwards, you would be able to use your font like normal: fontFamily: 'Awesome-Font'

CodePudding user response：

To add custom fonts in React Native, you can use the react-native-vector-icons library. First, you will need to install the library using npm or yarn by running the command "npm install react-native-vector-icons" or "yarn add react-native-vector-icons" in your project's root directory.

Next, you will need to link the library to your project by running "react-native link react-native-vector-icons".

Then, you can add the custom font files to your project's "assets/fonts" directory.

Finally, you can use the custom font by setting the fontFamily property on a Text component.

import { Text } from 'react-native'

<Text style={{ fontFamily: 'custom-font-name' }}>
  Hello, World!
</Text>

You may also need to add the font to your iOS or Android project if you are not using Expo.

It's always a good practice to make sure the font is supported by the platform.