React-native: "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: 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.

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

[gaearon]

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.

[deadcoder0904]

Okay, I'll give it a shot again & will close it if the suggestions fix it :)

[iYahya]

any updates ?

[deadcoder0904]

Haven’t gotten back into react-native yet so ya’ll can close it if you want. I’ll re-open if I get the same error again :)

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[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

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.