1. Para trabalharmos com navegação no Expo nós podemos utilizar o React Navigation (https://reactnavigation.org/). Ele é uma biblioteca para navegação entre telas no React Native e que também funciona com o Expo. Ele possui uma biblioteca principal e uma separada para as diferentes formas de se trabalhar com navegação.

2. Nós iremos trabalhar com o Stack Navigator, o mais comum. Ele funciona de forma parecida com o histórico de navegação do browser, colocando as páginas do histórico em uma pilha. Sempre que uma nova tela é acessada através dele ela vai para a pilha, o que nos permite voltar para as páginas anteriores nesse histórico.

   Obs.: Como dito anteriormente, existem outras formas de navegação e vale a pena dar uma olhada em cada uma delas separadamente depois.

3. Para começar a usar o React Navigation precisamos instalar a própria biblioteca e também a biblioteca do Navigator que vamos utilizar:

yarn add @react-navigation/native @react-navigation/native-stack

1. Os navigators utilizam algumas dependências específicas que precisamos adicionar ao nosso projeto. Como estamos trabalhando com o Expo, existe uma forma mais simples de adicionar essas dependências através do seguinte comando:

npx expo install react-native-screens react-native-safe-area-context

1. Com ele instalado, podemos criar uma pasta chamada src, na raiz do projeto. Dentro dela iremos criar uma pasta chamada “screens”, que é onde guardaremos os componentes de telas.

2. Agora vamos criar um componente específico para o Navigator em um arquivo StackNavigator.js dentro da pasta “src”, que é quem irá gerenciar a troca de páginas do app:

import { NavigationContainer } from "@react-navigation/native"
import { createNativeStackNavigator } from "@react-navigation/native-stack"

const Stack = createNativeStackNavigator()

export default function StackNavigator() {
    return (
        <NavigationContainer>
            <Stack.Navigator>

            </Stack.Navigator>
        </NavigationContainer>
    )
}

1. Temos uma estrutura básica para o Navigator, agora precisamos de telas. Dentro da pasta “screens”, crie um arquivo NavigationScreen.js:

   Obs.: Para não termos que repetir o setup de criação do Expo várias vezes vamos utilizar esse mesmo app nas próximas aulas, criando uma nova tela para cada aula.

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

export default function NavigationScreen() {
    return (
        <View>
            <Text>Aula de Navegação</Text>
        </View>
    );
}

1. E em seguida, nós vamos criar também um arquivo HomeScreen.js, que será a tela inicial do app e onde será possível navegar para as telas de cada uma das aulas. Vamos aproveitar e colocar nele o conteúdo que antes estava no componente principal App.js: