DOB and gender picker

emma-frontend/App.js

@@ -7,6 +7,7 @@ import SharedLogin from "./components/shared/sharedLogin";
 import SharedRegisterScreen from "./components/shared/sharedRegistration";
 import PatientRegOne from "./components/practitionerscreens/registration/regOne";
 import PatientRegTwo from "./components/practitionerscreens/registration/regTwo";
+import PatientRegThree from "./components/practitionerscreens/registration/regThree";
 
 const Stack = createStackNavigator();
 
@@ -48,6 +49,11 @@ export default function App() {
             component={PatientRegTwo}
             options={{ headerShown: false }}
           />
+          <Stack.Screen
+            name="PatientRegThree"
+            component={PatientRegThree}
+            options={{ headerShown: false }}
+          />
         </Stack.Navigator>
       ) : (
         <SplashScreenComponent />

emma-frontend/components/practitionerscreens/registration/regThree.js

+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  Button,
+} from "react-native";
+import RadioForm, {
+  RadioButton,
+  RadioButtonInput,
+  RadioButtonLabel,
+} from "react-native-simple-radio-button";
+import DateTimePicker from "@react-native-community/datetimepicker";
+
+export default function PatientRegThree({ navigation, route }) {
+  const [birthday, setBirthday] = useState(new Date());
+  const [gender, setGender] = useState("");
+  const [showDatePicker, setShowDatePicker] = useState(false);
+
+  const handleDateChange = (event, selectedDate) => {
+    const currentDate = selectedDate || date;
+    setShowDatePicker(false);
+    setBirthday(currentDate);
+  };
+
+  const handleNext = () => {
+    // navigation.navigate("PatientRegFour", {
+    //   email: route.params.email,
+    //   username: route.params.username,
+    //   password: route.params.password,
+    //   name: route.params.name,
+    //   pronoun: route.params.pronoun,
+    //   birthday,
+    //   gender,
+    // });
+    console.log({
+      email: route.params.email,
+      username: route.params.username,
+      password: route.params.password,
+      name: route.params.name,
+      pronoun: route.params.pronoun,
+      birthday,
+      gender,
+    });
+  };
+
+  const radioOptions = [
+    { label: "Male", value: "male" },
+    { label: "Female", value: "female" },
+    { label: "Other", value: "other" },
+  ];
+
+  return (
+    <View style={styles.container}>
+      <Text>Date of Birth</Text>
+      <Button title="Pick a date" onPress={() => setShowDatePicker(true)} />
+      {showDatePicker && (
+        <DateTimePicker
+          value={birthday}
+          mode="date"
+          display="default"
+          onChange={handleDateChange}
+        />
+      )}
+
+      <Text>Gender</Text>
+      <RadioForm
+        radio_props={radioOptions}
+        initial={0}
+        onPress={(value) => setGender(value)}
+        formHorizontal={true}
+        labelHorizontal={false}
+        buttonColor={"#2196f3"}
+        selectedButtonColor={"#2196f3"}
+        labelStyle={{ fontSize: 16, marginHorizontal: 10 }}
+        style={{ marginVertical: 10 }}
+      />
+      <Button title="Next" onPress={handleNext} />
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  input: {
+    width: "80%",
+    height: 40,
+    marginVertical: 10,
+    paddingHorizontal: 10,
+    borderColor: "gray",
+    borderWidth: 1,
+    borderRadius: 5,
+  },
+  label: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginVertical: 10,
+  },
+  datePicker: {
+    width: "100%",
+    marginBottom: 20,
+  },
+  dateInput: {
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: "#ccc",
+  },
+  dateText: {
+    fontSize: 16,
+  },
+  placeholderText: {
+    fontSize: 16,
+    color: "#aaa",
+  },
+  btnTextConfirm: {
+    color: "#2196f3",
+  },
+  btnTextCancel: {
+    color: "#666",
+  },
+});

emma-frontend/components/practitionerscreens/registration/regTwo.js

@@ -22,13 +22,13 @@ export default function PatientRegTwo() {
   ];
 
   const handleNext = () => {
-    // navigation.navigate("PatientRegThree", {
-    //   email,
-    //   username,
-    //   password,
-    //   name,
-    //   pronoun: pronounOptions[pronoun].label,
-    // });
+    navigation.navigate("PatientRegThree", {
+      email,
+      username,
+      password,
+      name,
+      pronoun: pronounOptions[pronoun].label,
+    });
     console.log(email, username, password, name, pronounOptions[pronoun].label);
   };
 

emma-frontend/package-lock.json

@@ -8,12 +8,14 @@
       "name": "emma-frontend",
       "version": "1.0.0",
       "dependencies": {
+        "@react-native-community/datetimepicker": "6.7.3",
         "@react-navigation/native": "^6.1.6",
         "@react-navigation/stack": "^6.3.16",
         "expo": "~48.0.15",
         "expo-status-bar": "~1.4.4",
         "react": "18.2.0",
         "react-native": "0.71.7",
+        "react-native-datepicker": "^1.7.2",
         "react-native-simple-radio-button": "^2.7.4"
       },
       "devDependencies": {
@@ -4611,6 +4613,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/@react-native-community/datetimepicker": {
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-6.7.3.tgz",
+      "integrity": "sha512-fXWbEdHMLW/e8cts3snEsbOTbnFXfUHeO2pkiDFX3fWpFoDtUrRWvn50xbY13IJUUKHDhoJ+mj24nMRVIXfX1A==",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      }
+    },
     "node_modules/@react-native/assets": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",
@@ -10082,6 +10092,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -11204,6 +11222,14 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "node_modules/react-native-datepicker": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/react-native-datepicker/-/react-native-datepicker-1.7.2.tgz",
+      "integrity": "sha512-ses0N1y44fYBmlejYwR2i+dGnQQ8v5/gacX2CrbFJiWxbcQaRuxexsZPB9YQuQkAy+uKz5Gti3Lrp3dh9BfkzA==",
+      "dependencies": {
+        "moment": "^2.22.0"
+      }
+    },
     "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",
@@ -16792,6 +16818,14 @@
         "joi": "^17.2.1"
       }
     },
+    "@react-native-community/datetimepicker": {
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-6.7.3.tgz",
+      "integrity": "sha512-fXWbEdHMLW/e8cts3snEsbOTbnFXfUHeO2pkiDFX3fWpFoDtUrRWvn50xbY13IJUUKHDhoJ+mj24nMRVIXfX1A==",
+      "requires": {
+        "invariant": "^2.2.4"
+      }
+    },
     "@react-native/assets": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",
@@ -21008,6 +21042,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -21844,6 +21883,14 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "react-native-datepicker": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/react-native-datepicker/-/react-native-datepicker-1.7.2.tgz",
+      "integrity": "sha512-ses0N1y44fYBmlejYwR2i+dGnQQ8v5/gacX2CrbFJiWxbcQaRuxexsZPB9YQuQkAy+uKz5Gti3Lrp3dh9BfkzA==",
+      "requires": {
+        "moment": "^2.22.0"
+      }
+    },
     "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",

emma-frontend/package.json

@@ -9,12 +9,14 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-community/datetimepicker": "6.7.3",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",
     "expo": "~48.0.15",
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-native": "0.71.7",
+    "react-native-datepicker": "^1.7.2",
     "react-native-simple-radio-button": "^2.7.4"
   },
   "devDependencies": {