Agora, vamos trabalhar nas rotas, para começarmos a visualização. Vamos dentro de “Routes” criar um arquivo chamado “index.jsx” e outro chamado “AllPages.jsx”

Vamos colocar então a nossa página start dentro de “AllPages”. Pois mais para frente, teremos uma renderização condicional, vamos mostrar certas páginas em algumas condições.

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

import Start from "../pages/Start";

const Stack = createNativeStackNavigator();

export default function AllPages() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="Start" component={Start} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Com isso feito, nós podemos ir em “index.jsx” para poder exibir esse arquivo. Agora, nós vamos ter apenas ele, mas depois teremos a renderização condicional.

import AllPages from "./AllPages";

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

Agora que temos o arquivo linkado, podemos ir em “App.js” para poder exibir de fato na tela.

Vamos excluir tudo que temos aqui em “App.js” e deixaremos apenas o status bar, que servirá para manipulação da barra de status do celular. E aqui nós iremos importar o “gesture-handler”, que é um “pedido” da documentação.

import React from "react";
import { StatusBar } from "react-native";

import Routes from "./src/Routes";

export default function App() {
  return (
    <>
      <StatusBar barStyle={"auto"} />
      <Routes />
    </>
  );
}