add splash screen

App.js

@@ -1,6 +1,5 @@
 import 'react-native-gesture-handler';
-import React from 'react';
-
+import React, {useEffect} from 'react';
 import {
   SafeArea,
   SafeAreaView,
@@ -18,11 +17,15 @@ import {
   LearnMoreLinks,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
-import { enableScreens } from 'react-native-screens';
-import HomeScreen from './components/HomeScreen'
-import BottomTab from './components/BottomTab'
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+import {enableScreens} from 'react-native-screens';
+import RNBootSplash from "react-native-bootsplash";
+import HomeScreen from './components/HomeScreen';
+import BottomTab from './components/BottomTab';
+import RegisterUserScreen from './components/RegisterUserScreen';
+import LoginUserScreen from './components/LoginUserScreen.js';
+
 const Section = ({children, title}): Node => {
   const isDarkMode = useColorScheme() === 'dark';
   return (
@@ -52,16 +55,34 @@ const Section = ({children, title}): Node => {
 const Stack = createStackNavigator();
 
 const App = () => {
-
-enableScreens();
+  enableScreens();
+  useEffect(() => {
+  },[]);
   return (
-     <NavigationContainer>
+    <NavigationContainer onReady={() => RNBootSplash.hide()}>
       <Stack.Navigator initialRouteName="BottomTab">
-			  <Stack.Screen name="BottomTab" component={BottomTab} options={{headerShown: false}} />
-			  <Stack.Screen name="Test" component={HomeScreen} options={{headerShown: false}}/>
+        <Stack.Screen
+          name="BottomTab"
+          component={BottomTab}
+          options={{headerShown: false}}
+        />
+        <Stack.Screen
+          name="Test"
+          component={HomeScreen}
+          options={{headerShown: false}}
+        />
+        <Stack.Screen
+          name="LoginUserScreen"
+          component={LoginUserScreen}
+          options={{headerShown: false}}
+        />
+        <Stack.Screen
+          name="RegisterUserScreen"
+          component={RegisterUserScreen}
+          options={{headerShown: false}}
+        />
       </Stack.Navigator>
     </NavigationContainer>
-
   );
 };
 

README.md

@@ -1 +1,5 @@
 # locaft_mobile
+
+## Steps to run the application in react native
+
+

android/app/build.gradle

@@ -199,6 +199,7 @@ dependencies {
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+implementation "androidx.core:core-splashscreen:1.0.0-beta01"
 
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
       exclude group:'com.facebook.fbjni'
@@ -220,6 +221,7 @@ dependencies {
     } else {
         implementation jscFlavor
     }
+
 }
 
 // Run this once to be able to run the application with BUCK

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,9 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.locaft_mobile">
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-feature android:name="android.hardware.location.gps"/>
 
     <application
       android:name=".MainApplication"
@@ -9,7 +12,7 @@
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:usesCleartextTraffic="true"
-      android:theme="@style/AppTheme">
+      android:theme="@style/BootTheme">
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

android/app/src/main/java/com/locaft_mobile/MainActivity.java

@@ -1,6 +1,9 @@
 package com.locaft_mobile;
 
 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import com.zoontek.rnbootsplash.RNBootSplash;
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +15,33 @@ public class MainActivity extends ReactActivity {
   protected String getMainComponentName() {
     return "locaft_mobile";
   }
+
+  /**
+   * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and
+   * you can specify the rendered you wish to use (Fabric or the older renderer).
+   */
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new MainActivityDelegate(this, getMainComponentName());
+  }
+
+  public static class MainActivityDelegate extends ReactActivityDelegate {
+    public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
+      super(activity, mainComponentName);
+    }
+
+    @Override
+    protected ReactRootView createRootView() {
+      ReactRootView reactRootView = new ReactRootView(getContext());
+      // If you opted-in for the New Architecture, we enable the Fabric Renderer.
+      //reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
+      return reactRootView;
+    }
+
+ @Override
+    protected void loadApp(String appKey) {
+      RNBootSplash.init(getPlainActivity()); // <- initialize the splash screen
+      super.loadApp(appKey);
+    }
+  }
 }

android/app/src/main/java/com/locaft_mobile/MainApplication.java

@@ -4,6 +4,8 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import dev.mcodex.RNSensitiveInfo.RNSensitiveInfoPackage;
+import com.emeraldsanto.encryptedstorage.RNEncryptedStoragePackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,3 @@
+<resources>
+    <color name="bootsplash_background">#FFFFFF</color>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -6,4 +6,11 @@
         <item name="android:textColor">#000000</item>
     </style>
 
+<!-- BootTheme should inherit from Theme.SplashScreen -->
+  <style name="BootTheme" parent="Theme.SplashScreen">
+    <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
+    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
+    <item name="postSplashScreenTheme">@style/AppTheme</item>
+  </style>
+
 </resources>

android/build.gradle

@@ -1,18 +1,19 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 buildscript {
     ext {
-        buildToolsVersion = "29.0.3"
-        minSdkVersion = 21
-        compileSdkVersion = 29
-        targetSdkVersion = 29
+        buildToolsVersion = "31.0.0"
+        minSdkVersion = 23
+        compileSdkVersion = 31
+        targetSdkVersion = 31
         ndkVersion = "20.1.5948944"
+
     }
     repositories {
         google()
         jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:4.1.0")
+        classpath('com.android.tools.build:gradle:4.1.0')
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }
@@ -33,5 +34,6 @@ allprojects {
         google()
         jcenter()
         maven { url 'https://www.jitpack.io' }
+      
     }
 }

android/gradlew

@@ -1,7 +1,7 @@
-#!/usr/bin/env sh
+#!/bin/sh
 
 #
-# Copyright 2015 the original author or authors.
+# Copyright © 2015-2021 the original authors.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -17,67 +17,101 @@
 #
 
 ##############################################################################
-##
-##  Gradle start up script for UN*X
-##
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
 ##############################################################################
 
 # Attempt to set APP_HOME
+
 # Resolve links: $0 may be a link
-PRG="$0"
-# Need this for relative symlinks.
-while [ -h "$PRG" ] ; do
-    ls=`ls -ld "$PRG"`
-    link=`expr "$ls" : '.*-> \(.*\)$'`
-    if expr "$link" : '/.*' > /dev/null; then
-        PRG="$link"
-    else
-        PRG=`dirname "$PRG"`"/$link"
-    fi
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
 done
-SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >/dev/null
-APP_HOME="`pwd -P`"
-cd "$SAVED" >/dev/null
+
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
 
 APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
+APP_BASE_NAME=${0##*/}
 
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD="maximum"
+MAX_FD=maximum
 
 warn () {
     echo "$*"
-}
+} >&2
 
 die () {
     echo
     echo "$*"
     echo
     exit 1
-}
+} >&2
 
 # OS specific support (must be 'true' or 'false').
 cygwin=false
 msys=false
 darwin=false
 nonstop=false
-case "`uname`" in
-  CYGWIN* )
-    cygwin=true
-    ;;
-  Darwin* )
-    darwin=true
-    ;;
-  MINGW* )
-    msys=true
-    ;;
-  NONSTOP* )
-    nonstop=true
-    ;;
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
 esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
