Register Created || Terms and Conditions Modal Created || react-nativ…

package.json

@@ -17,21 +17,22 @@
     "@react-navigation/native-stack": "^7.2.0",
     "expo": "~52.0.23",
     "expo-font": "~13.0.2",
+    "expo-linear-gradient": "~14.0.1",
     "expo-splash-screen": "~0.29.18",
     "expo-status-bar": "~2.0.0",
     "nativewind": "^4.1.23",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.5",
+    "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-reanimated": "^3.16.6",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "^4.4.0",
     "react-native-svg": "15.8.0",
     "react-native-svg-transformer": "^1.5.0",
     "react-native-vector-icons": "^10.2.0",
-    "react-native-web": "~0.19.13",
-    "expo-linear-gradient": "~14.0.1"
+    "react-native-web": "~0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/App.js

@@ -3,8 +3,10 @@ import { Text, View, StatusBar } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import Icon from "react-native-vector-icons/Ionicons";
-import { Quicksand_400Regular, Quicksand_700Bold } from "@expo-google-fonts/quicksand";
+import {
+  Quicksand_400Regular,
+  Quicksand_700Bold,
+} from "@expo-google-fonts/quicksand";
 import { useFonts } from "expo-font";
 
 // Importar os ícones personalizados
@@ -23,6 +25,7 @@ import ProfilePage from "./pages/ProfilePage";
 import HelpPage from "./pages/HelpPage";
 import LoginPage from "./pages/LoginPage";
 import RegisterPage from "./pages/RegisterPage";
+import FirstQuestionnaire from "./pages/FirstQuestionnaire";
 
 export default function App() {
   const [fontsLoaded] = useFonts({
@@ -77,7 +80,13 @@ export default function App() {
                 IconComponent = null;
             }
 
-            return <IconComponent width={size * 1.2} height={size * 1.2} fill={color} />;
+            return (
+              <IconComponent
+                width={size * 1.2}
+                height={size * 1.2}
+                fill={color}
+              />
+            );
           },
           tabBarActiveTintColor: "#fcc766",
           tabBarInactiveTintColor: "#d0d0d0",
@@ -95,7 +104,6 @@ export default function App() {
   // Stack Navigator (para gerenciar Welcome e HomeTabs)
   return (
     <>
-      <StatusBar barStyle="dark-content" />
       <NavigationContainer>
         <Stack.Navigator>
           {/* Tela de boas-vindas sem navbar */}
@@ -110,9 +118,14 @@ export default function App() {
             options={{ headerShown: false }}
           />
           <Stack.Screen
-          name="Register"
-          component={RegisterPage}
-          options={{ headerShown: false }}
+            name="Register"
+            component={RegisterPage}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name="FirstQuestionnaire"
+            component={FirstQuestionnaire}
+            options={{ headerShown: false }}
           />
           {/* Tela HomeTabs com navbar */}
           <Stack.Screen

src/components/PasswordResetModal.js

@@ -131,7 +131,7 @@ export default function PasswordResetModal({
                 value={PassConfirm}
                 placeholder="Confirm Password"
               />
-              <Text>Código</Text>
+              <Text className="font-regular">Código</Text>
               <TextInput
                 className="bg-white w-full text-dark-gray border-solid border-x border-y border-light-gray rounded-lg p-4 placeholder:font-bold placeholder:text-xl placeholder:text-light-gray"
                 keyboardType="numeric"

src/components/SpeechBubble.js

@@ -17,7 +17,7 @@ export default function SpeechBubble() {
       />
       {/* Bubble */}
       <View className="bg-white px-4 py-6 rounded-2xl relative border border-light-gray">
-        <Text className="font-normal text-black text-xl text-center">
+        <Text className="font-regular text-black text-xl text-center">
           Ainda não estás registado?
         </Text>
         <TouchableOpacity>

src/components/TermsAndConditionsModal.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { View, Text, Modal, TouchableOpacity, ScrollView } from "react-native";
+import { FontAwesome } from "@expo/vector-icons";
+
+export default function TermsAndContitionsModal({
+  modalVisible,
+  setModalVisible,
+}) {
+  function CloseModal() {
+    setModalVisible(false);
+  }
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={modalVisible}
+      className="relative"
+    >
+      {/* Overlay */}
+      <View className="bg-black opacity-50 absolute w-full h-full top-0"></View>
+      <View className="h-screen justify-center items-center w-screen px-5">
+        <View className="relative max-h-96 bg-off-white pt-20 pb-10 px-6 flex-col justify-center items-center w-full border-x border-y border-light-gray rounded-lg gap-8">
+          <Text className="text-2xl font-bold text-yellow">
+            Termos e Condições
+          </Text>
+          <ScrollView persistentScrollbar className="w-full">
+            <Text className="font-bold my-3 text-lg"> Lorem ipsum </Text>
+            <Text className="font-regular">
+              Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+              veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+              ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+              voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </Text>
+            <Text className="font-bold mb-3 text-lg"> Lorem ipsum </Text>
+            <Text className="font-regular">
+              Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+              veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+              ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+              voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </Text>
+            <Text className="font-bold mb-3 text-lg"> Lorem ipsum </Text>
+            <Text className="font-regular">
+              Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+              veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+              ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+              voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est laborum.
+            </Text>
+          </ScrollView>
+          <TouchableOpacity
+            className="ml-2 absolute top-4 right-4"
+            onPress={CloseModal}
+          >
+            <FontAwesome name="close" size={24} color="#fcc766" />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+}

src/pages/FirstQuestionnaire.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { View, Text, TouchableOpacity, TextInput } from "react-native";
+export default function FirstQuestionnaire() {
+  return (
+    <View className="flex-1 bg-off-white items-center justify-center">
+      <Text>First Questionnaire</Text>
+    </View>
+  );
+}

src/pages/LoginPage.js

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import { View, Text, TextInput, TouchableOpacity, Image } from "react-native";
+import { View, Text, TextInput, TouchableOpacity } from "react-native";
 import { FontAwesome } from "@expo/vector-icons";
 import PasswordResetModal from "../components/PasswordResetModal";
 import SpeechBubble from "../components/SpeechBubble";
+import { useNavigation } from "@react-navigation/native";
 
 export default function LoginPage() {
   //DB Simulation
@@ -30,6 +31,8 @@ export default function LoginPage() {
     },
   ];
 
+  const navigation = useNavigation();
+
   //State Variables
   const [username, setUname] = useState("");
   const [pass, setPass] = useState("");
@@ -57,6 +60,7 @@ export default function LoginPage() {
           // !Falta a encriptação da password
           console.log(username, pass);
           clearLoginForm();
+          navigation.replace("HomeTabs");
         } else {
           console.log("Wrong password.");
         }