Adding icons in Tab Navigator in React Native.

Tiempo de lectura: < 1 minuto

Reading Time: < 1 minute

When we create a Tab Navigator by default, it appears without icons:

Based on this code:

<NavigationContainer>
    <Tab.Navigator initialRouteName="Home">
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Buscar" component={MisCursos} />
        <Tab.Screen name="Perfil" component={Perfil} />
    </Tab.Navigator>
</NavigationContainer>

If we want to add icons, we can do the following.

We will use a library that provides icons to our project. We can also use our own icons, but for the sake of simplicity, we will use this library.

Install the library using Expo:

expo install @expo/vector-icons

Now, import it into our project:

import { Ionicons } from '@expo/vector-icons';

Adding icons to our Tab is easy. Here’s an example code:

<NavigationContainer>
    <Tab.Navigator initialRouteName="Home">
        <Tab.Screen 
            name="Home" 
            component={Home} 
            options={{
                tabBarLabel: 'Home',
                tabBarIcon: ({ color, size }) => (
                    <Ionicons name="home" color={color} size={size} />
                ),
            }}
        />
    </Tab.Navigator>
</NavigationContainer>

Now, the icons appear in our Tab Bar.