Material icons not showing in bottom tab android

I recently updated my project to Expo 56 and decided to migrate to the experimental native bottom tabs using @react-navigation/bottom-tabs/unstable.

Everything works perfectly on iOS using sfSymbol, and the tab bar itself is fully functional on Android. However, the icons don't show on Android when using materialSymbol.

 <Tab.Navigator
        screenOptions={{
          tabBarStyle: {
            backgroundColor: colorScheme.bg
          },
          tabBarActiveTintColor: colorScheme.gold,
          tabBarInactiveTintColor: colorScheme.bgComplementair,
          tabBarActiveIndicatorColor: colorScheme.gold,
        }}
      >
        <Tab.Screen
          name="Home"
          component={Home}
          options={{
            tabBarIcon: Platform.select({
              ios: {
                type: "sfSymbol",
                name: "house",
              },
              android: {
                type: "materialSymbol",
                name: "home",
                variant: "filled",
                weight: 400,
              },
            }) as any,
          }}
        />
        {showFloorPlan && (
          <Tab.Screen
            name="Gallery"
            component={Gallery}
            options={{
              tabBarIcon: Platform.select({
                ios: {
                  type: "sfSymbol",
                  name: "square.grid.3x3",
                },
                android: {
                  type: "materialSymbol",
                  name: "grid_view",
                  variant: "filled",
                  weight: 400,
                },
              }) as any,
            }}
          />
        )}
        <Tab.Screen
          name="Settings"
          component={Settings}
          options={{
            tabBarIcon: Platform.select({
              ios: {
                type: "sfSymbol",
                name: "gear",
              },
              android: {
                type: "materialSymbol",
                name: "settings",
                variant: "filled",
                weight: 400,
              },
            }) as any,
          }}
        />
      </Tab.Navigator>
0
Jun 2 at 12:32 PM
User AvatarSunii
#android#react-native#mobile#expo

Accepted Answer

The fix was simple but very easy to miss.

import { createNativeBottomTabNavigator } from "@react-navigation/bottom-tabs/unstable";

createNativeBottomTabNavigator does not support materialSymbols instead use:

android: {
    type: "image",
    source: require("pathToImage.png")
}

> Only PNG no support currently for SVG and materialSymbol wont work with createNativeBottomNavigator

If you still want to use materialSymbols you must resort to

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
User AvatarSunii
Jun 3 at 9:21 AM
1