Navegação entre telas, com React Navigation
Tags: react, reactnative, programming
Published: 2023-03-17 17:06:25

Como desenvolvedores dificilmente iremos trabalhar com apenas 1 página em nossa aplicação,seja web ou mobile. Devemos ter acesso a outras telas reservadas a diferentes áreas de nossa aplicação. Mas diferente das versões Web, o raciocínio para fazer uma chamada de uma nova tela e uma navegação entre elas é bem diferente. Neste artigo iremos iremos ver as diferenças e como criar uma simples aplicação que fará a navegação entre telas no React Native.

**Instalando o React Navigation -**

Para começar, precisamos instalar o React Navigation. Podemos fazer isso usando o gerenciador de pacotes npm. Abra o terminal e digite o seguinte comando:

```
npm install @react-navigation/native
yarn add @react-navigation/native
```
Isso instalará o pacote @react-navigation/native e todas as suas dependências.

Também devemos instalar as dependências do expo, visto que nossa aplicação exemplar rodará nele:

```
npx expo install react-native-screens react-native-safe-area-context
```
E por último instalar as biblioteca de conexão de pilhas(stack)de navegação. O `StackNavigator` é usado para empilhar telas em cima umas das outras, permitindo que o usuário navegue para frente e para trás na pilha de telas.

```
npm install @react-navigation/native-stack
```



**Configurando o React Navigation -**

Vamos começar criando uma tela. Devemos colocar nosso código no arquivo do projeto, que tem como nome `App.js` (ou App.tsx, caso utilize typeScript):

```
// Em app.js um novo projeto

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
```
No código acima, será retornada ao executar o projeto em expo, com os seguintes comandoa: `npx expo start` a seguinte tela:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqd1ukeythwh0vo5pb6c.png)

Criamos uma função que irá retornar a primeira tela, a chamamos de `HomeScreen`, sem nenhum parâmetro aplicado ainda. Nela fazemos o retorno de uma `View`e `Text`que tinham sido importados ao início do código.

Também criamos ali a variável 
`const Stack = createNativeStackNavigator();`, que é onde guardaremos as nossas telas que serão adicionadas.

Feito isso, chegamos até a função App, que carrega todo o arquivo da aplicação. É nele(que seria a tela principal que irá gerenciar tudo) que iremos deixar a primeira tela e por meio da const Stack importada, alterar as telas.

Quando começamos a retornar a função completa, temos o `NavigationContainer`que está armazenando tudo, englobando as telas, e dentro dele o `Stack.Navigator`,e depois o `Stack.screen` que guardará as telas.

Depois nós adicionamos mais um `Stack.screen` que podemos dar o nome de "Details". Após isso concluímos nosso raciocínio(use como base o código feito acima da function HomeScreen pra criar uma nova tela, com o nome `DetailsScreen`)



**Navegando entre as telas,finalmente -**

Algo a se lembrar e até por em mesa é as difereça existente entre navegação de telas na web e no mobile. 

Se fosse um navegador da Web, poderíamos escrever algo assim:

```
<a href="details.html">Go to Details</a>
```

No caso do Mobile, será um pouco diferente, por exemplo:

```
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

// ... continuação do código anterior mas com a alteração feita acima
```

No caso acima, por meio de um `Button`(lembre-se de importá-lo), nós demos o nome ou título deste botão e ao pressionar com o caminho `navigation.navigate('Details')`, ele irá navegar para a função criada anteriormente `DetailScreen`, que está sendo pego seu componente.

Com isso conseguimos criar um botão que nos leva até outras telas, por meio de clik. E o bom de criar uma navegação por meio do React Navigation é que seu modo de navegar é fácil de aprender, além de seu botão de retorno que é feito automáticamente para a segunda tela chamada.

_**Algo a se alertar**_: Caso esteja escrevendo seu código utilizando `TypeScript`, siga a regra de tipagem pré determinada. Ela está no link abaixo, pois só por meio de tipagem será possível a execução do código.

https://reactnavigation.org/docs/typescript/#type-checking-screens

A solução encontrada em meu projeto pessoal foi adicionar que as tipagens das minhas funções em tela eram nulas em seu parâmetro:

```
import { NavigationProp } from '@react-navigation/native';

//...... dentro da função, em seu parâmetro, inserir:
function HomeScreen({ navigation }: { navigation: NavigationProp<any> }) 
```


Por meio do React Navigation, nós conseguimos criar um ambiente de navegação que possibilita o crescimento de nossa aplicação e consegue passar maior profissionalismo em sua sistema,além das outras formas de navegação que são possíveis, como a navegação por Stack vista nesse artigo, como a por meio de Drawer,Bottom table(utilizado muito em aplicativos para iOS, com uma barra de navegação abaixo).