How add custom fonts in react native version 0.61.5

user_12345723 0
Viewed 6779

As you may know react native >='60.0' does support auto linking, There are a lot of tutorial for adding custom fonts but most methods are out of date and confusing, All of them still using react native link

I wonder how can i add custom fonts in latest version of react native (0.61.5) that work on both of ios and android?

My react-native.config.js is like this:

  commands: [...ios.commands, ...android.commands],
  platforms: {
    ios: {
      linkConfig: ios.linkConfig,
      projectConfig: ios.projectConfig,
      dependencyConfig: ios.dependencyConfig,
    },
    android: {
      linkConfig: android.linkConfig,
      projectConfig: android.projectConfig,
      dependencyConfig: android.dependencyConfig,
    },
  },
  /**
   * Used when running RNTester (with React Native from source)
   */
  reactNativePath: '.',
  project: {
    ios: {
      project: './RNTester/RNTesterPods.xcworkspace',
    },
    android: {
      sourceDir: './RNTester',
    },
  },
};
react-native fonts
2 Answers

you can still run react-native link :)

Here's a github thread you can follow for this exact issue.

The steps that seem to be accepted are

  1. Make a folder in root app as : assets
  2. fonts folder in assets and put fonts in this folder
  3. make a file in root : react-native.config.js (you already have this). Add assets reference in this file.
     module.exports = {
        project: {
        android: {}
        },
        assets: ['./assets/fonts/'],
     };

  1. run npx react-native link

  2. use the font as style={{ fontFamily: "name of font" }}

  3. rerun the app:npx react-native run-android

Edit: fixed typo in file name

user_32629830

First add fonts path in rnpm in ppackage.json then run react-native link then add fonts in Android of Asset folder

Admin1
Related