Añadir iconos en Tab Navigator en React Native

Tiempo de lectura: < 1 minuto

Cuando creamos un Tab Navigator por defecto, este sale sin iconos:

Partiendo de este código:

<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>

Si queremos añadir iconos podemos hacer lo siguiente.

Vamos a utilizar una librería que ya nos proporciona iconos a nuestro proyecto, también podemos utilizar nuestros propios iconos, pero para que sea más rápido vamos a utilizar esta librería.

Instalamos la librería usando expo

expo install @expo/vector-icons

Ahora la importamos a nuestro proyecto:

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

Añadir los iconos a nuestro Tab es fácil, os pongo este código de ejemplo:

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

Y ya aparecen los iconos de nuestro Tabar