React Native

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components.

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

React Native currently supports both iOS and Android, and has the potential to expand to future platforms as well. In this book, we’ll cover both iOS and Android. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some anecdota: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.

Front-End and User Application (CareBud App)

CareBud is Front-end hybrid (IOS,Android) mobile application designed to manage all user’s data using some methodologies and performs all required processes in the client side such as (Encryption, Decryption, Key management, Access Control, Users Account Management and Sending, and Receiving data from Could Backend). This application has coded using React Native which is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

The above figure shows the communication between the mobile app and the cloud backend and was discussed it in the previous sections. The following flowchart shows all the modules and processes preformed in CareBud mobile application, which will give good understanding about the main functionality and the app screens and that will be explained in more details later.

When user start the application he/she will be directed to the following steps as shown in the flowchart below:

The user will start to signUp, and depending on the user type he will be navigated to the next screen.
Assuming that user chose patient type, he will be directed to the patient registration screen.
Next screen after patient registration it will be general health reports, where he can fill some data about his current health issues.
After submitting that form, new screen will show up for connecting to the virtual smart watch, which will scan patient health and prepare the report to be encrypted and posted to the cloud backend.
The patient will be navigated to his dashboard where he can see the reports and perform other actions.
Form patient dashboard, patient can add new doctor and his list for this process it can open new screen for adding new doctor and select specific doctor.
Also, he will be able to add new relative same way as the previous step.
A patient can open his health report and see more details on each, from that screen he also can open chat channel with his doctor.

If the user type doctor then he will be redirected to doctor home screen, which contain list of patients, that’s allowed him to open a patient details and see his health information along with other details like chatting and location. Also, doctor can see and write new comments on patient health status, like diagnosis and advises.

Relative same as doctor process but they can only see patient details and receive notification about particular patient. The flow chart figure 28 below describes all the processes in the application related to each user type.

Splash Screens

Splash screen is the initial screen for the mobile application and when starting the splash, we start to initial all the needed requirements, also start to load data and initializing objects on start up.

Initially, the CareBud will call the location geolocation Api to get a use current location getCurrentPosition as an object contains location Longitude and Latitude, which will help users for navigate to others locations in the application.

navigator.geolocation.getCurrentPosition(
    (position) => {
        console.log('LOCATIONSSSS', position);
        global.userLocation = position.coords;
    },
    (error) => this.setState({error: error.message}),
    {
        enableHighAccuracy: true, timeout: 20000,
        maximumAge: 1000, distanceFilter: 50, useSignificantChanges: true
    },
);

// react native geolocation Api

Then, we are checking if the user already signedIn and his data previously stored in the app local storage using the following handler:

_getExistingUserDetails() {
    try {
        return new Promise((resolve, reject) => {
            let userList = [];
            AsyncStorage.getItem('users').then((users) => {
                userList = JSON.parse(users);
                if (userList !== null) {
                    for (let singleUser of userList) {
                        if (singleUser.data.userName || singleUser.data.user.password  !== 'undefined') {
                            global.userData = singleUser;
                            return resolve(singleUser)
                        }
                    }
                } else {
                    console.log('User First Time SignIn');
                    return reject(HandlerMessages.LoginScreen);
                }

            }).catch((error) => {
                console.log(error);
                return reject(HandlerMessages.LoginScreen);
            })
        })
    } catch (error) {
        bugsnag.notify(error);
        Crashlytics.logException('getExistingUserDetails Flag ' + error );
        console.log("Error in:", error);
    }
}
// react native

Thereafter, if the user have already a record stored in system using that details we can call another Apis and handlers such as **getPatientDetailsWithHealthReport**

