react-native: "Unrecognized font family" on iOS simulator after "react-native link"

React Native version:

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Memory: 198.63 MB / 8.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.10.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 23, 24, 26, 27, 28
      Build Tools: 23.0.1, 23.0.2, 23.0.3, 26.0.0, 26.0.1, 28.0.3
      System Images: android-26 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.2 AI-181.5540.7.32.5056338
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2

Steps To Reproduce

Init a new React Native project & install react-native-paper & react-native-vector-icons & link it using react-native-vector-icons & change App.js to the following

import React from 'react';
import {SafeAreaView, StatusBar} from 'react-native';
import {Provider as PaperProvider} from 'react-native-paper';
import {PaperAppBar} from './components/AppBar';

const App = () => {
  return (
    <>
      <PaperProvider>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
          <PaperAppBar />
        </SafeAreaView>
      </PaperProvider>
    </>
  );
};

export default App;

Create ./components/AppBar.js with the following contents:

import * as React from 'react';
import {Appbar} from 'react-native-paper';

export class PaperAppBar extends React.Component {
  _goBack = () => console.log('Went back');

  _onSearch = () => console.log('Searching');

  _onMore = () => console.log('Shown more');

  render() {
    return (
      <Appbar.Header>
        <Appbar.BackAction onPress={this._goBack} />
        <Appbar.Content title="Title" />
        <Appbar.Action icon="search" onPress={this._onSearch} />
        <Appbar.Action icon="more-vert" onPress={this._onMore} />
      </Appbar.Header>
    );
  }
}

Change the title property of Appbar.Content above to something else. It will stop fast refresh giving an error Unrecognized font family 'Material Icons' as it uses react-native-vector-icons which I am using is the cause of it all.

If I do react-native link react-native-vector-icons, then it starts working again. But again if I do change the title, it throws an error.

Describe what you expected to happen:

Fast Refresh should work. Or at least add Live Reload.

I think the issue is with any native module. Fast refresh will not work with anything that uses native modules. At least that’s my assumption.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 18

Most upvoted comments

I’m facing the same error. There is also no guide on the React Native websites on how to properly include custom fonts with React Native 61+.

image

i’ve tried to use this font and i got the same error when i tried to call it as '‘Bahij TheSansArabic Plain’ or “Bahij TheSansArabic SemiBold” but when i call the general name of font without adding the font weight name the error got disappeared

image

the real issue i faced now that i can not use the bold font, my app now in IOS use “Plain” font only and it can not read the “SemiBold” font

As I wrote above, the error happens without Fast Refresh too. So it’s not correct to refer to it as “Fast Refresh error” like your example does, as far as I understand.

I mentioned earlier that https://github.com/oblador/react-native-vector-icons/issues/135 includes suggestions to fix it. If you’re confident that this is a React Native bug, I can reopen, but I don’t know what this assumption is based on. Because I don’t know how these fonts are supposed to be bundled.

I’ll reopen for RN team to revisit this.

I found a workaround for this issue with adding fonts to Info.plist this code without add reference to fonts : <key>UIAppFonts</key> <array> <string>AntDesign.ttf</string> <string>Entypo.ttf</string> <string>EvilIcons.ttf</string> <string>Feather.ttf</string> <string>FontAwesome.ttf</string> <string>FontAwesome5_Brands.ttf</string> <string>FontAwesome5_Regular.ttf</string> <string>FontAwesome5_Solid.ttf</string> <string>Fontisto.ttf</string> <string>Foundation.ttf</string> <string>Ionicons.ttf</string> <string>MaterialCommunityIcons.ttf</string> <string>MaterialIcons.ttf</string> <string>Octicons.ttf</string> <string>SimpleLineIcons.ttf</string> <string>Zocial.ttf</string> </array>

Here’s a thread about this: https://github.com/oblador/react-native-vector-icons/issues/135

The advice that worked for me was:

  • Stop all React Native processes (including Metro) and quit the Simulator
  • Delete build folder in your ios project folder
  • Run react-native run-ios

From there on, both regular and Fast Refresh worked for me.

Maybe other suggestions in that thread will help you if this one doesn’t.

Unfortunately, I don’t have any knowledge about native modules or how they work, so I can’t suggest a quick fix unless I really dive into it. If someone else who knows how they work can lend a hand looking into this, I’d be happy to provide more details about Fast Refresh itself.