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

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 = {