Chore: Navigation fix

src/navigation/AuthStackNavigator.tsx

@@ -4,21 +4,23 @@ import LoginScreen from "../screens/auth/LoginScreen";
 import { AuthStackParamList } from "../types/navigation";
 import RegisterGoogleFacebookScreen from "../screens/auth/RegisterGoogleFacebookScreen";
 import RegisterScreen from "../screens/auth/RegisterScreen";
-import ForgetPasswordScreen from "../screens/auth/ForgetPasswordScreen";
 import OnBoardingScreen from "../screens/auth/OnBoardingScreen";
 import LandingScreen from "../screens/auth/LandingScreen";
+import ForgotPasswordInput from "../screens/auth/ForgotPasswordDone";
+import ForgotPasswordDone from "../screens/auth/ForgotPasswordDone";
+
 const AuthStack = createNativeStackNavigator<AuthStackParamList>();
 const AuthStackNavigator = () => {
   return (
     <AuthStack.Navigator>
       <AuthStack.Screen
-        name="Login"
-        component={LoginScreen}
+        name="onboarding"
+        component={OnBoardingScreen}
         options={{ headerShown: false }}
       />
       <AuthStack.Screen
-        name="onboarding"
-        component={OnBoardingScreen}
+        name="Login"
+        component={LoginScreen}
         options={{ headerShown: false }}
       />
       <AuthStack.Screen
@@ -37,9 +39,14 @@ const AuthStackNavigator = () => {
         options={{ title: "Register" }}
       />
       <AuthStack.Screen
-        name="ForgetPassword"
-        component={ForgetPasswordScreen}
-        options={{ title: "Forget Password" }}
+        name="ForgotPasswordInput"
+        component={ForgotPasswordInput}
+        options={{ title: "Forgot Password Input" }}
+      />
+      <AuthStack.Screen
+        name="ForgotPasswordDone"
+        component={ForgotPasswordDone}
+        options={{ title: "Forgot Password Done" }}
       />
     </AuthStack.Navigator>
   );

src/navigation/RootNavigator.tsx

@@ -15,13 +15,13 @@ const RootNavigator = () => {
   return (
     <RootStack.Navigator>
       <RootStack.Screen
-        name="MainTab"
-        component={BottomTabNavigator}
+        name="Auth"
+        component={AuthStackNavigator}
         options={{ headerShown: false }}
       />
       <RootStack.Screen
-        name="Auth"
-        component={AuthStackNavigator}
+        name="MainTab"
+        component={BottomTabNavigator}
         options={{ headerShown: false }}
       />
     </RootStack.Navigator>

src/screens/auth/ForgetPasswordScreen.tsx

-import React from "react";
-import { StyleSheet } from "react-native";
-import { Text, View } from "../../components/Themed";
-import { RootTabScreenProps } from "../../types/navigation";
-import { useNavigation } from "@react-navigation/core";
-const ForgetPasswordScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
-  const nav = useNavigation();
-  return (
-    <View style={styles.container}>
-      <Text>Forget Password Screen</Text>
-    </View>
-  );
-};
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
-export default ForgetPasswordScreen;

src/screens/auth/ForgotPasswordDone.tsx

+import { useNavigation } from "@react-navigation/core";
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import Colors from "../../constants/Colors";
+import { RootTabScreenProps } from "../../types/navigation";
+import Spacer from "../../components/Spacer/Spacer";
+import { MaterialIcons } from "@expo/vector-icons";
+import MainButton from "../../components/button/MainButton";
+
+export default function ForgotPasswordDone({
+  navigation,
+}: RootTabScreenProps<"TabOne">) {
+  const nav = useNavigation();
+  return (
+    <View style={styles.MainContainer}>
+      <MaterialIcons name="arrow-back" size={24} />
+      <Spacer variant="xl" />
+      <View style={styles.TextContainer}>
+        <Text style={styles.Title}>Lupa Password</Text>
+      </View>
+      <Spacer variant="xl" />
+      <View style={styles.TextContainer}>
+        <Text style={styles.Subtitle}>
+          Kami sudah mengirimkan email berisi link untuk mereset password,
+          silahkan cek email anda
+        </Text>
+      </View>
+      <Spacer variant="xl" />
+      <MainButton
+        text={"Kembali"}
+        colors={"Primary"}
+        onPress={() => nav.navigate("Auth", { screen: "Login" })}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  MainContainer: {
+    padding: 24,
+    backgroundColor: Colors.text.white,
+  },
+  TextContainer: {
+    width: "100%",
+  },
+  Title: {
+    fontSize: 32,
+    fontWeight: "500",
+    color: Colors.text.title,
+  },
+  Subtitle: {
+    fontSize: 20,
+    fontWeight: "300",
+    color: Colors.text.subtitle,
+  },
+});

src/screens/auth/ForgotPasswordInput.tsx

+import { useNavigation } from "@react-navigation/core";
+import React from "react";
+import { useState } from "react";
+import { StyleSheet, View, Text } from "react-native";
+import Colors from "../../constants/Colors";
+import { RootTabScreenProps } from "../../types/navigation";
+import PlainForm from "../../components/Forms/PlainForm";
+import Spacer from "../../components/Spacer/Spacer";
+import { MaterialIcons } from "@expo/vector-icons";
+import MainButton from "../../components/button/MainButton";
+import firebase from "firebase";
+
+export default function ForgotPasswordInput({
+  navigation,
+}: RootTabScreenProps<"TabOne">) {
+  const [email, setEmail] = useState("");
+  const nav = useNavigation();
+  return (
+    <View style={styles.MainContainer}>
+      <MaterialIcons name="arrow-back" size={24} />
+      <Spacer variant="xl" />
+      <View style={styles.TextContainer}>
+        <Text style={styles.Title}>Lupa Password</Text>
+        <Spacer variant="xl" />
+      </View>
+      <View style={styles.TextContainer}>
+        <Text style={styles.Subtitle}>
+          Silahkan masukkan email anda untuk mereset password
+        </Text>
+      </View>
+      <Spacer variant="xl" />
+      <PlainForm
+        formTitle={"Email"}
+        placeholder={"Masukkan Email"}
+        text={email}
+        setText={setEmail}
+      />
+      <Spacer variant="xl" />
+      <MainButton
+        text={"Reset Password"}
+        colors={"Primary"}
+        onPress={() => {
+          firebase.auth().sendPasswordResetEmail(email);
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  MainContainer: {
+    padding: 24,
+    backgroundColor: Colors.text.white,
+  },
+  TextContainer: {
+    width: "100%",
+  },
+  Title: {
+    fontSize: 32,
+    fontWeight: "500",
+    color: Colors.text.title,
+  },
+  Subtitle: {
+    fontSize: 20,
+    fontWeight: "300",
+    color: Colors.text.subtitle,
+  },
+});

src/screens/auth/LoginScreen.tsx

@@ -45,14 +45,20 @@ const LoginScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
       <View style={[styles.textWrapper]}>
         <Text
           style={styles.forgot}
-          onPress={() => nav.navigate("ForgetPassword")}
+          onPress={() =>
+            nav.navigate("Auth", { screen: "ForgotPasswordInput" })
+          }
         >
           Lupa password anda?
         </Text>
       </View>
       <Spacer variant={"xl"} />
       <View style={styles.button}>
-        <MainButton text="Masuk" colors="primary" onPress={() => {}} />
+        <MainButton
+          text="Masuk"
+          colors="primary"
+          onPress={() => nav.navigate("Auth", { screen: "Login" })}
+        />
       </View>
       <Spacer variant={"l"} />
       <View style={styles.button}>
@@ -76,9 +82,10 @@ const LoginScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
           Belum Punya akun?
           <Text
             style={styles.register}
-            onPress={() => nav.navigate("RegisterScreen")}
+            onPress={() =>
+              nav.navigate("Auth", { screen: "ForgotPasswordInput" })
+            }
           >
-            {" "}
             Daftar disini
           </Text>
         </Text>

src/screens/auth/OnBoardingScreen.tsx

@@ -31,7 +31,7 @@ export default function OnBoardingScreen({
         <MainButton
           text="Masuk"
           colors="primary"
-          onPress={() => nav.navigate("Auth")}
+          onPress={() => nav.navigate("Auth", { screen: "Login" })}
         />
       </View>
       <Spacer variant="l" />
@@ -39,12 +39,15 @@ export default function OnBoardingScreen({
         <MainButton
           text="Daftar"
           colors="secondary"
-          onPress={() => nav.navigate("Auth")}
+          onPress={() => nav.navigate("Auth", { screen: "RegisterScreen" })}
         />
       </View>
       <Spacer variant="l" />
       <View style={[styles.textWraper, { alignItems: "center" }]}>
-        <Text style={styles.tamu} onPress={() => nav.navigate("Auth")}>
+        <Text
+          style={styles.tamu}
+          onPress={() => nav.navigate("Profile", { screen: "ProfileScreen" })}
+        >
           Lanjutkan sebagai tamu
         </Text>
       </View>

src/types/navigation/AuthStack.ts

@@ -8,7 +8,8 @@ export type AuthStackParamList = {
   Login: undefined;
   RegisterGoogle: undefined;
   RegisterScreen: undefined;
-  ForgetPassword: undefined;
+  ForgotPasswordInput: undefined;
+  ForgotPasswordDone: undefined;
   onboarding: undefined;
   landing: undefined;
 };

src/types/navigation/RootStack.ts

@@ -5,12 +5,13 @@
 
 import { NavigatorScreenParams } from "@react-navigation/native";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
+import { AuthStackParamList, ProfileStackParamList } from ".";
 import { RootTabParamList } from "./RootTab";
 
 export type RootStackParamList = {
   MainTab: NavigatorScreenParams<RootTabParamList> | undefined;
-  Auth: undefined;
-  Profile: undefined;
+  Auth: NavigatorScreenParams<AuthStackParamList>;
+  Profile: NavigatorScreenParams<ProfileStackParamList>;
   Modal: undefined;
   NotFound: undefined;
 };