@@ -87,9 +121,9 @@ CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
         # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD="$JAVA_HOME/jre/sh/java"
+        JAVACMD=$JAVA_HOME/jre/sh/java
     else
-        JAVACMD="$JAVA_HOME/bin/java"
+        JAVACMD=$JAVA_HOME/bin/java
     fi
     if [ ! -x "$JAVACMD" ] ; then
         die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
@@ -98,7 +132,7 @@ Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
     fi
 else
-    JAVACMD="java"
+    JAVACMD=java
     which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
@@ -106,80 +140,95 @@ location of your Java installation."
 fi
 
 # Increase the maximum file descriptors if we can.
-if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
-    MAX_FD_LIMIT=`ulimit -H -n`
-    if [ $? -eq 0 ] ; then
-        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
-            MAX_FD="$MAX_FD_LIMIT"
-        fi
-        ulimit -n $MAX_FD
-        if [ $? -ne 0 ] ; then
-            warn "Could not set maximum file descriptor limit: $MAX_FD"
-        fi
-    else
-        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
-    fi
-fi
-
-# For Darwin, add options to specify how the application appears in the dock
-if $darwin; then
-    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
-fi
-
-# For Cygwin or MSYS, switch paths to Windows format before running java
-if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
-    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
-    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
-
-    JAVACMD=`cygpath --unix "$JAVACMD"`
-
-    # We build the pattern for arguments to be converted via cygpath
-    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
-    SEP=""
-    for dir in $ROOTDIRSRAW ; do
-        ROOTDIRS="$ROOTDIRS$SEP$dir"
-        SEP="|"
-    done
-    OURCYGPATTERN="(^($ROOTDIRS))"
-    # Add a user-defined pattern to the cygpath arguments
-    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
-        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
-    fi
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    i=0
-    for arg in "$@" ; do
-        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
-        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
-
-        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
-            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
-        else
-            eval `echo args$i`="\"$arg\""
-        fi
-        i=`expr $i + 1`
-    done
-    case $i in
-        0) set -- ;;
-        1) set -- "$args0" ;;
-        2) set -- "$args0" "$args1" ;;
-        3) set -- "$args0" "$args1" "$args2" ;;
-        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
 fi
 
