Search code examples
react-nativereact-native-paper

React Native Paper - Unrecognized font family 'Material Icons'

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 belowenter image description here

Solution

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