Nessa aula vamos criar as rotas e os temas, então vamos iniciar pelas rotas. Vamos importar o React Navigation npm install @react-navigation/native e o npm install @react-navigation/native-stack

1- Abra o arquivo index.jsx da pasta routes, e vamos começar importando o NavigationContainer e o createNativeStackNavigator:

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

const Stack = createNativeStackNavigator();

2- Agora vamos criar a função Routes que vai receber as rotas que vamos precisar para trabalhar com a navegação:

export default function Routes() {
  return ();
}

3- Agora vamos criar a tag stack.navigator que recebe uma propriedade screenOptions, com a opção headerShown false, que vai ocultar o header que vem por padrão na página.

export default function Routes() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false, }}>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

4- Agora vamos começar a criar as rotas para a página Start e Regras:

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

5- No arquivo App.jsx, vamos acrescentar as rotas para que ele seja direcionado para este arquivo, onde inserimos os parâmetros das rotas.

return (
	<Routes />
);