Vamos agora criar a barra de navegação. Nós vamos começar criando dentro de “common” uma pasta chamada “NavBar”, e dentro dela um arquivo chamado “index.tsx” e outro chamado “styled.ts”

Vamos dentro de “styled.ts” criar o container onde teremos que envolver todos os ícones que vamos usar.

import styled from "styled-components/native";

export const Container = styled.View`
  width: 100%;
  height: 60px;
  background-color: ${({ theme }) => theme.colors.background};
  position: absolute;
  bottom: 0;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
`;

Agora, nós vamos criar o botão que vai envolver a imagem dos ícones, junto com o componente da imagem, para que já estejam dos tamanhos corretos.

import styled from "styled-components/native";

export const Container = styled.View`
  width: 100%;
  height: 60px;
  background-color: ${({ theme }) => theme.colors.background};
  position: absolute;
  bottom: 0;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
`;

export const IconButton = styled.TouchableOpacity``;

export const Icon = styled.Image.attrs({
  resizeMode: "contain",
})`
  width: 30px;
`;

Vamos usar tudo isso no “index.tsx”, puxando as nossas imagens da mesma forma que fizemos com o nosso header.

import React from "react";
import { Container, Icon, IconButton } from "./styled";

const home = require("../../../../assets/icons/home.png");
const chat = require("../../../../assets/icons/chat.png");
const add = require("../../../../assets/icons/add.png");
const categories = require("../../../../assets/icons/categories.png");
const profile = require("../../../../assets/icons/profile.png");

const NavBar = () => {
  return (
    <Container>
      <IconButton>
        <Icon source={home} />
      </IconButton>
      <IconButton>
        <Icon source={chat} />
      </IconButton>
      <IconButton>
        <Icon source={add} />
      </IconButton>
      <IconButton>
        <Icon source={categories} />
      </IconButton>
      <IconButton>
        <Icon source={profile} />
      </IconButton>
    </Container>
  );
};

export default NavBar;

Nos falta agora apenas colocarmos o onPress nos botões e chamar a navegação. Iremos agora ver o uso da nossa tipagem aqui, que fizemos na aula de configuração de navegação.

import React from "react";
import { useNavigation } from "@react-navigation/native";
import { PropsStack } from "../../../routes";
import { Container, Icon, IconButton } from "./styled";

const home = require("../../../../assets/icons/home.png");
const chat = require("../../../../assets/icons/chat.png");
const add = require("../../../../assets/icons/add.png");
const categories = require("../../../../assets/icons/categories.png");
const profile = require("../../../../assets/icons/profile.png");

const NavBar = () => {
  const navigation = useNavigation<PropsStack>();

  return (
    <Container>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={home} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={chat} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={add} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={categories} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={profile} />
      </IconButton>
    </Container>
  );
};

export default NavBar;

Nós usamos a tipagem na função que importamos, e ela vai nos deixar redirecionar tranquilo. Podemos remover para vermos o erro que vai dar.

Por enquanto, podemos deixar apenas para a página home, já que não temos nenhuma outra. Então vamos deixar por enquanto apenas levando para ela.

Agora, nós vamos colocar ela dentro de home, para poder visualizarmos.

import React from "react";
import { Container } from "./styled";

import Header from "../../components/common/Header";
import NavBar from "../../components/common/NavBar";

const Home = () => {
  return (
    <Container>
      <Header />
      <NavBar />
    </Container>
  );
};

export default Home;

Podemos ver ela aqui abaixo sendo usada perfeitamente. Não podemos usar de fato ainda, pois não temos para onde ir, porém está pronta