sexual preference UIs completed

emma-frontend/App.js

@@ -11,6 +11,7 @@ import PatientRegThree from "./components/patientscreens/registration/regThree";
 import PatientRegisterFour from "./components/patientscreens/registration/regFour";
 import PatientRegFourOptional from "./components/patientscreens/registration/regFourOptional";
 import PatientRegFive from "./components/patientscreens/registration/regFive";
+import PatientRegSix from "./components/patientscreens/registration/regSix";
 
 const Stack = createStackNavigator();
 
@@ -72,6 +73,11 @@ export default function App() {
             component={PatientRegFive}
             options={{ headerShown: false }}
           />
+          <Stack.Screen
+            name="PatientRegSix"
+            component={PatientRegSix}
+            options={{ headerShown: false }}
+          />
         </Stack.Navigator>
       ) : (
         <SplashScreenComponent />

emma-frontend/components/patientscreens/registration/regFive.js

@@ -41,6 +41,7 @@ export default function PatientRegFive({ navigation, route }) {
       relationshipStatus: radioOptions[relationshipStatus].label,
       numberOfChildren,
     };
+    navigation.navigate("PatientRegSix", data);
     console.log(data);
   };
 

emma-frontend/components/patientscreens/registration/regFour.js

@@ -35,7 +35,7 @@ export default function PatientRegFour({ navigation, route }) {
       navigation.navigate("PatientRegFourOptional", data);
       console.log(data);
     } else {
-      navigation.navigation("PatientRegFive", data);
+      navigation.navigate("PatientRegFive", data);
       data.orphan = "Yes";
       console.log(data);
     }

emma-frontend/components/patientscreens/registration/regSix.js

+import React, { useState } from "react";
+import { View, Text, Button } from "react-native";
+import RadioForm, {
+  RadioButton,
+  RadioButtonInput,
+  RadioButtonLabel,
+} from "react-native-simple-radio-button";
+
+export default function PatientRegSix({ navigation, route }) {
+  const [selectedOption, setSelectedOption] = useState("");
+
+  const radioOptions = [
+    { label: "Heterosexual", value: "Heterosexual" },
+    { label: "Gay", value: "Gay" },
+    { label: "Lesbian", value: "Lesbian" },
+    { label: "Bisexual", value: "Bisexual" },
+    { label: "Other", value: "Other" },
+  ];
+
+  const handleOptionSelect = (value) => {
+    setSelectedOption(value);
+  };
+
+  const handleNext = () => {
+    var data = {
+      email: route.params.email,
+      username: route.params.username,
+      password: route.params.password,
+      name: route.params.name,
+      pronoun: route.params.pronoun,
+      stringDate: route.params.stringDate,
+      gender: route.params.gender,
+      orphan: route.params.orphan,
+      siblingCount: route.params.siblingCount,
+      relationshipStatus: route.params.relationshipStatus,
+      numberOfChildren: route.params.numberOfChildren,
+      sexualPreference: selectedOption,
+    };
+    //navigation.navigate("PatientRegSeven", data);
+    console.log(data);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>Sexual Preference:</Text>
+      <RadioForm
+        radio_props={radioOptions}
+        initial={selectedOption}
+        onPress={handleOptionSelect}
+        formHorizontal={false}
+        labelHorizontal={true}
+        buttonColor={"#2196f3"}
+      />
+      <Button title="Next" onPress={handleNext} />
+    </View>
+  );
+}
+
+const styles = {
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  label: {
+    fontSize: 18,
+    marginBottom: 10,
+  },
+};