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
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+.
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
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:
build
folder in yourios
project folderreact-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.