getPatientDetailsWithHealthReport(PatientUserID) {
    try {
        return fetch(global.API_Adress + '/api/patient/userId/'+ PatientUserID, {
            method: 'Get',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            }
        })
            .then((response) => response.json())
            .then((responseJson) => {
              if(responseJson.statusMessage ==="Success")
              {
                  console.log("Encrypted Response", responseJson);
                  /* the response will come to the app totally in an encrypted format using the user
                   authentication details we are decrypting this response */
                  encryptedArray = responseJson.data.healthStatus;
                  global.encryptedHealthOnlyArray = encryptedArray;
                  responseJson.data.healthStatus = this.cryptoHandler._decryptingPatientHealthReports(responseJson.data.healthStatus);
                  /* here we are taking the response and decrypted using CareBud decryption handlers
                  and send it to other process */
                  return  responseJson;
              }else {
                  return "Fails";
              }
            })
            .catch((error) => {
                console.log('error', error);
                return error;
            });
    } catch (error) {
        bugsnag.notify(error);
        Crashlytics.logException('getPatientDetailsWithHealthReport Flag ' + error );
        console.log("Error in:", error);
    }
}

Eventually, all processes in the splash takes a place to preform and give the users the best performance and speed to navigate to the main screen. code for this screen available here.

When all data and required initializing processes in the splash screen finished provided that, it will navigate you to the SignIn screen, where user can enter his username and password only. If the user has already an account then it will get user details from the cloud and decrypt it then it will be navigated to user dashboard.

The user should provide user access to start encryption and decryption services in the app using some handlers.

this.signInHandler._signIn(userName, driverPassword)
                .then((callBack) => { 
                //do somthing here
                })
                .catch((error) => {
                    console.log("callBack", error)
                    bugsnag.notify(error);
                });
                
    //calling signIn handler from SignIn page

  //signInHandler =>
    _signIn = (userName, userPassword) => {
        let storageDataResponse = '';
        start = new Date().getTime();
        try {
            console.log("_signIn........");
            return fetch(global.API_Adress + '/api/user/user_login', {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    userName: userName,
                    password: userPassword,

                }),
            }).then((response) => response.json())
                .then((responseJson) => {
                    console.log("Response in encrypted fromat",  responseJson);
                     this.executionTime("signIn decrypt responseJson Start", start);
                     
                     if(JSON.stringify(responseJson.statusMessage) !== "Fails")
                   {//starting decryption process by calling the handler
                           if(decryptedPass === userPassword){
                            return jsonResponse;
                            }else {
                            return "User Authentication Field"
                            }
                    } else {
                        return responseJson;
                    }
                })
                .catch((error) => {
                    console.log(error);
                    bugsnag.notify(error);
                    return "Wrong UserName Or Password!";
                });
        } catch (error) {
            bugsnag.notify(error);
            console.log("Error in:", error);
        }

    };

If the user does not have yet an account then he will be navigated to the signUp Screen, in where he can enter all the required data, then after submitting from there all data enter by the user will be encrypted and posted to the cloud.

    this.signInHandler._userSignUp(userFirstName, userLastName, userBirthDate, userAge, userCATType_state, userGender_state,
                userAddress, user_Name, userPassword, userPhoneNumber, userEmailAddress, userLocationLang, userLocationLat, userPhotoLink)
                .then((callBack) => {
                    //do somthing here
                    /*call create usertype acccount
                    if patient call create patient acccount handler
                    or doctor call create doctor acccount handler
                    or Relative call create relivent acccount handler
                    */
                })
                .catch((error) => {
                 bugsnag.notify(error); // or fabric to catch error or crashes
                 console.log("callBack", error)
                });

When the user submit his data depending on the selected user type we are calling to create sub type account of that user like(Patient, Doctor or Relative), the following example shows how to call create patient account handler.

               if (callBack.statusMessage === 'Success' && callBack.data.userName !== null) {
                        this.signInHandler._creatingPatientAccount(callBack.data._id).then(
                            (getResponse)=>{
                                if(getResponse.statusMessage !== 'Fails')
                                {
                                    global.patientDetails = getResponse.data;
                                    this._userSignIn(user_Name, userPassword);
                                    //we call _userSignIn handler to navigate to other screens
                                }
                            });
                    } else {
                        if (callBack !== '' || callBack.statusMessage !== '') {
                            this.setState({indicatorIs: false});
                            this.setState({message: callBack.statusMessage});
                        }

                    }

General Health Report Screen

Next, let assume the user will select userType as Patient, then the user pressed submit button it will be directed to General Health Reports Screen where some questions about his/her current health status needed to be answered by the patient, otherwise it will be forwarded to another screen according to the user type.

General questions asked by doctors when they meet the patient to make a sample diagnosis