→ Criar o routes.tsx dentro de /src e importar

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

createStackNavigator é usado para fazer uma navegação em pilha. Mesmo que eu vou avançando telas, as rotas anteriores não deixam de exisir. Geralmnete usamos essa navegação Stack quando vamos avançando e temos botão de voltar, quando estamos navegando por botões

Vamos deixar pré configurado as outras rotas/telas da aplicação para importar tudo no routes.tsx já

Então vamos criar /Points e /Detail dentro de /pages e um index.tsx com um componete retornando apenas uma View em branco

import React from 'react'
import { View } from 'react-native'

const Points = () => {
    return <View />
}

export default Points

import React from 'react'
import { View } from 'react-native'

const Points = () => {
    return <View />
}

export default Points

Agora vamos importar todas essas rotas no nosso routes.tsx e criar uma cont AppStack que vai receber o método de createStackNavigator. Depois criamos criamos um componente de rotas Routes que recebe uma função e que vao retornar nossas rotas

React Navigation

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

import Home from './pages/Home'
import Points from './pages/Points'
import Detail from './pages/Detail'

const AppStack = createStackNavigator()

const Routes = () => {
    return (
        <NavigationContainer>
            <AppStack.Navigator>
                <AppStack.Screen name="Home" component={Home} />
                <AppStack.Screen name="Points" component={Points} />
                <AppStack.Screen name="Detail" component={Detail} />
            </AppStack.Navigator>
        </NavigationContainer>
    )
}

export default Routes

<NavigationContainer> → Parecido com o <BrowserRouter> na web - define como nossas rotas devem se comportar

<AppStack.Navigator>

<AppStack.Screen /> Para cada tela/rota, como se fosse o Route da web

name → nome da rota, mas aqui não temos URL

componente → componente que vai ser exibido em tela quando esta rota estiver ativa

Agora vamos importar essas rotas para o App.tsx da raiz do projeto. Antes estávamos importando a Home, mas agora como temos várias rotas e estão todas em routes.tsx importamos todas de uma vez.

Perceba que agora apareceu um cabeçalho na aplicação, isso é padrão. Nós não vamos utilizar para isso basta passar um atributo headerMode="none" no <App.StackNavigator>