-# Escape application args
-save () {
-    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
-    echo " "
-}
-APP_ARGS=`save "$@"`
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
 
-# Collect all arguments for the java command, following the shell quoting and substitution rules
-eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+# Collect all arguments for the java command;
+#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
+#     shell script including quotes and variable substitutions, so put them in
+#     double quotes to make sure that they get re-expanded; and
+#   * put everything else in single quotes, so that it's not re-expanded.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
 
 exec "$JAVACMD" "$@"

android/settings.gradle

@@ -1,3 +1,9 @@
 rootProject.name = 'locaft_mobile'
+include ':react-native-splash-screen'
+project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
+include ':react-native-sensitive-info'
+project(':react-native-sensitive-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sensitive-info/android')
+include ':react-native-encrypted-storage'
+project(':react-native-encrypted-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-encrypted-storage/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'

components/BottomTab.js

@@ -3,6 +3,8 @@ import {StatusBar, StyleSheet, Text, useColorScheme, View} from 'react-native';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import HomeScreen from './HomeScreen';
 import RegisterUserScreen from './RegisterUserScreen';
+import LoginUserScreen from './LoginUserScreen';
+import DropDown from './DropDown';
 import {Icon} from 'react-native-elements';
 
 const Tab = createBottomTabNavigator();
@@ -12,6 +14,8 @@ function BottomTab() {
     <Tab.Navigator
       screenOptions={{
 	title: '',
+ gestureEnabled: true,
+            animationEnabled: false,
         tabBarShowLabel: false,
         tabBarStyle: [
           {
@@ -44,7 +48,7 @@ function BottomTab() {
       />
       <Tab.Screen
         name="s"
-        component={HomeScreen}
+        component={LoginUserScreen}
         options={{
           tabBarIcon: ({focused}) => (
             <Icon
@@ -59,7 +63,7 @@ function BottomTab() {
       />
       <Tab.Screen
         name="r"
-        component={HomeScreen}
+        component={RegisterUserScreen}
         options={{
           tabBarIcon: ({focused}) => (
             <Icon name="sliders" type="feather" size={36} color="#206ba5" />
@@ -85,4 +89,8 @@ function BottomTab() {
     </Tab.Navigator>
   );
 }
+
 export default BottomTab;
+
+
+

components/DropDown.js

@@ -0,0 +1,68 @@
+import React, {useState, useEffect} from 'react';
+import {
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+  TouchableHighlight,
+  TextInput,
+  ScrollView,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+import {Icon} from 'react-native-elements';
+
+const WIDTH = Dimensions.get('window').width;
+const HEIGHT = Dimensions.get('window').height;
+const DropDown = props => {
+  const [isModalVisible, setisModalVisible] = useState(false);
+
+  const onPressItem = option => {
+    props.changeModalVisibility(false);
+    props.setData(option);
+  };
+
+  const option = props.options.map((item, index) => {
+    return (
+      <TouchableOpacity
+        style={styles.option}
+        key={index}
+        onPress={() => onPressItem(item)}>
+        <Text style={styles.text}>{item}</Text>
+      </TouchableOpacity>
+    );;
+  });;
+  return (
+    <TouchableOpacity
+      onPress={() => props.changeVisibility(false)}
+      styles={styles.container}>
+      <View style={[styles.modal, {width: WIDTH - 20, height: HEIGHT / 3}]}>
+        <ScrollView>{option}</ScrollView>
+      </View>
+    </TouchableOpacity>
+
+	);
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modal: {
+    alignSelf: 'center',
+    backgroundColor: 'red',
+    borderRadius: 10,
+  },
+  option: {
+    alignItems: 'flex-start',
+  },
+  text: {
+    margin: 20,
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});
+
+export default DropDown;

components/HomeScreen.js

@@ -1,34 +1,46 @@
-import React from 'react';
-import {
-	StatusBar,
-	StyleSheet,
-	Text,
-	useColorScheme,
-	View,
-} from 'react-native';
-import { Icon } from 'react-native-elements';
+import React, {useState} from 'react';
+import * as Keychain from 'react-native-keychain';
+import {StatusBar, StyleSheet, Text, useColorScheme, View} from 'react-native';
+import {Icon} from 'react-native-elements';
 
 const HomeScreen = () => {
-	return (
+  const [token, setToken] = useState('');
 
+  return (
     <>
       <StatusBar backgroundColor="#fffff2" barStyle="dark-content" />
-		<View
-		style={styles.viewRoot}>
+      <View style={styles.viewRoot}>
         <Text style={styles.heading}>Rental</Text>
-		<View style={{ flexDirection: "row", marginTop: "30%", marginLeft: "15%"}}>
-		<Icon name='home-outline' style={styles.icon} type='ionicon' size={46} color='#206ba5' ></Icon>
-		<Text style={{color: "#206ba5", fontSize: 25, marginLeft: "-10%"}}>Home</Text>
+        <View
+          style={{flexDirection: 'row', marginTop: '30%', marginLeft: '15%'}}>
+          <Icon
+            name="home-outline"
+            style={styles.icon}
+            type="ionicon"
+            size={46}
+            color="#206ba5"
+          />
+          <Text style={{color: '#206ba5', fontSize: 25, marginLeft: '-10%'}}>
+            Home
+          </Text>
         </View>
-		<View style={{ flexDirection: "row", marginTop: "30%", marginLeft: "15%"}}>
-		<Icon name='key' type='feather' style={styles.icon} size={46} color='#206ba5'></Icon>
-		<Text style={{color: "#206ba5", fontSize: 25, marginLeft: "-10%"}}>Key</Text>
+        <View
+          style={{flexDirection: 'row', marginTop: '30%', marginLeft: '15%'}}>
+          <Icon
+            name="key"
+            type="feather"
+            style={styles.icon}
+            size={46}
+            color="#206ba5"
+          />
+          <Text style={{color: '#206ba5', fontSize: 25, marginLeft: '-10%'}}>
+            Key
+          </Text>
         </View>
       </View>
-
     </>
   );
-}
+};
 
 const styles = StyleSheet.create({
   viewRoot: {
@@ -43,8 +55,7 @@ const styles = StyleSheet.create({
     fontFamily: 'Ubuntu-Bold',
   },
   icon: {
-
-		alignSelf: "flex-start",
+    alignSelf: 'flex-start',
     marginLeft: '28%',
     flexDirection: 'row',
   },

components/LoginUserScreen.js

@@ -0,0 +1,222 @@
+import React, {useState, useEffect} from 'react';
+import RNSInfo from 'react-native-sensitive-info';
+import SInfo from 'react-native-sensitive-info';
+import {
+  StatusBar,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+  TouchableHighlight,
+  TextInput,
+  ScrollView,
+} from 'react-native';
+import {Icon} from 'react-native-elements';
+
+const LoginUserScreen = ({navigation}) => {
+  const [username, setUsername] = useState('');
+  const [orgname, setOrgname] = useState('');
+  const [password, setPassword] = useState('');
+  const [token, setToken] = useState('');
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+  var [isPress, setIsPress] = useState(false);
+
+  useEffect(() => {
+    setError('');
+  }, []);
+
+  const setKey = async (key, value) => {
+    return SInfo.setItem(key, value, {
+      sharedPreferencesName: 'mySharedPrefs',
+      keychainService: 'myKeychain',
+    });
+  };
+  const getKey = async key => {
+    return RNSInfo.getItem(key, {
+      sharedPreferencesName: 'mySharedPrefs',
+      keychainService: 'myKeychain',
+    });
+  };
+
+  const register = async () => {
+    var data = {
+      username: username,
+      orgName: orgname,
+    };
+    await fetch('http://192.168.29.141:4000/users', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+      .then(function (response) {
+        //console.log("response ", response);
+        //const cred = await Keychain.setGenericPassword(JSON.stringify(response));
+        return response.json();
+      })
+      .then(async function (response_data) {
+        console.log('\n data ', response_data);
+        console.log(
+          '\n data success',
+          response_data.success + typeof response_data.success,
+        );
+        if (response_data.success) {
+          await setKey('token', response_data.token);
+          setToken(response_data.token);
+          setMessage(response_data.message);
+        }
+        var key_token = await getKey('token');
+        console.log('retrived key_token ' + key_token);
+      })
+      .catch(error => {
+        setError(error);
+        console.log('error ' + error);
+      });
+  };
+
+  var touchProps = {
+    activeOpacity: 1,
+    underlayColor: 'white',
+    style: isPress ? styles.btnPress : styles.btnNormal,
+    onHideUnderlay: () => setIsPress(false),
+    onShowUnderlay: () => setIsPress(true),
+    onPress: register,
+  };
+
+  var textInputProps = {
+    style: styles.input,
+    placeholderTextColor: '#4b4a4a',
+  };
+  var inputHeadingProps = {
+    style: styles.inputHeading,
+  };
+  return (
+    <>
+      <StatusBar backgroundColor="#ffffff" barStyle="dark-content" />
+      <View style={styles.viewRoot}>
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            marginTop: '-40%',
+          }}>
+          <TouchableHighlight
+            onPress={() => navigation.goBack()}
+            style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
+            <Icon name="arrow-back" type="ionicon" size={36} color="#206ba5" />
+          </TouchableHighlight>
+        </View>
+        <Text style={styles.heading}>Login</Text>
+        <View style={{alignItems: 'center'}}>
+          <View style={{flexDirection: 'column', marginTop: '10%'}}>
+            <Text {...inputHeadingProps}>Username </Text>
+            <TextInput
+              {...textInputProps}
+              keyboardDismissMode="none"
+              defaultValue={username}
+              placeholder="Name of the user"
+              onChangeText={setUsername}
+            />
+          </View>
+          <View style={{flexDirection: 'column', marginTop: '10%'}}>
+            <Text {...inputHeadingProps}>Password</Text>
+            <TextInput
+              {...textInputProps}
+              value={orgname}
+              placeholder="Name of the organization"
+              onChangeText={setOrgname}
+            />
+          </View>
+
+          <View
+            style={{
+              flexDirection: 'row',
+              marginTop: '10%',
+              justifyContent: 'center',
+            }}>
+            <TouchableHighlight {...touchProps}>
+              <Text style={styles.btnText}>Submit</Text>
+            </TouchableHighlight>
+          </View>
+
+          {message ? (
+            <Text style={{color: '#206ba5', fontSize: 25}}>{message}</Text>
+          ) : (
+            <Text style={{color: 'red', fontSize: 25}}>
+              {error.message}
+            </Text>
+          )}
+	<View>
+            <Text style={{color: '#206ba5', fontSize: 15, textAlign:'left'}}
+		onPress={() => navigation.navigate('RegisterUserScreen')}>
+        	Not a member yet?
+            </Text>
+	</View>
+        </View>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  viewRoot: {
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+    height: '100%',
+  },
+  heading: {
+    color: '#1C254E',
+    fontSize: 60,
+    textAlign: 'center',
+    fontFamily: 'Ubuntu-Bold',
+  },
+	
+  icon: {
+    alignSelf: 'flex-start',
+    marginLeft: '28%',
+    flexDirection: 'row',
+  },
+  btnNormal: {
+    borderRadius: 10,
+    height: 45,
+    width: 140,
+    backgroundColor: '#1C254E',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  btnText: {
+    textAlign: 'center',
+    fontSize: 22,
+    color: 'white',
+  },
+  btnPress: {
+    borderRadius: 10,
+    height: 45,
+    width: 140,
+    backgroundColor: '#1C254E',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 60,
+    width: 280,
+    margin: 12,
+    borderRadius: 15,
+    padding: 10,
+    color: 'black',
+    backgroundColor: '#c4c4c4',
+  },
+  inputHeading: {
+    fontSize: 25,
+    margin: 12,
+    justifyContent: 'center',
+    fontFamily: 'Ubuntu-Bold',
+    color: '#1C254E',
+  },
+});
+
+
+export default LoginUserScreen;

components/RegisterUserScreen.js

@@ -1,4 +1,7 @@
-import React, {useState } from 'react';
+import React, {useState, useEffect} from 'react';
+import RNSInfo from 'react-native-sensitive-info';
+import SInfo from 'react-native-sensitive-info';
+import DropDown from './DropDown';
 import {
   StatusBar,
   StyleSheet,
@@ -6,97 +9,191 @@ import {
   useColorScheme,
   View,
   TouchableHighlight,
-	TextInput
+  TextInput,
+  ScrollView,
+  Modal,
+  TouchableOpacity,
 } from 'react-native';
-import { Icon } from 'react-native-elements';
+import {Icon} from 'react-native-elements';
 
+const RegisterUserScreen = ({navigation}) => {
+  const [username, setUsername] = useState('');
+  const [orgname, setOrgname] = useState('');
+  const [password, setPassword] = useState('');
+  const [token, setToken] = useState('');
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+  var [isPress, setIsPress] = useState(false);
+  const [selectedOrg, setSelectedOrg] = useState('select organization...');
+  const [isModalVisible, setisModalVisible] = useState(false);
+  const changeModalVisibility = bool => setisModalVisible(bool);
+  const setData = option => setSelectedOrg(option);
+const options = ['org1','org2','org3'];
+  useEffect(() => {
+    setError('');
+  }, []);
 
-const RegisterUserScreen = () => {
+  const setKey = async (key, value) => {
+    return SInfo.setItem(key, value, {
+      sharedPreferencesName: 'mySharedPrefs',
+      keychainService: 'myKeychain',
+    });
+  };
+  const getKey = async key => {
+    return RNSInfo.getItem(key, {
+      sharedPreferencesName: 'mySharedPrefs',
+      keychainService: 'myKeychain',
+    });
+  };
 
-	const [username, setUsername] = useState("")
-	const [orgname, setOrgname] = useState("")
-	const [token, setToken] = useState("none")
-	 var [ isPress, setIsPress ] = useState(false);
-
-	const register = () => {
+  const register = async () => {
     var data = {
-	   "username": username,
-	   "orgName":  orgname
-	}
-	fetch("http://192.168.29.141:4000/users", {
-		method: "POST",
+      username: username,
+      orgName: orgname,
+    };
+    await fetch('http://192.168.29.141:4000/users', {
+      method: 'POST',
       headers: {
-    'Accept': 'application/json',
+        Accept: 'application/json',
         'Content-Type': 'application/json',
       },
-		body: JSON.stringify(data)
+      body: JSON.stringify(data),
     })
       .then(function (response) {
+        //console.log("response ", response);
+        //const cred = await Keychain.setGenericPassword(JSON.stringify(response));
         return response.json();
       })
-	.then(function (data) {
-		console.log(data)
-		setToken(data)
+      .then(async function (response_data) {
+        console.log('\n data ', response_data);
+        console.log(
+          '\n data success',
+          response_data.success + typeof response_data.success,
+        );
+        if (response_data.success) {
+          await setKey('token', response_data.token);
+          setToken(response_data.token);
+          setMessage(response_data.message);
+        }
+        var key_token = await getKey('token');
+        console.log('retrived key_token ' + key_token);
+      })
+      .catch(error => {
+        setError(error);
+        console.log('error ' + error);
       });
-
-}
+  };
 
   var touchProps = {
-
     activeOpacity: 1,
     underlayColor: 'white',
     style: isPress ? styles.btnPress : styles.btnNormal,
     onHideUnderlay: () => setIsPress(false),
     onShowUnderlay: () => setIsPress(true),
     onPress: register,
-  	}
+  };
 
   var textInputProps = {
-        style:styles.input,
-	onChangeText:setUsername,
-        value:username,
-	placeholderTextColor : "#4b4a4a",
-
-	}
+    style: styles.input,
+    placeholderTextColor: '#4b4a4a',
+  };
   var inputHeadingProps = {
-		style: styles.inputHeading
-
-	}
+    style: styles.inputHeading,
+  };
   return (
-
     <>
-		<StatusBar backgroundColor="#fffff2" barStyle="dark-content" />
+      <StatusBar backgroundColor="#ffffff" barStyle="dark-content" />
+      <View style={styles.viewRoot}>
         <View
-		style={styles.viewRoot}>
-		<Text style={styles.heading}>Log In</Text>
-		<View style={{ flexDirection: "column", marginTop: "10%"}}>
-		<Text {...inputHeadingProps}>Username </Text>
-		<TextInput {...textInputProps} placeholder="Name of the user"/>
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            marginTop: '-40%',
+          }}>
+          <TouchableHighlight
+            onPress={() => navigation.goBack()}
+            style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
+            <Icon name="arrow-back" type="ionicon" size={36} color="#206ba5" />
+          </TouchableHighlight>
         </View>
-		<View style={{ flexDirection: "column", marginTop: "10%"}}>
+        <Text style={styles.heading}>Register</Text>
+        <View style={{alignItems: 'center'}}>
+          <View style={{flexDirection: 'column', marginTop: '5%'}}>
+            <Text {...inputHeadingProps}>Username </Text>
+            <TextInput
+              {...textInputProps}
+              keyboardDismissMode="none"
+              defaultValue={username}
+              placeholder="Name of the user"
+              onChangeText={setUsername}
+            />
+          </View>
+          <View style={{flexDirection: 'column', marginTop: '5%'}}>
+            <TouchableOpacity
+              onPress={() => changeModalVisibility(true)}
+              style={styles.touchableopacity}>
+              <Text style={styles.dropdownText}>{selectedOrg}</Text>
+            </TouchableOpacity>
+            <Modal
+              transparent={true}
+              animationType="fade"
+              visible={isModalVisible}
+              nRequestClose={() => changeModalVisibility(false)}>
+              <DropDown
+                changeModalVisibility={changeModalVisibility}
+                setData={setSelectedOrg}
+		options={options}
+              />
+            </Modal>
+          </View>
+          <View style={{flexDirection: 'column', marginTop: '5%'}}>
             <Text {...inputHeadingProps}>Password</Text>
-		<TextInput {...textInputProps} placeholder="Name of the organization" />
+            <TextInput
+              {...textInputProps}
+              value={orgname}
+              placeholder="Your password"
+              onChangeText={setOrgname}
+            />
           </View>
 
-		<View style={{ flexDirection: "row", marginTop: "10%", justifyContent: "center"}}>
+          <View
+            style={{
+              flexDirection: 'row',
+              marginTop: '10%',
+              justifyContent: 'center',
+            }}>
             <TouchableHighlight {...touchProps}>
               <Text style={styles.btnText}>Submit</Text>
             </TouchableHighlight>
           </View>
 
-		<Text style={{color: "#206ba5", fontSize: 25 }}>{token.message}</Text>
+          {message ? (
+            <Text style={{color: '#206ba5', fontSize: 25}}>{message}</Text>
+          ) : (
+            <Text style={{color: '#206ba5', fontSize: 25}}>
+              {error.message}
+            </Text>
+          )}
+          <View>
+            <Text
+              style={{color: '#206ba5', fontSize: 15, textAlign: 'left'}}
+              onPress={() => navigation.navigate('LoginUserScreen')}>
+              Already a member?
+            </Text>
+          </View>
+        </View>
       </View>
-
     </>
   );
-}
+};
 
 const styles = StyleSheet.create({
   viewRoot: {
     backgroundColor: '#ffffff',
-		height: '100%',
     justifyContent: 'center',
-		alignItems: 'center'
+    height: '100%',
+    flex: 1,
   },
   heading: {
     color: '#1C254E',
@@ -105,8 +202,7 @@ const styles = StyleSheet.create({
     fontFamily: 'Ubuntu-Bold',
   },
   icon: {
-
-		alignSelf: "flex-start",
+    alignSelf: 'flex-start',
     marginLeft: '28%',
     flexDirection: 'row',
   },
@@ -121,7 +217,7 @@ const styles = StyleSheet.create({
   btnText: {
     textAlign: 'center',
     fontSize: 22,
-    		color:'white',
+    color: 'white',
   },
   btnPress: {
     borderRadius: 10,
@@ -136,16 +232,21 @@ const styles = StyleSheet.create({
     margin: 12,
     borderRadius: 15,
     padding: 10,
-    color: "black",
-    backgroundColor: "#c4c4c4",
+    color: 'black',
+    backgroundColor: '#c4c4c4',
   },
-inputHeading: {
+  inputHeading: {
     fontSize: 25,
     margin: 12,
     justifyContent: 'center',
     fontFamily: 'Ubuntu-Bold',
     color: '#1C254E',
   },
+  dropdownText: {
+    margin: 20,
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
 });
 
 export default RegisterUserScreen;

ios/Podfile

@@ -12,6 +12,12 @@ target 'locaft_mobile' do
     :hermes_enabled => false
   )
 
+  pod 'react-native-encrypted-storage', :path => '../node_modules/react-native-encrypted-storage'
+
+  pod 'react-native-sensitive-info', :path => '../node_modules/react-native-sensitive-info'
+
+  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
+
   target 'locaft_mobileTests' do
     inherit! :complete
     # Pods for testing

ios/locaft_mobile/BootSplash.storyboard

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17147" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17120"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" autoresizesSubviews="NO" userInteractionEnabled="NO" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask"/>
+                        <subviews>
+                            <imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashLogo" translatesAutoresizingMaskIntoConstraints="NO" id="3lX-Ut-9ad">
+                                <rect key="frame" x="87.5" y="304" width="200" height="59"/>
+                                <accessibility key="accessibilityConfiguration">
+                                    <accessibilityTraits key="traits" image="YES" notEnabled="YES"/>
+                                </accessibility>
+                            </imageView>
+                        </subviews>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                        <color key="backgroundColor" red="1.00000000000000" green="1.00000000000000" blue="1.00000000000000" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <accessibility key="accessibilityConfiguration">
+                            <accessibilityTraits key="traits" notEnabled="YES"/>
+                        </accessibility>
+                        <constraints>
+                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="Fh9-Fy-1nT"/>
+                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="nvB-Ic-PnI"/>
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="0.0" y="0.0"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="BootSplashLogo" width="200" height="59"/>
+    </resources>
+</document>

ios/locaft_mobile/Images.xcassets/BootSplashLogo.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_logo.png",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_logo@2x.png",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_logo@3x.png",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "xcode"
+  }
+}

package.json

@@ -11,24 +11,27 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.11",
+    "@react-native-picker/picker": "^2.4.1",
     "@react-navigation/bottom-tabs": "^6.2.0",
     "@react-navigation/native": "^5.9.4",
     "@react-navigation/stack": "^5.14.5",
-    "appcenter": "4.1.0",
-    "appcenter-analytics": "4.1.0",
-    "appcenter-crashes": "4.1.0",
+    "@rnmapbox/maps": "rnmapbox/maps#main",
     "react": "17.0.1",
     "react-native": "0.64.1",
+    "react-native-bootsplash": "^4.1.5",
     "react-native-elements": "^3.4.1",
+    "react-native-encrypted-storage": "^4.0.2",
     "react-native-gesture-handler": "^1.10.3",
+    "react-native-keychain": "^8.0.0",
     "react-native-reanimated": "^2.2.0",
     "react-native-safe-area-context": "^3.2.0",
-    "react-native-screens": "^3.3.0",
+    "react-native-screens": "^3.13.1",
+    "react-native-sensitive-info": "^6.0.0-alpha.9",
     "react-native-vector-icons": "^8.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5",
+    "@babel/core": "^7.17.9",
+    "@babel/runtime": "^7.17.9",
     "@react-native-community/eslint-config": "^2.0.0",
     "babel-jest": "^26.6.3",
     "eslint": "7.14.0",