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

[deadcoder0904]

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.

[deadcoder0904]

It also throws an error when I refresh using ⌘R

[gaearon]

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.

[gaearon]

When you say react-native link fixes it, are you sure that it's linking that actually helps? Or is it that linking forces a full reload?

It also throws an error when I refresh using ⌘R

What error? Please be specific.

[gaearon]

I don't think this has anything to do with Fast Refresh, given that it fails the same way after every hard reload (Cmd+R).

[gaearon]

I've confirmed that even if I turn off Fast Refresh, I get the same issue. In fact it stops working at all in that case. Maybe some of these suggestions would help: https://stackoverflow.com/questions/42410354/unrecognized-font-family-on-ios-simulator-with-react-native

[gaearon]

Here's a thread about this: oblador/react-native-vector-icons#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.

[deadcoder0904]

What error? Please be specific.

I get the same error as the title of the issue.

Dan, I'm using https://github.com/callstack/react-native-paper with RN v0.61 & it does give that error.

I made a repro, try that & u'll see there is an actual error → https://github.com/deadcoder0904/FastRefreshError/

Here's a GIF showing the error when I change title property of Appbar.Content 👇

[deadcoder0904]

Hey, @gaearon any reasons why this hasn't opened again?

The above GIF I think indicates it is indeed an error. Try the repro & I believe u should encounter the issue of what I'm trying to say :)

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

[rynrn]

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>