Unrecognized font family 'Material Icons'

geeekgod commented 1 year ago

[x] Review the documentation: https://github.com/oblador/react-native-vector-icons
[x] Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

Environment

OS: Mac OSX 13.3.1 (22E261)
target platform: iOS & Android
react-native: 0.71.7
react-native-vector-icons: ^9.2.0

Description

I'm trying to use react-native-vector-icons in my project along with the UI library native-base. I have followed and configured all the steps according to documentation, the icons are visible and working as expected in Android builds. But in the iOS build icons are not visible and instead it throws the following error: Unrecognized font family 'Material Icons'. I've tried everything which was feasible and related to giving the following problem such as clearing cache, rebuilding, manually linking, and manually building through Xcode as well.

Here's the screenshot of the error that I'm receiving,

I can guess it is due to the fonts not being loaded into the iOS builds, but as per react-native auto-linking & react-native-vector-icons documentation it should have been done, though I tried to copy resource all the fonts into the build through Xcode as well, but nothing seems to work.

Reproducible Demo

I'm adding the code snippet where react-native-vector-icons is throwing the error.

Welcome.jsx:

import React, { useState } from 'react';
import { Input, Text, Image, Box, Pressable, Icon } from 'native-base';
import Layout from '../../components/Layout';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const logo = require('../../assets/logo.png');

const Welcome = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  return (
    <Layout>
      <Image source={logo} size="xl" alt='InsightsInBytes' width={200} mb={4} />
      <Text textAlign={'center'} fontSize={'3xl'} fontWeight={'semibold'}>Welcome to our App!</Text>
      <Input placeholder="Email ID" my={4} variant={'underlined'} />
      <Input placeholder="Password" my={4} variant={'underlined'}
        type={showPassword ? 'text' : 'password'}
        InputRightElement={
          <Pressable onPress={() => setShowPassword(!showPassword)}>
            <Icon as={<MaterialIcons name={showPassword ? "visibility" : "visibility-off"} />} />
          </Pressable>
        }
      />
    </Layout>
  );
};

export default Welcome;

package.json:

{
  "name": "OurApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-masked-view/masked-view": "^0.2.9",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",
    "native-base": "^3.4.28",
    "react": "18.2.0",
    "react-native": "0.71.7",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-reanimated": "^3.1.0",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "^3.20.0",
    "react-native-svg": "12.1.1",
    "react-native-vector-icons": "^9.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-react-native": "^4.0.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.9",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

geeekgod commented 1 year ago

Was able to fix it by adding the fonts name in Info.plist, as suggested in the following issue.

Although not sure why such behaviour occurred, this should have been done by its own I believe.

LuizCristino commented 1 year ago

I was having the same issue, and after days looking for the problem, for some reason the font-family name are different.

FontFamily name on package -> Actual FontFamily
Material Icons -> MaterialIcons-Regular
Material Design Icons -> MaterialDesignIcons

zackha commented 9 months ago

Open node modules -> react-native-vector-icons -> your react native project first. Fonts, open the [project] folder in your iOS folder. Right-click xcworkspace now and choose Create Group. Rename the group to Fonts.

drag the .ttf fonts you need from your node_modules folder and drop just below your Fonts Group.

Expand the Group with the same name as your react native project and click on info.plist, click on the + beside Information Property List in the Key section then replace Get info string with Fonts provided by application, type the font details beside item [number] exactly as it is in your Fonts Group.

After this, run shift + command + K to clean your previous build, then command + B to run a new build and finally command + R to start your application.

This would solve the issue else restart your metro bundler.

follow the below link for solution https://www.devhubspot.net/post/detail/react-native-unrecognised-font-family-error-solution

oblador / react-native-vector-icons