Patient email, pw, un registration UI

emma-frontend/App.js

@@ -5,6 +5,7 @@ import MainScreen from "./components/shared/mainview";
 import SplashScreenComponent from "./components/shared/splashscreen";
 import SharedLogin from "./components/shared/sharedLogin";
 import SharedRegisterScreen from "./components/shared/sharedRegistration";
+import PatientRegOne from "./components/practitionerscreens/registration/regOne";
 
 const Stack = createStackNavigator();
 
@@ -36,6 +37,11 @@ export default function App() {
             component={SharedRegisterScreen}
             options={{ headerShown: false }}
           />
+          <Stack.Screen
+            name="PatientRegOne"
+            component={PatientRegOne}
+            options={{ headerShown: false }}
+          />
         </Stack.Navigator>
       ) : (
         <SplashScreenComponent />

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

+import React, { useState } from "react";
+import { View, TextInput, Button, StyleSheet } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+
+export default function PatientRegOne() {
+  const navigation = useNavigation();
+  const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleNext = () => {
+    // navigation.navigate("PatientRegTwo", {
+    //   email,
+    //   username,
+    //   password,
+    // });
+    console.log(email, username, password);
+  };
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        style={styles.input}
+        placeholder="Email"
+        value={email}
+        onChangeText={(text) => setEmail(text)}
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="Username"
+        value={username}
+        onChangeText={(text) => setUsername(text)}
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="Password"
+        value={password}
+        onChangeText={(text) => setPassword(text)}
+        secureTextEntry={true}
+      />
+      <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,
+  },
+});

emma-frontend/components/shared/sharedLogin.js

 import React from "react";
 import { StyleSheet, View, Text, Button } from "react-native";
 
-const SharedLogin = () => {
+export default function SharedLogin({ navigation }) {
   return (
     <View style={styles.container}>
       <View style={styles.buttonContainer}>
-        <Button title="Patient" onPress={() => console.log("Patient login")} />
+        <Button
+          title="I am here to get help"
+          onPress={() => console.log("Patient login")}
+        />
         <View style={styles.separator} />
         <Button
-          title="Practitioner"
+          title="I am here to help"
           onPress={() => console.log("Practitioner login")}
         />
       </View>
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -30,4 +33,3 @@ const styles = StyleSheet.create({
     width: 10,
   },
 });
-export default SharedLogin;

emma-frontend/components/shared/sharedRegistration.js

 import React from "react";
 import { StyleSheet, View, Text, Button } from "react-native";
 
-const SharedRegisterScreen = () => {
+export default function SharedRegisterScreen({ navigation }) {
   return (
     <View style={styles.container}>
       <View style={styles.buttonContainer}>
         <Button
           title="Patient Register"
-          onPress={() => console.log("Patient registration")}
+          onPress={() => {
+            console.log("Patient registration");
+            navigation.navigate("PatientRegOne");
+          }}
         />
         <View style={styles.separator} />
         <Button
@@ -17,7 +20,7 @@ const SharedRegisterScreen = () => {
       </View>
     </View>
   );
-};
+}
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -32,4 +35,3 @@ const styles = StyleSheet.create({
     width: 10,
   },
 });
-export default SharedRegisterScreen;