Auth navigate

src/navigation/AuthStackNavigator.tsx

@@ -2,9 +2,12 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import React from "react";
 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";
 const AuthStack = createNativeStackNavigator<AuthStackParamList>();
-
 const AuthStackNavigator = () => {
   return (
     <AuthStack.Navigator>
@@ -13,6 +16,31 @@ const AuthStackNavigator = () => {
         component={LoginScreen}
         options={{ headerShown: false }}
       />
+      <AuthStack.Screen
+        name="onboarding"
+        component={OnBoardingScreen}
+        options={{ headerShown: false }}
+      />
+      <AuthStack.Screen
+        name="landing"
+        component={LandingScreen}
+        options={{ headerShown: false }}
+      />
+      <AuthStack.Screen
+        name="RegisterGoogle"
+        component={RegisterGoogleFacebookScreen}
+        options={{ title: "Register Google/Facebook" }}
+      />
+      <AuthStack.Screen
+        name="RegisterScreen"
+        component={RegisterScreen}
+        options={{ title: "Register" }}
+      />
+      <AuthStack.Screen
+        name="ForgetPassword"
+        component={ForgetPasswordScreen}
+        options={{ title: "Forget Password" }}
+      />
     </AuthStack.Navigator>
   );
 };

src/screens/TabOneScreen.tsx

@@ -4,7 +4,6 @@ import { StyleSheet } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import MainButton from "../components/button/MainButton";
 import SmallButton from "../components/button/SmallButton";
-
 import { Text, View } from "../components/Themed";
 import Colors from "../constants/Colors";
 import { RootTabScreenProps } from "../types/navigation";

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/LandingScreen.tsx

@@ -2,7 +2,6 @@ import { useNavigation } from "@react-navigation/core";
 import * as React from "react";
 import { StyleSheet, Image } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
-
 import { View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import { RootTabScreenProps } from "../../types/navigation";

src/screens/auth/LoginScreen.tsx

@@ -5,13 +5,13 @@ import { StyleSheet } from "react-native";
 import MainButton from "../../components/button/MainButton";
 import PlainForm from "../../components/Forms/PlainForm";
 import IconForm from "../../components/Forms/IconForm";
-
 import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import { RootTabScreenProps } from "../../types/navigation";
 import Spacer from "../../components/Spacer/Spacer";
 
-const LoginScreen = () => {
+const LoginScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
+  const nav = useNavigation();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   return (
@@ -43,7 +43,10 @@ const LoginScreen = () => {
       />
       <Spacer variant={"m"} />
       <View style={[styles.textWrapper]}>
-        <Text style={styles.forgot} onPress={() => {}}>
+        <Text
+          style={styles.forgot}
+          onPress={() => nav.navigate("ForgetPassword")}
+        >
           Lupa password anda?
         </Text>
       </View>
@@ -71,7 +74,10 @@ const LoginScreen = () => {
       <View style={[styles.textWrapper, { alignItems: "center" }]}>
         <Text style={styles.unregistered}>
           Belum Punya akun?
-          <Text style={styles.register} onPress={() => {}}>
+          <Text
+            style={styles.register}
+            onPress={() => nav.navigate("RegisterScreen")}
+          >
             {" "}
             Daftar disini
           </Text>

src/screens/auth/RegisterGoogleFacebookScreen.tsx

@@ -7,8 +7,13 @@ import Spacer from "../../components/Spacer/Spacer";
 import MainButton from "../../components/button/MainButton";
 import Colors from "../../constants/Colors";
 import DropdownForm from "../../components/Forms/DropdownForm";
+import { RootTabScreenProps } from "../../types/navigation";
+import { useNavigation } from "@react-navigation/core";
 
-const RegisterGoogleFacebookScreen = () => {
+const RegisterGoogleFacebookScreen = ({
+  navigation,
+}: RootTabScreenProps<"TabOne">) => {
+  const nav = useNavigation();
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
   const [phoneNo, setPhoneNo] = useState("");

src/screens/auth/RegisterScreen.tsx

@@ -8,8 +8,11 @@ import IconForm from "../../components/Forms/IconForm";
 import Spacer from "../../components/Spacer/Spacer";
 import MainButton from "../../components/button/MainButton";
 import DropdownForm from "../../components/Forms/DropdownForm";
+import { RootTabScreenProps } from "../../types/navigation";
+import { useNavigation } from "@react-navigation/core";
 
-const RegisterScreen = () => {
+const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
+  const nav = useNavigation();
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
   const [email, setEmail] = useState("");

src/screens/profile/AccountSettingsScreen.tsx

 import { useNavigation } from "@react-navigation/core";
 import * as React from "react";
-import { Button, StyleSheet } from "react-native";
-import { TouchableOpacity } from "react-native-gesture-handler";
-
+import { Button, StyleSheet, Image } from "react-native";
+import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
+import PlainForm from "../../components/Forms/PlainForm";
+import { useState } from "react";
 import { Text, View } from "../../components/Themed";
 import Colors from "../../constants/Colors";
 import { RootTabScreenProps } from "../../types/navigation";
+import Spacer from "../../components/Spacer/Spacer";
 
 export default function AccountSettingsScreen({
   navigation,
 }: RootTabScreenProps<"Profile">) {
+  const [namaDepan, setNamaDepan] = useState("");
+  const [namaBelakang, setNamaBelakang] = useState("");
+  const [email, setEmail] = useState("");
+  const [hp, setHp] = useState("");
+  const [bisnis, setBisnis] = useState("");
   const nav = useNavigation();
   return (
-    <View style={styles.container}>
+    <ScrollView>
       {/* <TouchableOpacity onPress={() => nav.navigate("ChangePassword")}>
         <Text>Ganti Password</Text>
       </TouchableOpacity> */}
-      <Button
-        onPress={() => nav.navigate("ChangePassword")}
-        title="Change Password"
-      />
-    </View>
+      <View style={styles.container}>
+        <View style={styles.profileImage}>{/* <Image></Image> */}</View>
+        <View>
+          <TouchableOpacity>
+            <Text style={styles.text}>Ganti Foto</Text>
+          </TouchableOpacity>
+        </View>
+        <Spacer variant="l" />
+        <View style={{ width: "100%" }}>
+          <PlainForm
+            formTitle={"Nama Depan"}
+            text={namaDepan}
+            setText={setNamaDepan}
+            placeholder=""
+          />
+          <Spacer variant="l" />
+          <PlainForm
+            formTitle={"Nama Belakang"}
+            text={namaBelakang}
+            setText={setNamaBelakang}
+            placeholder=""
+          />
+          <Spacer variant="l" />
+          <PlainForm
+            formTitle={"Email"}
+            text={email}
+            setText={setEmail}
+            placeholder=""
+          />
+          <Spacer variant="l" />
+          <PlainForm
+            formTitle={"No. Handphone"}
+            text={hp}
+            setText={setHp}
+            placeholder=""
+            phone
+          />
+          <Spacer variant="l" />
+          <PlainForm
+            formTitle={"Kategori Bisnis"}
+            text={bisnis}
+            setText={setBisnis}
+            placeholder=""
+          />
+        </View>
+        <Spacer variant="xl" />
+        <Button
+          onPress={() => nav.navigate("ChangePassword")}
+          title="Change Password"
+        />
+      </View>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
     backgroundColor: Colors.background,
+    padding: 24,
+    alignItems: "center",
   },
   title: {
     fontSize: 20,
@@ -40,4 +94,25 @@ const styles = StyleSheet.create({
     height: 1,
     width: "80%",
   },
+  profileImage: {
+    alignItems: "center",
+    width: 100,
+    height: 100,
+    borderRadius: 100,
+    overflow: "hidden",
+    borderColor: Colors.button.primary.bg,
+    borderWidth: 2,
+    marginBottom: 8,
+  },
+  image: {
+    flex: 1,
+    height: undefined,
+    width: undefined,
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: "300",
+    fontStyle: "normal",
+    color: Colors.text.link,
+  },
 });

src/types/navigation/AuthStack.ts

-/**
+/***
  * Learn more about using TypeScript with React Navigation:
  * https://reactnavigation.org/docs/typescript/
  */
@@ -6,6 +6,11 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack";
 
 export type AuthStackParamList = {
   Login: undefined;
+  RegisterGoogle: undefined;
+  RegisterScreen: undefined;
+  ForgetPassword: undefined;
+  onboarding: undefined;
+  landing: undefined;
 };
 
 export type AuthStackScreenProps<Screen extends keyof AuthStackParamList> =

src/types/navigation/ProfileStack.ts

@@ -6,9 +6,10 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack";
 
 export type ProfileStackParamList = {
   ChangePassword: undefined;
+  ProfileScreen: undefined;
+  AccountSettings: undefined;
   TabTwoScreen: undefined;
 };
-
 export type ProfileStackScreenProps<
   Screen extends keyof ProfileStackParamList
 > = NativeStackScreenProps<ProfileStackParamList, Screen>;

yarn.lock

@@ -2668,7 +2668,7 @@
 
 "@react-navigation/native-stack@^6.1.0":
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.1.0.tgz#32e50d07bc8d9669d65f72dc4ffec2a6cc9ef379"
   integrity sha512-ta8JQ9n6e7pxrXJ9/MYH57g0xhlV8rzGvQtni6KvBdWqqk0M5QDqIXaUkzXp2wvLMZp7LQmnD4FI/TGG2mQOKA==
   dependencies:
     "@react-navigation/elements" "^1.1.0"
@@ -9250,7 +9250,7 @@ react-timer-mixin@^0.13.4:
 
 react@16.13.1:
   version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
   integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
   dependencies:
     loose-envify "^1.1.0"
@@ -9328,7 +9328,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
 
 regexp.prototype.flags@^1.3.1:
   version "1.3.1"
-  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
   integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
   dependencies:
     call-bind "^1.0.2"