React Native iOS Unrecognized font family 'Material Design Icons'

Question

I am building a mobile app with react native. The current app works fine on Android, but crashes on iOS. This is the error that gives:

These are the dependencies that I am using:

  "dependencies": {
    "@react-native-community/datetimepicker": "^3.5.2",
    "react": "17.0.1",
    "react-native": "0.64.2",
    "react-native-elements": "^3.4.1",
    "react-native-paper": "^4.9.2",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-vector-icons": "^8.1.0"
  },

After some research, the community suggests to link some dependencies manually. Therefore, I linked @react-native-community/datetimepicker, react-native-safe-area-context, react-native-vector-icons. But they produced the following error:

Because I am using RN >= 0.60. So I unlinked them, then the Unrecognized font family Material Design Icons still persists. I did rebuild my app several times with "npx pod-install", but no success. What should I do to get rid of the error and load Material Design Icons properly?

user_13865252 · Answer

import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';

call the func at the beginning of the file

MaterialCommunityIcon.loadFont();

Usage:

React Native iOS Unrecognized font family 'Material Design Icons'

1 Answers