Nós vamos começar estruturando as pastas que iremos criar. Nós vamos criar uma pasta chamada “HabitPage” dentro da pasta “Pages”. Dentro de “HabitPage” iremos criar um “index.jsx”. “Pages → HabitPage → index.jsx”

Ao criar a estrutura, iremos começar criando uma view com um botão, que voltará para a página anterior através da navegação.

import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
  Alert
} from "react-native";

import { useNavigation } from "@react-navigation/native";

export default function HabitPage() {
	const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <ScrollView>
        <View>
          <TouchableOpacity
            style={styles.bakcPageBtn}
            onPress={() => navigation.goBack()}
          >
            <Image
              source={require("../../assets/icons/arrowBack.png")}
              style={styles.arrowBack}
            />
          </TouchableOpacity>
          <View style={styles.mainContent}>
            
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "rgba(21, 21, 21, 0.98)",
  },
  bakcPageBtn: {
    width: 40,
    height: 40,
    margin: 25,
  },
  arrowBack: {
    width: 40,
    height: 40,
  },
  mainContent: {
    width: 250,
    alignSelf: "center",
  },
})

Agora, dentro do nosso arquivo “AllPages.jsx” que está dentro de “Routes” iremos adicionar nossa página criada, para conseguir visualizar ela. “Routes → AllPages.jsx”

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

import Start from "../pages/Start";
import AppExplanation from "../pages/AppExplanation";
import Home from "../Pages/Home";
import HabitPage from "../Pages/HabitPage";

const Stack = createNativeStackNavigator();

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

Nós iremos agora criar um arquivo chamado “HomePage.jsx” dentro de “Routes”, que irá ser exibido quando nós tivermos a renderização condicional. “Routes → HomePage.jsx”

Nós iremos colocar quase a mesma coisa que colocamos no arquivo “AllPages”, porém, sem a rota da página start e também mudando a ordem, deixando a rota da página “home” em cima. “Routes → HomePage.jsx”

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

import AppExplanation from "../Pages/AppExplanation";
import Home from "../Pages/Home";
import HabitPage from "../Pages/HabitPage";

const Stack = createNativeStackNavigator();

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

Agora ainda mexendo nas rotas, nós vamos no index.jsx, para poder fazer a renderização condicional, e termos a mudança quando o usuário clicar em “continuar” na página “AppExplanation”. “Routes → index.jsx”

import { useState } from "react";

import AllPages from "./AllPages";
import HomePage from "./HomePage";

export default function Routes() {
  const [showHome, setShowHome] = useState("false");

  return <>{showHome === "true" ? <HomePage /> : <AllPages />}</>;
}

Esse estado de “showHome” será modificado quando tivermos o SQLite funcionando.