Skip to content

Cannot use custom font with RN >= 0.60 --template typescript. react-native.config.js ignored #25697

@Nico924

Description

@Nico924

I am trying to use a custom font in a freshly new React-native project made with the typescript template and I do not succeed to add a custom font family.

All the doc I found told me to use rnpm which has been now deprecated in favor of a react-native.config.js file in the root folder.
I therefore created this file in my project but I did not see anywhere where to tell the react-native builder to read it and therefore I get the error font_name not found

Has anyone any suggestion ?

React Native version:

System:
    OS: macOS 10.14.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
    Memory: 1.71 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.10.0 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 24, 25, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.2, 28.0.3, 29.0.0
      System Images: android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-Q | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.2 AI-181.5540.7.32.5056338
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.0 => 0.60.0 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

  1. react-native init your_project --template typescript
  2. Create a folder assets/fonts and put all your custom fonts : (mine were Lato-(Regular,..).ttf)
  3. Create a react-native.config.js in the root folder of your project as follow
module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ['./assets/fonts'], // stays the same
  // commands: require('./path-to-commands.js'), // formerly "plugin", returns an array of commands
};
  1. Use the font in the app Component as styling of you text
  2. run react-native run-ios
  3. You'll get an error "font Lato (in my case) not found"

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions