"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.

[janhesters]

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+.

[iYahya]

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

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