Cant seem to add an icon to the bottomTabNavigator menu

Question

I have a react native application. I want to add and set an icon to the different menu options.

I couldnt find any type of tutorial or doc for exactly how to correctly set icons for the different menu options in the bottom tab navigator.

This is what I have and I am trying to do:

const MainTabkNavigation = () => {
  return (
    <NavigationContainer>
      <TabNav.Navigator screenOptions={{headerShown: false}}>
        <TabNav.Screen 
        key='Home' 
        name="Home" 
        component={HomeStack} 
        options={({focused}) => {
          return(
            <Feather size={20} name='search'/>
          )
        }}/> 
        {/* <TabNav.Screen key='Recommended' name="Recommended" component={RecommendedStack} /> */}
        <TabNav.Screen key='Favorites' name="Favorites" component={FavoriteStack} />
        <TabNav.Screen key='Activity' name="Activity" component={ActivityStack} />
        {/* <TabNav.Screen key='Messages' name="Messages" component={MessagesStack} />  */}
        <TabNav.Screen key='Profile' name="Profile" component={ProfileStack} /> 
      </TabNav.Navigator>
    </NavigationContainer>
  )
}

score 0 · Answer 1 · answered Jul 27 '22 at 17:47

To be able to use icons you must expand the "screenOptions" property. Remember that this property takes parameters or arguments, and can be converted to a function, for example:

<Tab.Navigator
    initialRouteName='Home'
    screenOptions = {({ route }) =>({
      tabBarActiveTintColor: '#efb810',
      tabBarInactiveTintColor: 'black',
      tabBarStyle: [  
        {
          display: "flex"
        },
        null
      ],
      tabBarIcon: ({ color }) => 
        screenOptions(route, color),
    })}
      navigationOptions
    >

Where the option RouteName refers to the Screen that will be shown first when opening the application. The tabBarActiveTintColor modifies the color of the icon when it is active and the tabBarInactiveTintColor when it is not.

At the bottom of your navigation file you can do something like:

const screenOptions = (route, color ) =>{
let IconName;

switch (route.name){
  case 'Home':
  IconName = "home-circle-outline"
  break;
  case 'Recommended':
  IconName = "basketball"
  break;
  case 'Favorites':
  IconName = "walk"
  break;
  case 'Activity':
  IconName ="account-circle"
  break;
  case 'Messages':
  IconName ="apps"
  break;
}

return(
  <Icon type='material-community' name={IconName} size={22} color= 
  {color}/>
);

In this case I use the material community CDN for the use of icons, the feature is imported through the React-Native-Elements library https://reactnativeelements.com

For more information on how to use screen Options see: enter link description here

Cant seem to add an icon to the bottomTabNavigator menu

1 Answers1