npx react-native link command not working in latest version of react native. How can we link custom font family in my project

Question

I want to use a custom font family in my react-native project for that when I run the command

npx react-native link

it shows me the error error Unrecognized command "link". As I checked this may be because react-native removed the link command from the latest version of react-native.

So that I want to know how I can link the font family without using the react-native link command. I'm using the following version of react and react-native

"react": "18.0.0",
"react-native": "0.69.1",

Lastly Thank You For Your Help In Advance.

Ligulate

Answer 1

You can use the following command: npx react-native-asset.

Grimmett

Thank you so much Dimitri, It is working perfectly fine in all react-native applications – Ligulate

Answer 2

npx react-native link auto-linking command is deprecated in react-native v0.60 or higher versions. Use npx react-native-asset. If you don't have react-native.config.js file then create new file and paste it:

module.exports = {
project: {
    ios: {},
    android: {},
},
assets: ['./assets/fonts/'], // <- your asset folder's path
};

Zachariah

Answer 3

first, create react-native.config.js file like below image

module. Exports = {
 project: {
 ios: {},
 android: {},
},
 assets: ['./src/assets/fonts/'], // path of your assert file
};

and then run

npx react-native-asset

Support my YouTube Channel

Evans

Answer 4

I'm using expo and none of the answers solved my issue.

First I had to install - expo install expo-font expo-app-load ing

Then I imported the fonts to my project (to a font's folder).

Finally I imported the following to my App.js:

import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';

Plus this:

 //Fonts
  let [fontsLoaded] = useFonts({
    "SpaceMono-Regular": require("././assets/fonts/SpaceMono-Regular.ttf")
  });

last step was to use the fonts:

 mainTitleText:{
    fontSize:22,
    fontWeight:'700',
    fontFamily:'SpaceMono-Regular',
    color:'#202A41'
  },

I found the step by step solution in this tutorial(not my channel/not affiliate): Youtube Tutorial

If after doing all of that you still get a warning, I suggest you watch this Youtube Tutorial with additional steps using Splash Screen preventAutoHideAsync

Limann