Para fazermos esse exercício, iremos criar um novo projeto. Pois dessa forma não iremos atrapalhar o nosso projeto no que já existe.

Vamos então na área de trabalho abrir o terminal (Ou crie o projeto expo de acordo com seu sistema operacional) e então iremos dar o comando de criação. Podemos chamar o projeto de “tab-navigation”

npx create-expo-app --template

E iremos escolher o template “Black (Bare)”, pois é o que estamos utilizando nos exemplos principais. E aí ao finalizar a criação do projeto, iremos fazer a instalação da lib.

npm install @react-navigation/native

npm install @react-navigation/bottom-tabs

Nós iremos seguindo o que temos na documentação, porém na documentação é feito tudo em uma única página, faremos em páginas separadas.

Vamos criar uma pasta “src” e dentro dela uma “pages”. “Src → Pages”

Agora, dentro da pasta “Pages” iremos criar duas novas, para termos duas páginas no exercício. Faremos uma pasta chamada “Home” e outra chamada “Settings”, com um “index.jsx” dentro de cada uma.

1. “Src → Pages → Home → index.jsx”
2. “Src → Pages → Settings → index.jsx”

Agora, iremos criar os arquivos de fato, a parte de dentro deles. Podemos começar pela nossa “Home”. Vamos criar algo bem padrão, apenas para vermos a diferença da navegação. “Src → Pages → Home → index.jsx”

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

export default function Home() {
  return (
    <View style={styles.container}>
      <Text>Página home aqui!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
		flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

Agora, faremos a mesma página no “settings”. “Src → Pages → Settings → index.jsx”

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

export default function Settings() {
  return (
    <View style={styles.container}>
      <Text>Página settings aqui!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
		flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

Ao criarmos esses arquivos, podemos também criar o arquivo que ficará responsável pelas rotas. Iremos criar dentro de “Src” uma pasta “Routes”, e dentro dela um “index.jsx”. “Src → Routes → index.jsx”

Agora, iremos trabalhar primeiro no arquivo dentro de “Routes”. Iremos importar o container e também o “createBottomTabNavigator”, de forma muito parecida com o nosso stack, mudando apenas de fato a variação.

import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();

Agora, nós iremos montar o restante da função.

import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();

export default function Routes() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Agora, vamos importar as páginas e utilizar elas aqui dentro do “Tab.Navigator”

import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import Home from "../Pages/Home";
import Settings from "../Pages/Settings";

const Tab = createBottomTabNavigator();

export default function Routes() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Settings" component={Settings} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Depois de tudo isso feito, temos a estrutura. Vamos para o arquivo “App.js”, pois ele é o principal arquivo do app. Nele iremos fazer o padrão, excluir tudo dentro do return e de estilo, para colocar apenas o nosso “Routes”.

import React from "react";
import Routes from "./Src/Routes";

export default function App() {
  return <Routes />;
}

Podemos então testar o nosso app para verificar a nossa navegação implementada. Podemos ver que no teste temos as barras de baixo setadas, e também uma barra acima, com o nome da página. Ao mudar de página, mudamos o nome de cima também.

Vamos então remover esse nosso nome de cima, do “screenOptions”. “Src → Routes → index.jsx”

export default function Routes() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{ headerShown: false }}>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Settings" component={Settings} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Ao fazermos isso retiramos o nome da tela no topo da nossa página. E se quisermos também fazer a adição de ícones nos botões de tab, nós podemos facilmente.

Vamos fazer a adição de ícones do próprio expo, porém se você quiser colocar alguma imagem, basta substituir o uso dos ícones por “require(”caminho-da-imagem”)”, e você irá pegar a imagem.

Vamos começar excluindo o nosso “headerShown”, pois vamos colocar uma função aqui dentro para que ele faça uma verificação, colocando itens no local correto.

export default function Routes() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={}>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Settings" component={Settings} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Agora, iremos criar uma função aqui, recebendo como parâmetro o “route”, pois precisamos pegar em qual página estamos.

export default function Routes() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={({ route }) => ({})}>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Settings" component={Settings} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}