React Native: Show Icon on BottomTab

Solution 1:

tabBarIcon is a function that is given the focused state, color, and size params.

<Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{ tabBarIcon: ({ focused, color, size }) => <IconComponent /> }}
/>

Also, you can centralize the tabBarIcon and move it to the <Tab.Navigator> component:

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      let iconName;

      if (route.name === "Home") {
        iconName = focused
          ? "ios-information-circle"
          : "ios-information-circle-outline";
      } else if (route.name === "Settings") {
        iconName = focused ? "ios-list-box" : "ios-list";
      }

      // You can return any component that you like here!
      return <Ionicons name={iconName} size={size} color={color} />;
    },
    tabBarActiveTintColor: "tomato",
    tabBarInactiveTintColor: "gray",
  })}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

Read more about customizing the appearance of the BottomTabs navigation in the official documentation.