React Native Paper - Unrecognized font family 'Material Icons'

Question

I am creating a new react native app and using react-native-paper. This is not an Expo app but a vanilla react native app.

The react native version is > 0.6.0 and I have followed the steps described in the react-native-paper installation https://callstack.github.io/react-native-paper/getting-started.html

The way the react-native-paper component is used is as below

<Avatar.Icon size={24} icon="folder" />

However when I run the app with the command react-native run-ios the compilation is successful and the app opens but the red screen appears as below

Antipater

Answer 1

Found the solution.

I had to add the following to the info.plist

<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>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
</array>

Antipater

Thank you! Spent an hour debugging this issue and this was the solution! – Uretic

Thanks! Had similar issue and only your solution worked for me. Really weird why this is not mentioned anywhere in official docs. – Ingressive

Would be great if someone could shed light on why this solution works and what we might have done wrong to get here. – Stereotaxis