[SOLVED] MaterialCommunityIcons showing incorrect icon in react native bottom tab navigator


This Content is from Stack Overflow. Question asked by Vincensiu

I’m following the guide from https://reactnavigation.org/docs/bottom-tab-navigator/

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
        tabBarActiveTintColor: '#e91e63',
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => 
            <MaterialCommunityIcons name="home" color={color} size={size} />
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) =>
            <MaterialCommunityIcons name="bell" color={color} size={size} />

Everything works, except it shows the wrong icon. ‘home’ icon displays sad emoji, and ‘bell’ icon displays sad emoji with sweat.
I tried to change name="" in <MaterialCommunityIcons>icons and it all shows different icons that what the name suggested.
The icon that appears are also coloured, so I suspected that it might not be rendering MaterialCommunityIcons at all.

Could someone suggest what might have gone wrong please?
Thank you


For solving the issue follow these steps

  1. create folder called font inside android/app/src/main/assets
  2. Copy all Fonts inside the node_modules\react-native-vector-icons\Fonts
  3. Paste the same to the above created folder(android/app/src/main/assets/fonts)

Hope it will fix the issue.

This Question was asked in StackOverflow by Vincensiu and Answered by Nandagopan Ts It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?