progress bars

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

 import React, { useState } from "react";
-import { View, Text, Button, StyleSheet, Alert, Clipboard } from "react-native";
+import {
+  View,
+  Text,
+  Button,
+  StyleSheet,
+  Alert,
+  Clipboard,
+  ActivityIndicator,
+} from "react-native";
 import RadioForm, {
   RadioButton,
   RadioButtonInput,
@@ -13,6 +21,7 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 export default function PatientRegEight({ navigation, route }) {
   const [educationLevel, setEducationLevel] = useState("");
   const [employedStatus, setEmployedStatus] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
   const educationLevelOptions = [
     { label: "Schooling", value: "Schooling" },
@@ -28,6 +37,8 @@ export default function PatientRegEight({ navigation, route }) {
   ];
 
   const handleSave = async () => {
+    setIsLoading(true);
+
     //encrypt the data
     const encryptedEmail = EncryptWithServerKey(route.params.email);
     const encryptedUsername = EncryptWithServerKey(route.params.username);
@@ -132,7 +143,7 @@ export default function PatientRegEight({ navigation, route }) {
             `\nSecret key : ` +
             decryptedStellarSecretKey +
             `\n Save the keys in a safe place`;
-
+          setIsLoading(false);
           //Show keys on the alert
           Alert.alert("Account keys", alertMessage, [
             {
@@ -156,17 +167,23 @@ export default function PatientRegEight({ navigation, route }) {
           //on close send to main UI
         } catch (errorWhenStoringInAsyncStorage) {
           console.log(errorWhenStoringInAsyncStorage);
+          setIsLoading(false);
         }
       } else {
         console.log(responseData);
       }
     } catch (errorWhenSendingRegObj) {
       console.error("Error : ", errorWhenSendingRegObj);
+      setIsLoading(false);
     }
   };
 
   return (
     <View style={styles.container}>
+      {isLoading ? (
+        <ActivityIndicator size="large" color="#560CCE" />
+      ) : (
+        <>
           <Text>Highest Education Level:</Text>
           <RadioForm animation={true}>
             {educationLevelOptions.map((option, index) => (
@@ -234,6 +251,8 @@ export default function PatientRegEight({ navigation, route }) {
           </RadioForm>
 
           <Button title="All Done" onPress={handleSave} />
+        </>
+      )}
     </View>
   );
 }

emma-frontend/components/practitionerscreens/registration.js

 import { useNavigation } from "@react-navigation/core";
-import { View, TextInput, Button, StyleSheet, Alert } from "react-native";
+import {
+  View,
+  TextInput,
+  Button,
+  StyleSheet,
+  Alert,
+  ActivityIndicator,
+} from "react-native";
 import React, { useState } from "react";
 import EncryptWithServerKey from "../../services/encryptByServerKey";
 import { LOCALBACKEND } from "../../env";
@@ -13,8 +20,11 @@ export default function PractitionerRegistration() {
   const [email, setEmail] = useState("");
   const [fullName, setFullName] = useState("");
   const [workspace, setWorkspace] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleNext = async () => {
+    setIsLoading(true);
+
     //encrypt the data
     const encryptedUsername = EncryptWithServerKey(username);
     const encryptedPassword = EncryptWithServerKey(password);
@@ -75,6 +85,7 @@ export default function PractitionerRegistration() {
           `\nSecret key : ` +
           decryptedStellarSecretKey +
           `\n Save the keys in a safe place`;
+        setIsLoading(false);
 
         Alert.alert("Account keys", alertMessage, [
           {
@@ -94,17 +105,23 @@ export default function PractitionerRegistration() {
           "Error when saving details in the async storage : ",
           errorWhenStoringInTheAsyncStorage
         );
+        setIsLoading(false);
       }
     } catch (errorWhenRegisteringPractitioner) {
       console.log(
         "Error when registering practitioner : ",
         errorWhenRegisteringPractitioner
       );
+      setIsLoading(false);
     }
   };
 
   return (
     <View style={styles.container}>
+      {isLoading ? (
+        <ActivityIndicator size="large" color="#560CCE" />
+      ) : (
+        <>
           <TextInput
             style={styles.input}
             placeholder="User name"
@@ -137,6 +154,8 @@ export default function PractitionerRegistration() {
             onChangeText={(text) => setEmail(text)}
           />
           <Button title="Register" onPress={handleNext} />
+        </>
+      )}
     </View>
   );
 }

emma-frontend/package.json

@@ -23,10 +23,10 @@
     "react-native-base64": "^0.2.1",
     "react-native-crypto-js": "^1.0.0",
     "react-native-datepicker": "^1.7.2",
-    "react-native-gesture-handler": "^2.10.0",
+    "react-native-gesture-handler": "~2.9.0",
     "react-native-render-html": "^6.3.4",
     "react-native-rsa-native": "^2.0.5",
-    "react-native-safe-area-context": "^4.5.3",
+    "react-native-safe-area-context": "4.5.0",
     "react-native-simple-radio-button": "^2.7.4",
     "react-native-toast-message": "^2.1.6",
     "react-native-webview": "11.26.0"