Added content to onboarding and improved button to be responsive if disabled

package-lock.json

@@ -20,6 +20,7 @@
         "moti": "^0.25.3",
         "react": "18.2.0",
         "react-native": "0.71.8",
+        "react-native-dropdown-picker": "^5.4.6",
         "react-native-gesture-handler": "~2.9.0",
         "react-native-reanimated": "~2.14.4",
         "react-native-safe-area-context": "4.5.0",
@@ -12160,6 +12161,15 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "node_modules/react-native-dropdown-picker": {
+      "version": "5.4.6",
+      "resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.6.tgz",
+      "integrity": "sha512-T1XBHbE++M6aRU3wFYw3MvcOuabhWZ29RK/Ivdls2r1ZkZ62iEBZknLUPeVLMX3x6iUxj4Zgr3X2DGlEGXeHsA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz",

package.json

@@ -16,18 +16,19 @@
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "expo": "~48.0.18",
+    "expo-linking": "~4.0.1",
     "expo-status-bar": "~1.4.4",
     "moti": "^0.25.3",
     "react": "18.2.0",
     "react-native": "0.71.8",
+    "react-native-dropdown-picker": "^5.4.6",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
     "react-redux": "^8.1.1",
-    "redux": "^4.2.1",
-    "expo-linking": "~4.0.1"
+    "redux": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/components/Button/Button.tsx

@@ -1,20 +1,31 @@
 import * as React from "react";
 import { Pressable, GestureResponderEvent } from "react-native";
 import styles from "../../styles";
+import { colors } from "../../styles";
 
 export interface props {
   children: React.ReactNode;
   onPress: (event: GestureResponderEvent) => void;
   color: string;
+  disabled?: boolean;
 }
 
-export default function Button(props: props) {
+export default function Button({ disabled = false, ...props }: props) {
+  const rgb = props.color.match(/\d+/g);
   return (
     <Pressable
+      disabled={disabled}
       onPress={props.onPress}
       style={{
         ...styles.button_template,
-        ...{ backgroundColor: props.color, width: "50%" },
+        ...{
+          backgroundColor: disabled
+            ? rgb
+              ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.3)`
+              : "rgba(0, 0, 0, 0)"
+            : props.color,
+          width: "50%",
+        },
       }}
     >
       {props.children}

src/routes/Onboarding/Onboarding.tsx

@@ -6,6 +6,7 @@ import { RootDrawerParamList } from "../../interfaces/Interfaces";
 import { colors } from "../../styles";
 import { AnimatePresence, MotiView } from "moti";
 import { useEffect, useState } from "react";
+import Button from "../../components/Button/Button";
 export default function Onboarding() {
   const navigation = useNavigation<RootDrawerParamList>();
   // const dispatch = useDispatch();
@@ -15,6 +16,17 @@ export default function Onboarding() {
     course: "",
     semester: "",
   });
+  function isStringEmpty(str: string) {
+    return str === "" || str === null || str === undefined;
+  }
+  const [complete, setComplete] = useState(false);
+  useEffect(() => {
+    setComplete(
+      !isStringEmpty(student_info.year_level) &&
+        !isStringEmpty(student_info.course) &&
+        !isStringEmpty(student_info.semester)
+    );
+  }, [student_info]);
   function Introduction() {
     const [shown, setShown] = useState(true);
     useEffect(() => {
@@ -72,6 +84,20 @@ export default function Onboarding() {
         >
           <Text style={styles.text_white_medium}>Academic Info</Text>
         </MotiView>
+        <MotiView
+          from={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ type: "timing", duration: 900, delay: 2000 }}
+          style={styles.button_template}
+        >
+          <Button
+            disabled={!complete}
+            onPress={() => console.log(complete)}
+            color={colors.blue_3}
+          >
+            <Text style={styles.text_white_small}>Proceed</Text>
+          </Button>
+        </MotiView>
       </View>
     </View>
   );

src/styles.tsx

@@ -11,6 +11,7 @@ export const colors = {
   text_error: "#e32d1e",
   text_success: "green",
   icon_color: "white",
+  blue_disabled: "#C07624",
 };
 
 export const font_sizes = {