MaterialCommunityIcons showing incorrect icon in react native bottom tab navigator

Question

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 (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => 
            <MaterialCommunityIcons name="home" color={color} size={size} />
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) =>
            <MaterialCommunityIcons name="bell" color={color} size={size} />
        }}
      />
      
    </Tab.Navigator>
  );
}

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

score 0 · Answer 1 · answered Sep 19 '22 at 12:33

0

For solving the issue follow these steps

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

Hope it will fix the issue.

answered Sep 19 '22 at 12:33

Nandagopan Ts

1

Unfortunately it didn't really work. It is still showing the wrong icon – Vincensiu Sep 19 '22 at 22:52

score 0 · Answer 2 · answered Dec 09 '22 at 06:50

I was facing the same problem on android.

I just followed the android installation https://github.com/oblador/react-native-vector-icons#android
In my case, I have to ignore this step which should perform in android/app/src/main/java/...MainApplication.java

import com.oblador.vectoricons.VectorIconsPackage;

new VectorIconsPackage()

(it gave me an error)

build the APK again.

And that's it. it works for me.

score 0 · Answer 3 · answered Mar 14 '23 at 06:04

I had similar issues what I did was I added the following to my android/app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Then I ran react-native run-android again and my issue was fixed. Also check out this npm documentation on react-native-vector-icons.

MaterialCommunityIcons showing incorrect icon in react native bottom tab navigator

3 Answers3