Vamos criar os arquivos das demais depois, por enquanto nós vamos criar a rota. Vamos começar criando da pasta “routes” o arquivo “index.tsx”

Nós vamos chamar primeiro algumas coisas para começar a criar.

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

Com isso vamos poder criar, vamos criar o “Stack”, que vai ser de onde vamos puxar toda a estrutura das telas.

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

const Stack = createNativeStackNavigator();

Agora, nós vamos criar o tipo que vamos utilizar em todas as rotas. Vamos falar o nome da rota e dizer que ela é undefined, que será o padrão. Nós iremos colocar alguma coisa como tipo da rota caso ela vá transportar através de parâmetros.

Vamos começar colocar a home, que será a primeira que iremos criar.

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

const Stack = createNativeStackNavigator();

type PropsNavigationStack = {
	Home: undefined;
}

Agora, nós iremos tipar o “NativeStackNavigationProp”, para que toda vez que definirmos uma rota ele ser chamado.

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

const Stack = createNativeStackNavigator();

type PropsNavigationStack = {
	Home: undefined;
}

export type PropsStack = NativeStackNavigationProp<PropsNavigationStack>;

Temos então a estrutura de tipagem para começar, não vamos usar elas agora, porém nas próximas aulas você vai ver o seu uso.

Antes de começar a criar de fato a estrutura das rotas, vamos já criar o nosso arquivo da home, pois dessa forma a gente consegue já importar ele e usar.

Dentro de “screens” vamos criar uma pasta chamada “Home” com um “index.tsx” e um “styled.ts”

Dentro do “index.tsx” vamos criar a estrutura base da página utilizando a extensão que temos.

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

const Home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};

export default Home;

Agora, nós podemos criar de fato a estrutura de rota, porém sem ter nenhuma tela por enquanto.

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

import Home from "../screens/Home";

const Stack = createNativeStackNavigator();

type PropsNavigationStack = {
	Home: undefined;
}

export type PropsStack = NativeStackNavigationProp<PropsNavigationStack>;

const Routes = () => {
	return (
		<NavigationContainer>
			<Stack.Navigator
				screenOptions={{
					headerShown: false,
				}}
			>
				 <Stack.Screen name="Home" component={Home} />
			</Stack.Navigator>
		</NavigationContainer>
	);
}

export default Routes

Com isso feito, já podemos ir no “App.tsx” modificar e chamar o routes.

import { StatusBar } from "expo-status-bar";
import Routes from "./src/routes";

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

Agora que isso foi feito, podemos também criar o “themeProvider”, iremos importar o “themeProvider” e também o tema que criamos na aula passada.

import { StatusBar } from "expo-status-bar";
import Routes from "./src/routes";

import { ThemeProvider } from "styled-components/native";
import { myTheme } from "./src/styles";

export default function App() {
  return (
    <>
      <StatusBar style="auto" />
      <ThemeProvider theme={myTheme}>
        <Routes />
      </ThemeProvider>
    </>
  );
}

Com isso feito, nós agora temos o tema para toda a aplicação e as rotas criadas.