Como Criar Tab Navigation React Native [Guia]

A navegação por abas (Tab Navigation React Native) é um dos padrões de navegação mais populares em aplicativos móveis, permitindo que usuários alternem facilmente entre diferentes seções do app. O React Navigation oferece o createBottomTabNavigator, uma solução robusta para implementar essa funcionalidade de forma simples e personalizável.

➡️ Link para o Código Base

O que é Bottom Tab Navigator?

O Bottom Tab Navigator é um componente do React Navigation que cria uma barra de abas na parte inferior da tela, permitindo a troca entre diferentes rotas. As telas são inicializadas de forma lazy (preguiçosa), ou seja, seus componentes só são montados quando são acessados pela primeira vez, otimizando o desempenho do aplicativo.​

Instalação e Configuração Inicial

Para implementar Tab Navigation, você precisa instalar as dependências necessárias do React Navigation e do Bottom Tabs:​

npm install @react-navigation/native @react-navigation/bottom-tabs
npm install react-native-screens react-native-safe-area-context
npx expo install @expo/vector-icons

Estrutura do Projeto

O projeto de exemplo utiliza uma estrutura organizada com arquivos separados para cada tela:

textprojeto/
├── App.js
├── telas/
│   ├── TelaInicio.js
│   ├── TelaPerfil.js
│   └── TelaConfig.js

Criando as Telas Individuais

Cada tela é um componente React simples que retorna uma visualização centralizada. Veja o exemplo da tela inicial:

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

export default function TelaInicio () {
  return (
    <View style={estilos.container}>
      <Text> 🏠 Página Inicial </Text>
    </View>
  )
}

const estilos = StyleSheet.create ({
  container : {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

As outras telas (TelaPerfil.js e TelaConfig.js) seguem a mesma estrutura, alterando apenas o conteúdo e os emojis exibidos.​

Configurando o Tab Navigator no App.js

O arquivo App.js é onde toda a mágica da navegação acontece. Primeiro, importamos as dependências necessárias:

import React from 'react';
import { createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import { NavigationContainer } from "@react-navigation/native";
import {MaterialIcons} from "@expo/vector-icons";

Em seguida, criamos a instância do Tab Navigator:

const Tab = createBottomTabNavigator();

Implementando o NavigationContainer

O NavigationContainer é o componente raiz que gerencia a árvore de navegação e deve envolver toda a estrutura de navegação:​

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        {/* Telas aqui */}
      </Tab.Navigator>
    </NavigationContainer>
  )
}

Personalizando os Ícones das Abas

Uma das características mais importantes do Tab Navigation é a personalização dos ícones. O React Navigation permite configurar ícones através da propriedade screenOptions:​

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

      if (route.name === "Início") {
        iconName = "add-home";
      } else if (route.name === "Perfil") {
        iconName = "person";
      } else if (route.name === "Configurações") {
        iconName = "settings";
      }

      return <MaterialIcons name={iconName} size={size} color={color} />;
    },
    tabBarActiveTintColor: "tomato",
    tabBarInactiveTintColor: "gray",
    headerShown: false,
  })}
  initialRouteName="Início"
>

Entendendo as Propriedades de Configuração

tabBarIcon: Função que recebe color e size como parâmetros e retorna um componente de ícone. O MaterialIcons do Expo oferece milhares de ícones prontos para uso.

tabBarActiveTintColor: Define a cor do ícone e texto quando a aba está ativa/selecionada. No exemplo, utilizamos “tomato” (vermelho-tomate).​

tabBarInactiveTintColor: Define a cor dos ícones e textos das abas inativas. O exemplo usa “gray” (cinza).​

headerShown: Quando definido como false, oculta o cabeçalho padrão do React Navigation.​

initialRouteName: Define qual tela será exibida inicialmente ao carregar o aplicativo.​

Registrando as Telas no Navigator

Cada tela é registrada usando o componente Tab.Screen:

<Tab.Screen 
  name="Início" 
  component={TelaInicio} 
/>

<Tab.Screen
  name="Perfil"
  component={TelaPerfil} 
/>

<Tab.Screen
  name="Configurações"
  component={TelaConfig} 
/>

A propriedade name define o identificador da rota e o texto exibido na aba, enquanto component especifica qual componente será renderizado.​

Opções Avançadas de Customização

Personalizando a Barra de Abas Completa

Você pode criar uma barra de abas totalmente customizada usando a propriedade tabBar:​

<Tab.Navigator
  tabBar={props => <CustomTabBar {...props} />}
>

Adicionando Badges e Notificações

O React Navigation suporta badges nas abas para exibir notificações ou contadores:​

<Tab.Screen
  name="Perfil"
  component={TelaPerfil}
  options={{
    tabBarBadge: 3,
    tabBarBadgeStyle: { backgroundColor: 'red' }
  }}
/>

Ocultando Abas em Telas Específicas

Para ocultar a barra de abas em determinadas telas, use a opção tabBarStyle:​

<Tab.Screen
  name="Detalhes"
  component={TelaDetalhes}
  options={{
    tabBarStyle: { display: 'none' }
  }}
/>

Boas Práticas e Performance

A navegação por abas do React Navigation implementa lazy loading automaticamente, garantindo que componentes de tela só sejam montados quando acessados pela primeira vez. Isso melhora significativamente o desempenho inicial do aplicativo.​

Para projetos maiores, considere implementar navegação aninhada, combinando Stack Navigator dentro das abas para criar fluxos de navegação mais complexos:​

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

<Tab.Navigator>
  <Tab.Screen name="Home" component={HomeStackScreen} />
</Tab.Navigator>

Testando o Aplicativo

Após implementar o código completo, execute o projeto no Expo:

npx expo start

Você verá três abas na parte inferior da tela: Início (ícone de casa), Perfil (ícone de pessoa) e Configurações (ícone de engrenagem). Ao tocar em cada aba, a tela correspondente será exibida com a cor do ícone mudando para vermelho-tomate quando ativa.​

Compatibilidade e Acessibilidade

O Bottom Tab Navigator do React Navigation é totalmente compatível com recursos de acessibilidade, suportando leitores de tela e navegação por teclado. Certifique-se de adicionar propriedades de acessibilidade quando necessário:​

<Tab.Screen
  name="Início"
  component={TelaInicio}
  options={{
    tabBarAccessibilityLabel: 'Navegar para a página inicial',
  }}
/>

O Tab Navigation é essencial para criar aplicativos React Native modernos e intuitivos, oferecendo aos usuários uma experiência de navegação familiar e eficiente.