first upload base project

.bundle/config

+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

.eslintrc.js

+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+};

.gitignore

+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+ios/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+/ios/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*

.prettierrc.js

+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+};

.watchmanconfig

+{}
\ No newline at end of file

App.tsx

+import App from './app/App';
+
+export default App;
\ No newline at end of file

Gemfile

+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby '>= 2.6.10'
+
+gem 'cocoapods', '>= 1.11.3'

Gemfile.lock

+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.6)
+      rexml
+    activesupport (7.0.4.3)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+    addressable (2.8.4)
+      public_suffix (>= 2.0.2, < 6.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    claide (1.1.0)
+    cocoapods (1.12.1)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.12.1)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 1.6.0, < 2.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.21.0, < 2.0)
+    cocoapods-core (1.12.1)
+      activesupport (>= 5.0, < 8)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (1.6.3)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.2.2)
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.15.5)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.13.0)
+      concurrent-ruby (~> 1.0)
+    json (2.6.3)
+    minitest (5.18.0)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    public_suffix (4.0.7)
+    rexml (3.2.5)
+    ruby-macho (2.5.1)
+    typhoeus (1.4.0)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.22.0)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (~> 3.2.4)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  cocoapods (>= 1.11.3)
+
+RUBY VERSION
+   ruby 2.7.6p219
+
+BUNDLED WITH
+   2.1.4

__tests__/App-test.tsx

+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});

_node-version

+18

android/app/build.gradle

+apply plugin: "com.android.application"
+apply plugin: "com.facebook.react"
+apply plugin: "kotlin-android"
+apply plugin: "kotlin-android-extensions"
+
+import com.android.build.OutputFile
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    /* Folders */
+    //   The root of your project, i.e. where "package.json" lives. Default is '..'
+    // root = file("../")
+    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
+    // reactNativeDir = file("../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen
+    // codegenDir = file("../node_modules/react-native-codegen")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
+    // cliFile = file("../node_modules/react-native/cli.js")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+    //
+    //   The command to run when bundling. By default is 'bundle'
+    // bundleCommand = "ram-bundle"
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+}
+
+/**
+ * Set this to true to create four separate APKs instead of one,
+ * one for each native architecture. This is useful if you don't
+ * use App Bundles (https://developer.android.com/guide/app-bundle/)
+ * and want to have separate APKs to upload to the Play Store.
+ */
+def enableSeparateBuildPerCPUArchitecture = false
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+/**
+ * Private function to get the list of Native Architectures you want to build.
+ * This reads the value from reactNativeArchitectures in your gradle.properties
+ * file and works together with the --active-arch-only flag of react-native run-android.
+ */
+def reactNativeArchitectures() {
+    def value = project.getProperties().get("reactNativeArchitectures")
+    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    compileSdkVersion rootProject.ext.compileSdkVersion
+
+    namespace "com.orangehrmproject"
+    defaultConfig {
+        applicationId "com.orangehrmproject"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+         multiDexEnabled true
+    }
+
+    splits {
+        abi {
+            reset()
+            enable enableSeparateBuildPerCPUArchitecture
+            universalApk false  // If true, also generate a universal APK
+            include (*reactNativeArchitectures())
+        }
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+
+    // applicationVariants are e.g. debug, release
+    applicationVariants.all { variant ->
+        variant.outputs.each { output ->
+            // For each separate APK per architecture, set a unique version code as described here:
+            // https://developer.android.com/studio/build/configure-apk-splits.html
+            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
+            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
+            def abi = output.getFilter(OutputFile.ABI)
+            if (abi != null) {  // null for the universal-debug, universal-release variants
+                output.versionCodeOverride =
+                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
+            }
+
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
+
+    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
+    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
+        exclude group:'com.squareup.okhttp3', module:'okhttp'
+    }
+
+    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+    implementation project(':react-native-vector-icons')
+}
+
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

android/app/proguard-rules.pro

+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:

android/app/src/debug/AndroidManifest.xml

+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application
+        android:usesCleartextTraffic="true"
+        tools:targetApi="28"
+        tools:ignore="GoogleAppIndexingWarning">
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
+    </application>
+</manifest>

android/app/src/debug/java/com/orangehrmproject/ReactNativeFlipper.java

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
+ * directory of this source tree.
+ */
+package com.orangehrmproject;
+
+import android.content.Context;
+import com.facebook.flipper.android.AndroidFlipperClient;
+import com.facebook.flipper.android.utils.FlipperUtils;
+import com.facebook.flipper.core.FlipperClient;
+import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
+import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
+import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
+import com.facebook.flipper.plugins.inspector.DescriptorMapping;
+import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
+import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
+import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
+import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
+import com.facebook.react.ReactInstanceEventListener;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.modules.network.NetworkingModule;
+import okhttp3.OkHttpClient;
+
+/**
+ * Class responsible of loading Flipper inside your React Native application. This is the debug
+ * flavor of it. Here you can add your own plugins and customize the Flipper setup.
+ */
+public class ReactNativeFlipper {
+  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
+    if (FlipperUtils.shouldEnableFlipper(context)) {
+      final FlipperClient client = AndroidFlipperClient.getInstance(context);
+
+      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
+      client.addPlugin(new DatabasesFlipperPlugin(context));
+      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
+      client.addPlugin(CrashReporterPlugin.getInstance());
+
+      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
+      NetworkingModule.setCustomClientBuilder(
+          new NetworkingModule.CustomClientBuilder() {
+            @Override
+            public void apply(OkHttpClient.Builder builder) {
+              builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
+            }
+          });
+      client.addPlugin(networkFlipperPlugin);
+      client.start();
+
+      // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
+      // Hence we run if after all native modules have been initialized
+      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
+      if (reactContext == null) {
+        reactInstanceManager.addReactInstanceEventListener(
+            new ReactInstanceEventListener() {
+              @Override
+              public void onReactContextInitialized(ReactContext reactContext) {
+                reactInstanceManager.removeReactInstanceEventListener(this);
+                reactContext.runOnNativeModulesQueueThread(
+                    new Runnable() {
+                      @Override
+                      public void run() {
+                        client.addPlugin(new FrescoFlipperPlugin());
+                      }
+                    });
+              }
+            });
+      } else {
+        client.addPlugin(new FrescoFlipperPlugin());
+      }
+    }
+  }
+}

android/app/src/main/AndroidManifest.xml

+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication"
+      android:label="@string/app_name"
+      android:icon="@mipmap/ic_launcher"
+      android:roundIcon="@mipmap/ic_launcher_round"
+      android:allowBackup="false"
+      android:theme="@style/AppTheme">
+      <activity
+        android:name=".MainActivity"
+        android:label="@string/app_name"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+        android:launchMode="singleTask"
+        android:windowSoftInputMode="adjustResize"
+        android:exported="true">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity>
+    </application>
+</manifest>

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

+package com.orangehrmproject;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+public class MainActivity extends ReactActivity {
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  @Override
+  protected String getMainComponentName() {
+    return "OrangeHrmProject";
+  }
+
+  /**
+   * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link
+   * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React
+   * (aka React 18) with two boolean flags.
+   */
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new DefaultReactActivityDelegate(
+        this,
+        getMainComponentName(),
+        // If you opted-in for the New Architecture, we enable the Fabric Renderer.
+        DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled
+        // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18).
+        DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled
+        );
+  }
+}

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

+package com.orangehrmproject;
+
+import android.app.Application;
+import com.facebook.react.PackageList;
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactNativeHost;
+import com.facebook.soloader.SoLoader;
+import java.util.List;
+
+public class MainApplication extends Application implements ReactApplication {
+
+  private final ReactNativeHost mReactNativeHost =
+      new DefaultReactNativeHost(this) {
+        @Override
+        public boolean getUseDeveloperSupport() {
+          return BuildConfig.DEBUG;
+        }
+
+        @Override
+        protected List<ReactPackage> getPackages() {
+          @SuppressWarnings("UnnecessaryLocalVariable")
+          List<ReactPackage> packages = new PackageList(this).getPackages();
+          // Packages that cannot be autolinked yet can be added manually here, for example:
+          // packages.add(new MyReactNativePackage());
+          return packages;
+        }
+
+        @Override
+        protected String getJSMainModuleName() {
+          return "index";
+        }
+
+        @Override
+        protected boolean isNewArchEnabled() {
+          return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
+        }
+
+        @Override
+        protected Boolean isHermesEnabled() {
+          return BuildConfig.IS_HERMES_ENABLED;
+        }
+      };
+
+  @Override
+  public ReactNativeHost getReactNativeHost() {
+    return mReactNativeHost;
+  }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
+    SoLoader.init(this, /* native exopackage */ false);
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      // If you opted-in for the New Architecture, we load the native entry point for this app.
+      DefaultNewArchitectureEntryPoint.load();
+    }
+    ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+  }
+}

android/app/src/main/res/drawable/rn_edit_text_material.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
+
+    <selector>
+        <!-- 
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

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

+<resources>
+    <string name="app_name">OrangeHrmProject</string>
+</resources>

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

+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    </style>
+
+</resources>

android/app/src/release/java/com/orangehrmproject/ReactNativeFlipper.java

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
+ * directory of this source tree.
+ */
+package com.orangehrmproject;
+
+import android.content.Context;
+import com.facebook.react.ReactInstanceManager;
+
+/**
+ * Class responsible of loading Flipper inside your React Native application. This is the release
+ * flavor of it so it's empty as we don't want to load Flipper.
+ */
+public class ReactNativeFlipper {
+  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
+    // Do nothing as we don't want to initialize Flipper on Release.
+  }
+}

android/build.gradle

+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    ext {
+        buildToolsVersion = "33.0.0"
+        minSdkVersion = 21
+        compileSdkVersion = 33
+        targetSdkVersion = 33
+
+        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
+        ndkVersion = "23.1.7779620"
+        kotlinVersion = "1.6.20"
+    }
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.3.1")
+        classpath("com.facebook.react:react-native-gradle-plugin")
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion" 
+        classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlinVersion"
+    }
+}

android/gradle.properties

+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true
+
+# Version of flipper SDK to use with React Native
+FLIPPER_VERSION=0.125.0
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+
+newArchEnabled=false
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+org.gradle.parallel=false
\ No newline at end of file

android/gradle/wrapper/gradle-wrapper.properties

+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

+#!/bin/sh
+
+#
+# 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.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+#
+#   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
+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
+
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
+
+APP_NAME="Gradle"
+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
+
+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  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+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
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    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
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+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
+
+# 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.
+
+# 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/gradlew.bat

+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/link-assets-manifest.json

+{
+  "migIndex": 1,
+  "data": []
+}

android/settings.gradle

+rootProject.name = 'OrangeHrmProject'
+apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+include ':app'
+includeBuild('../node_modules/react-native-gradle-plugin')
+
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+
+include ':react-native-gesture-handler' 
+project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
\ No newline at end of file

app.json

+{
+  "name": "OrangeHrmProject",
+  "displayName": "OrangeHrmProject"
+}
\ No newline at end of file

app/App.js

+import React, {useEffect, useState} from 'react';
+import {Animated, View, Text, StyleSheet, Dimensions} from 'react-native';
+
+import {Provider} from 'react-redux';
+// import NetInfo from '@react-native-community/netinfo';
+// import { PersistGate } from 'redux-persist/integration/react'
+
+import Root from '../app/screens/Root';
+import {NavigationContainer} from '@react-navigation/native';
+// import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
+
+import {
+  navigationRef,
+  routeNameRef,
+  onNavigationStateChange,
+} from '../app/routes/NavigationHelper';
+
+
+
+import configureStore from './Store';
+
+const {store} = configureStore();
+
+const {width, height} = Dimensions.get('window');
+
+const App = () => {
+  const [isInternetConnected, setIsInternetConnected] = useState(true);
+  let fadeAnim = new Animated.Value(0);
+
+  // useEffect(() => {
+  //   console.log('availableLanguageList', initialLanguageList);
+  //   LocalizationHelper.prototype.initializeLocalization(
+  //     initialLanguageList,
+  //     'en',
+  //     true,
+  //   );
+
+  //   Animated.timing(
+  //     // Animate over time
+  //     fadeAnim, // The animated value to drive
+  //     {
+  //       toValue: 1, // Animate to opacity: 1 (opaque)
+  //       duration: 1000, // Make it take a while
+  //       useNativeDriver: true,
+  //     },
+  //   ).start();
+
+  //   NetInfo.addEventListener(state => {
+  //     handleConnectionChange(state.isConnected);
+  //   });
+
+  //   return () => {
+  //     NetInfo.fetch().then(state => {
+  //       console.log('Is connected?', state.isConnected);
+  //       handleConnectionChange(state.isConnected);
+  //     });
+  //   };
+  // });
+
+  // const handleConnectionChange = isConnected => {
+  //   setIsInternetConnected(isConnected);
+  // };
+
+  // const _renderNoInternet = () => {
+  //   if (!isInternetConnected) {
+  //     return (
+  //       <Animated.View // Special animatable View
+  //         style={{
+  //           ...styles.animateBox,
+  //           opacity: fadeAnim, // Bind opacity to animated value
+  //         }}>
+  //         <View style={styles.noInternet}>
+  //           {/* <FastImage style={styles.noInternetIco} source={icons.noInternet} /> */}
+  //           <Text style={styles.noInternetText}> {'No Internet'}</Text>
+  //         </View>
+  //       </Animated.View>
+  //     );
+  //   }
+  // };
+
+  return (
+    <Provider store = { store }>
+    <NavigationContainer
+      ref={navigationRef}
+      onReady={() =>
+        (routeNameRef.current = navigationRef.current.getCurrentRoute().name)
+      }
+      onStateChange={() => onNavigationStateChange()}>
+      <Root />
+      {/* {_renderNoInternet()} */}
+    </NavigationContainer>
+    </Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  // rootView: {
+  //   flex: 1,
+  //   backgroundColor: colors.appBgColor,
+  // },
+  // loadingContainer: {
+  //   flex: 1,
+  //   justifyContent: 'center',
+  //   alignItems: 'center',
+  //   backgroundColor: colors.colorWhite,
+  // },
+  animateBox: {
+    position: 'absolute',
+    width: width - 40,
+    bottom: 70,
+    backgroundColor: '#7C7C7C',
+    paddingVertical: 10,
+    borderRadius: 15,
+    marginHorizontal: 20,
+  },
+  noInternet: {
+    flexDirection: 'row',
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  noInternetText: {
+    color: 'white',
+    fontSize: 18,
+  },
+  noInternetIco: {
+    width: 30,
+    height: 30,
+  },
+});
+
+// let codePushOptions = {checkFrequency: codePush.CheckFrequency.ON_APP_RESUME};
+export default App;
\ No newline at end of file

app/Store.js

+import {createStore, applyMiddleware} from 'redux';
+import createSagaMiddleware from '@redux-saga/core';
+
+import rootSaga from './saga/RootSaga';
+import rootReducer from './reducers/index';
+
+export default function configureStore() {
+  const sagaMiddleware = createSagaMiddleware();
+  const store = createStore(
+    rootReducer,
+    applyMiddleware(sagaMiddleware),
+  );
+  sagaMiddleware.run(rootSaga);
+  //initSagas(sagaMiddleware);
+  return {store};
+}
+

app/components/AppBar.js

+import React from 'react';
+import {View, TouchableOpacity, Text, StyleSheet, Image} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import IconEntypo from 'react-native-vector-icons/Entypo';
+
+import {colors} from '../config/styles';
+import Images from '../config/Images';
+
+export const AppBar = props => {
+  const _clickHamberger = () => {
+    props.navigation.openDrawer();
+  };
+
+  const onPressProfile = () => {
+    props.navigation.navigate('profileMain');
+  };
+
+  return (
+    <View style={[styles.root, props.appBarColor
+      ? {backgroundColor: props.appBarColor }
+      : {backgroundColor: 'transparent'},]}>
+      <View
+        style={[
+          styles.bckBtnStyles,
+          props.isShowBack
+            ? {backgroundColor: colors.blackColor }
+            : {backgroundColor: 'transparent'},
+        ]}>
+        {props.isShowBack == false ? null : (
+          <TouchableOpacity onPress={() => _backHandler()}>
+            <Icon
+              name="keyboard-backspace"
+              size={30}
+              color={props.textColor? colors.blackColor:props.textColor }
+            />
+          </TouchableOpacity>
+        )}
+        {props.isShowHamberger == false ? null : (
+          <TouchableOpacity onPress={() => _clickHamberger()}>
+            <IconEntypo
+              name="menu"
+              size={40}
+              color={props.textColor? props.textColor: props.white }
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+      <View style={{flex: 5, alignItems: 'center',paddingTop:10}}>
+        <Text style={[styles.titleStyles, props.testStyleHeaderColor]}>{props.title}</Text>
+      </View>
+      <View
+        style={[
+          styles.profileStyle,
+          props.isShowProfile
+            ? {backgroundColor: props.textColor? colors.white:props.textColor }
+            : {backgroundColor: 'transparent'},
+        ]}>
+        {props.isShowProfile ? (
+          <TouchableOpacity onPress={() => onPressProfile()}>
+            <Image
+              style={styles.image}
+              source={
+                props.profilePicImage == null
+                  ? Images.ProfilePic
+                  : {uri: props.profilePicImage}
+              }
+            />
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+AppBar.defaultProps = {
+  profilePicImage: null,
+  isShowBack: true,
+  isShowProfile: true,
+};
+
+const styles = StyleSheet.create({
+  profileStyle: {
+    borderRadius: 50,
+    width: 50,
+    height: 50,
+    backgroundColor: colors.blackColor,
+    margin: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
+  titleStyles: {
+    color: colors.white,
+    fontSize: 23,
+    padding: 20,
+    fontWeight: 'bold',
+  },
+  bckBtnStyles: {
+    borderRadius: 50,
+    width: 50,
+    height: 50,
+    margin: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
+  root: {
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    position: 'absolute',
+    zIndex: 9999,
+  },
+  image: {
+    color: 'black',
+    width: 50,
+    height: 50,
+    borderRadius: 50,
+  },
+});

app/components/Background.js

+import React from 'react';
+import {View, ImageBackground} from 'react-native';
+import Images from '../config/Images';
+
+const Background = ({children}) => {
+    return(
+        <View>
+        <ImageBackground
+          source={Images.BG}
+          style={{
+            flex: 1,
+            paddingVertical: 40,
+            paddingHorizontal: 16,
+            position: 'relative',
+          }}>
+          <View>{children}</View>
+        </ImageBackground>
+      </View>
+    )
+ 
+};
+
+export default Background;

app/components/Button.js

+import React, {Component} from 'react';
+import {TouchableOpacity, Text, StyleSheet, Dimensions} from 'react-native';
+import {TextField} from 'react-native-material-textfield';
+import {fontSizes, materialTextFieldStyle} from '../config/styles';
+
+import {colors} from '../config/styles';
+
+const {width, height} = Dimensions.get('window');
+
+export const Button = props => {
+  return (
+    <TouchableOpacity
+     {...props}
+      onPress={props.onPressBtn}
+      style={[styles.btnStyle, props.buttonStyle]}>
+      <Text style={[styles.textStyle, props.textStyles]}>{props.addText}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  btnStyle: {
+    backgroundColor: colors.primaryColor1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 30,
+    height: height / 20,
+  },
+  textStyle: {
+    color: colors.white,
+    fontSize: 15,
+    fontWeight: 'bold',
+  },
+});

app/components/CustomDrawer.js

+import React from 'react';
+import {View, Text,ImageBackground, Image, TouchableOpacity} from 'react-native';
+import {
+  DrawerContentScrollView,
+  DrawerItemList,
+} from '@react-navigation/drawer';
+import {connect} from 'react-redux';
+
+import Images from '../config/Images';
+
+import Iconsicons from 'react-native-vector-icons/Ionicons';
+import {GET_LOGIN_OK} from '../screens/onboarding/login/LoginActionTypes';
+import { colors } from '../config/styles';
+
+
+const CustomDrawer = props => {
+  return (
+    <View style={{flex: 1}}>
+      <DrawerContentScrollView
+        {...props}
+        contentContainerStyle={{backgroundColor: '#8200d6'}}>
+        <ImageBackground source={Images.BackgrounDdrawer} style={{padding:30}}>
+            <Image source={Images.Avatar} style={{height:80,width:80,borderRadius:40, marginBottom:10}}></Image>
+            <Text style={{color:'#fff',fontSize: 18}}>Jhone Doe</Text>
+        </ImageBackground>
+        <View style={{flex:1,backgroundColor:'#fff',paddingTop: 10}}>
+           <DrawerItemList {...props} />
+        </View>
+      
+      </DrawerContentScrollView>
+      <View style={{padding:20, borderTopWidth:1,borderTopColor:"#ccc"}}>
+      <TouchableOpacity onPress={()=>{props.changeLoginStatus(false)}} style={{paddingVertical:15}}>
+        <View style={{flexDirection:'row',alignItems:'center'}}>
+          <Iconsicons size={22} name="exit-outline" style={{color:colors.blackColor}}/>
+          <Text style={{color:colors.blackColor, fontSize:15, marginLeft:5}}>Sign Out</Text>
+        </View>
+      </TouchableOpacity>
+      
+      </View>
+    </View>
+  );
+};
+
+const mapStateToProps = (state, props) => {
+  return {
+    loginStatus: state.login.loginStatus,
+  };
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    changeLoginStatus: loginBody => {
+      dispatch({type: GET_LOGIN_OK, payload: loginBody});
+    },
+  };
+}
+
+export default connect(mapStateToProps,mapDispatchToProps)(CustomDrawer);

app/components/TextInputField.js

+import React from 'react';
+import {View, TextInput} from 'react-native';
+import Images from '../config/Images';
+import {colors} from '../config/styles';
+
+const TextInputField = props => {
+  return (
+    <TextInput
+      {...props}
+      placeholderTextColor={colors.gray}
+      style={{
+        borderRadius: 100,
+        color: colors.blackColor,
+        paddingHorizontal: 20,
+        width: '70%',
+        backgroundColor: 'rgb(220,220,220)',
+        marginVertical: 10,
+        height: 40
+       
+      }} ></TextInput>
+  );
+};
+
+export default TextInputField;

app/config/Images.js

+import Profile from '../assests/profile.png';
+import Splash from '../assests/splash.jpeg';
+import BG from '../assests/bg.webp';
+import BackgrounDdrawer from '../assests/backgrounddrawer.webp';
+import Avatar from '../assests/avater.png';
+import ImageCapture from '../assests/imagecapture.png';
+import AugmentedReality from '../assests/augmentedReality.jpg';
+import Chat from '../assests/chat.jpg';
+import Gallary from '../assests/gallary.jpeg';
+import Camera from '../assests/camera.png';
+
+
+export default {
+  Profile,
+  Splash,
+  BG,
+  BackgrounDdrawer,
+  Avatar,
+  ImageCapture,
+  AugmentedReality,
+  Chat,
+  Gallary,
+  Camera
+};

app/config/settings.js

+export const LANG_LIST_FLAG = 'lngList';
+
+
+export const DEFAULT_PROTOCOL = 'https';
+
+export const LOGOUT_IMAGE = 'LOGOUT_IMAGE';

app/config/styles.js

+import {Platform} from 'react-native';
+import {Dimensions} from 'react-native';
+const {width} = Dimensions.get('window');
+
+export const fontSizes = {
+  sixteenSize: 16,
+  fourteenZise: 14,
+};
+
+export const fontWeights = {
+  normal: 'normal',
+  hard: '600',
+  medium: '500',
+  semiMedium: '400',
+};
+
+export const colors = {
+  primaryColor1: '#1ee8db', //purple
+  lightBlue: '#add8e6',
+  primaryColor2: '#EB275A', //pink
+  secondaryColor1: '#CD853F', //orange
+  secondaryColor2: '#C71585', //blue
+  blackColor: '#000000',
+  white: '#fff',
+  green: '#00AE28',
+  green1: '#20B2AA',
+  red: '#FC0000',
+  darkGreen: '#003300',
+  gray:'#A9A9A9'
+};
+
+export const materialTextFieldStyle = {
+  tintColor: colors.purpleColor1,
+  activeLineWidth: 2,
+  textColor: colors.blackColor,
+  titleFontSize: fontSizes.sixteenSize,
+  labelFontSize: fontSizes.sixteenSize,
+};

app/lib/Utils.js

+import React, {useRef} from 'react';
+
+// import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import {
+  BASE_URL,
+  DEFAULT_PROTOCOL,
+  API_ENDPOINT,
+  LOGOUT_IMAGE,
+} from '../config/settings';
+
+export const setConfig = async (key, value) => {
+  global.username = true;
+};
+
+export const getConfig = async (key, value) => {
+  try {
+    const username = global.username;
+    return username;
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+// export const setJwttoken = async token => {
+//   await AsyncStorage.setItem('jwtToken', token);
+// };
+
+/**
+ * Creates a node compatible backend URL from provided input
+ * @param {string} nodeController
+ * @param {string} nodeAction
+ * @param {string} nodeModule
+ * @param {string} proto
+ */
+export const createUrl = nodeAction => {
+  let url;
+  let protocol;
+  protocol = `${DEFAULT_PROTOCOL}://`;
+  url = BASE_URL;
+  url = protocol + url + nodeAction;
+  console.log(':: Url', url);
+  return url;
+};
+
+/**
+ * Sends an API call
+ * @param {string} url
+ * @param {object} params
+ * @param {string} method
+ * @param {number} timeout
+ */
+export const ajaxCall = async (
+  url,
+  params = {},
+  showSpinner = true,
+  method = 'POST',
+  isAccessToken,
+) => {
+  if (showSpinner == true) {
+    try {
+      // if (showSpinner) {
+      //   global.store.dispatch({
+      //     type: UPDATE_LOADING_SPINNER_STATE,
+      //     payload: true,
+      //   });
+      // }
+
+      let response = '';
+      const accesstoken = '266f1e1ea1f6c57b284cacd7972b26a40de0a1ec';
+      if (isAccessToken == true && method == 'GET') {
+        console.log('accesstoken', accesstoken);
+        response = await fetch(
+          url,
+          {
+            method: method,
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: 'Bearer ' + accesstoken,
+            },
+          },
+          (err, res) => {
+            if (err) {
+              return null;
+            }
+            return res;
+          },
+        );
+      } else if (isAccessToken == true && method == 'POST') {
+        response = await fetch(
+          url,
+          {
+            method: method,
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: 'Bearer ' + accesstoken,
+            },
+            body: JSON.stringify(params),
+          },
+          (err, res) => {
+            if (err) {
+              return null;
+            }
+            return res;
+          },
+        );
+      }
+
+      if (response !== null) {
+        if (response.status === 404) {
+          console.log('no result', response);
+        }
+
+        if (response.status === 401) {
+          console.log('401', response);
+          return;
+        }
+      
+        let responseJson = await response.json();
+        console.log('responce1', responseJson);
+        if (responseJson.success || responseJson.result) {
+         
+          return responseJson;
+        } else {
+          if (responseJson.maintenance) {
+            return responseJson;
+          } else {
+            return responseJson;
+          }
+        }
+      } else {
+        return {success: false, info: 'error.system'};
+      }
+    } catch (err) {
+      console.log(':: error - ' + err, url, params);
+      // if (showSpinner) {
+      //   global.store.dispatch({
+      //     type: UPDATE_LOADING_SPINNER_STATE,
+      //     payload: false,
+      //   });
+      // }
+
+      return {success: false, info: 'error.system'};
+    }
+  }
+};

app/reducers/index.js

+import {combineReducers} from 'redux';
+
+
+import Login from '../screens/onboarding/login/LoginReducers';
+
+
+export default combineReducers({
+  login: Login,
+
+});

app/routes/NavigationHelper.js

+import * as React from 'react';
+
+import {StackActions} from '@react-navigation/native';
+import {CommonActions} from '@react-navigation/native';
+
+export const navigationRef = React.createRef();
+export const routeNameRef = React.createRef();
+
+export function onNavigationStateChange() {
+  // Restructure the current and previous route objects to avoid the breaking of usage of react-navigation <v5
+  const previousRoute = {
+    routeName: routeNameRef?.current,
+  };
+  const currentRouteObject = navigationRef.current.getCurrentRoute();
+
+  const currentRoute = {
+    routeName: currentRouteObject?.name,
+  };
+
+  if (previousRoute.routeName !== currentRoute.routeName) {
+    global.currentScreen = currentRoute;
+    global.previousScreen = previousRoute;
+    global.routeName = currentRoute.routeName;
+    console.log('currentRoute', currentRoute.routeName);
+  }
+
+  if (global.PlayerIns != null) {
+    global.PlayerIns.destroy();
+  }
+
+  // Save the current route name for later comparison
+  routeNameRef.current = currentRouteObject.name;
+}
+

app/routes/NavigationStack.js

+import React from 'react';
+import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+
+
+import Splash from '../screens/onboarding/Splash';
+import LoginorSignUp from '../screens/onboarding/LoginorSignUp';
+import Login from '../screens/onboarding/login/Login';
+import Register from '../screens/onboarding/register/Register';
+
+import Home from '../screens/home/Home';
+import ImageCapture from '../screens/imagecapture/ImageCapture';
+import AugmentedReality from '../screens/augmentedreality/AugmentedReality';
+import Chat from '../screens/chat/Chat';
+import AboutUs from '../screens/aboutus/AboutUs';
+import ContactUs from '../screens/contactus/ContactUs';
+
+import CustomDrawer from '../components/CustomDrawer';
+
+import Ionicons from 'react-native-vector-icons/Ionicons'
+
+
+
+const onboardingScreens = {
+  splash: {screen: Splash},
+  loginorsignup: {screen: LoginorSignUp},
+  login: {screen: Login},
+  register: {screen: Register},
+
+};
+
+const signInScreens = {
+  Home: {screen: Home,iconName:'home-outline'},
+  Math_Scanner: {screen:ImageCapture,iconName:'camera-reverse-outline'},
+  AR_Math_Solver: {screen:AugmentedReality,iconName:'ios-videocam-outline'},
+  Algebraic_Assistant: {screen: Chat,iconName:'chatbox-ellipses-outline'},
+  AboutUs: {screen: AboutUs,iconName:'information-circle-outline'},
+  ContactUs: {screen: ContactUs,iconName:'ios-call-outline'},
+};
+
+
+const Stack = createNativeStackNavigator();
+const Drawer = createDrawerNavigator();
+
+export const MainStack = () => {
+  let screens = [];
+  for (let key in signInScreens) {
+    if (signInScreens.hasOwnProperty(key)) {
+      screens.push(
+        <Drawer.Screen
+          key={key}
+          name={key}
+          component={signInScreens[key].screen}
+          options={{
+            drawerIcon: ({color})=>(
+              <Ionicons name={signInScreens[key].iconName} size={22} color={color}/>
+            )
+          }}
+        />,
+      );
+    }
+  }
+  return (
+    <Drawer.Navigator
+
+      screenOptions={{
+        headerShown: false,
+      }} 
+      drawerContent={props=><CustomDrawer {...props}/>}
+      >
+      {screens}
+    </Drawer.Navigator>
+  );
+};
+
+
+
+export const Onboarding = () => {
+  let screens = [];
+  for (let key in onboardingScreens) {
+    if (onboardingScreens.hasOwnProperty(key)) {
+      screens.push(
+        <Stack.Screen
+          key={key}
+          name={key}
+          component={onboardingScreens[key].screen}
+        />,
+      );
+    }
+  }
+  return (
+    <Stack.Navigator
+      initialRouteName="splash"
+      screenOptions={{
+        gestureEnabled: false,
+        headerShown: false,
+      }}>
+      {screens}
+    </Stack.Navigator>
+  );
+};

app/saga/RootSaga.js

+import {all} from 'redux-saga/effects';
+
+
+
+
+
+export default function* rootSaga() {
+  yield all([
+
+ 
+  ]);
+}
+
+// export const initSagas = sagaMiddleware =>
+//   sagas.forEach(sagaMiddleware.run.bind(sagaMiddleware));
\ No newline at end of file

app/screens/Root.js

+import React, {useEffect, useState} from 'react';
+import {View, StyleSheet, Platform, Text} from 'react-native';
+import {connect} from 'react-redux';
+
+
+import {Onboarding,MainStack} from '../routes/NavigationStack';
+
+// import {LoadingSpinner} from '../components/LoadingSpinner';
+
+
+
+
+const Root = props => {
+  const [token, setToken] = useState(null);
+  const [loggingStatus, setLoggingStatus] = useState(false);
+  // useEffect(() => {
+  //   const availableLanguageList = getAvailableLanguageList();
+  //   LocalizationHelper.prototype.initializeLocalization(
+  //     availableLanguageList,
+  //     'en',
+  //     true,
+  //   );
+  // });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    //const token = await getJwttoken();
+
+    // if (token != null) {
+    //   setToken(token);
+    // }
+    if (props.isLoggedIn != undefined) {
+      // setToken(token);
+      console.log('props.isLoggedIn', props.isLoggedIn);
+      setLoggingStatus(props.isLoggedIn);
+    }
+    return () => {
+      console.log('This will be logged on unmount');
+    };
+  }, [props.isLoggedIn]);
+
+  if (loggingStatus != null) {
+    return (
+      <View style={{flex: 1}}>
+        {/* <SplashScreen /> */}
+        {/* <LoadingSpinner showLoading={props.loading} /> */}
+        {props.isLoggedIn==true?<MainStack/>:<Onboarding/>}
+      
+      </View>
+    );
+  } else {
+    return <View style={{flex: 1}} />;
+  }
+};
+
+const mapStateToProps = state => {
+  return {
+    isLoggedIn: state.login.loginStatus,
+  };
+};
+
+export default connect(mapStateToProps)(Root);

app/screens/aboutus/AboutUs.js

+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  View,
+  TextInput,
+  ScrollView,
+  Dimensions,
+  StyleSheet,
+  SafeAreaView,
+
+  TouchableOpacity
+} from 'react-native';
+
+// import {TextInput, HelperText} from 'react-native-paper';
+
+import {colors} from '../../config/styles';
+
+import Images from '../../config/Images';
+import TextInputField from '../../components/TextInputField';
+import {Button} from '../../components/Button';
+import Background from '../../components/Background';
+import {AppBar} from '../../components/AppBar';
+
+const AboutUs = (props) => {
+  return (
+    <SafeAreaView>
+   
+    <View style={{alignItems: 'center', width: 460}}>
+
+<AppBar
+        navigation={props.navigation}
+        title={''}
+        isShowBack={false}
+        isShowHamberger={true}
+        isShowProfile={false}
+      />
+      <Background
+        source={Images.BG}
+        resizeMode="cover"
+        style={styles.mainComp}>
+
+        <View style={{justifyContent:'center',alignItems:'center',paddingRight:60, paddingBottom: 20}}>
+        <Text
+          style={{
+            color: 'white',
+            fontSize: 38,
+            fontWeight: 'bold',
+          }}>
+          About Us
+        </Text>
+      
+        </View>
+      
+        <ScrollView
+          style={{
+            backgroundColor: 'white',
+            height: 700,
+            width: 460,
+            borderTopLeftRadius: 130,
+            paddingTop: 20,
+            paddingLeft: 60,
+          }}>
+        
+          <View style={{paddingTop: 30, paddingBottom: 50}}>
+          
+           
+          </View>
+          <View style={{width: 280}}>
+          
+          </View>
+        </ScrollView>
+
+      </Background>
+    </View>
+  </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  bottomView: {
+    flex: 1,
+    backgroundColor: 'white',
+    bottom: 40,
+  },
+  inputUserName: {
+    height: 40,
+    marginLeft: 50,
+    marginRight: 50,
+    marginBottom: 20,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5,
+    color: '#000',
+  },
+  inputPassword: {
+    height: 40,
+    marginLeft: 50,
+    marginRight: 50,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5,
+    color: '#000',
+  },
+  buttonStyle: {
+    margin: 80,
+    padding: 20,
+    borderRadius: 5,
+    color: '#000',
+  },
+  mainComp: {
+    paddingVertical: 20,
+    paddingHorizontal: 16,
+    position: 'relative',
+  },
+});
+
+export default AboutUs

app/screens/augmentedreality/AugmentedReality.js

+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  View,
+  TextInput,
+  ScrollView,
+  Dimensions,
+  StyleSheet,
+  SafeAreaView,
+  Image,
+  FlatList,
+  TouchableOpacity,
+} from 'react-native';
+
+import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
+
+import {colors} from '../../config/styles';
+
+import Images from '../../config/Images';
+import TextInputField from '../../components/TextInputField';
+import {Button} from '../../components/Button';
+import Background from '../../components/Background';
+import {AppBar} from '../../components/AppBar';
+
+const {width, height} = Dimensions.get('window');
+
+const AugmentedReality = props => {
+  const [image, setImage] = useState('');
+  const [imagePath, setImagePath] = useState(null);
+  const [imageFileName, setImageFileName] = useState('');
+  const [text, setText] = useState('');
+
+  const imgDataList = [
+    {
+      image: Images.Camera,
+      subjectName: 'Choose Camara',
+      subjectSubName: 'Image',
+      value: 1,
+      press: () => chooseCamera(),
+    },
+    
+  ];
+
+  const SubjectItem = ({subjects}) => {
+    return (
+      <TouchableOpacity
+        activeOpacity={0.0}
+        onPress={subjects.item.press}
+        style={styles.subjectItemBtn}>
+        <Image
+          style={styles.subjectItemImgStyle}
+          source={subjects.item.image}
+        />
+        <Text style={styles.subjName}>{subjects.item.subjectName}</Text>
+        {/* <Text style={styles.subjSubName}>{subjects.item.subjectSubName}</Text> */}
+      </TouchableOpacity>
+    );
+  };
+
+  const setUser = () => {
+    setConfig();
+  };
+
+  const getPlatformPath = response => {
+    return Platform.select({
+      android: {value: response.assets[0].uri},
+      ios: {value: response.assets[0].uri},
+    });
+  };
+
+  /**
+   * Get the file name and handle the invalid null case
+   */
+  const getFileName = (name, path) => {
+    console.log(name + path + 'hhhhhh');
+    if (name != null) {
+      return name;
+    }
+
+    // if (Platform.OS === "ios") {
+    //     path = "~" + path.substring(path.indexOf("/Documents"));
+    // }
+    return path.split('/').pop();
+  };
+
+  const getPlatformURI = imagePath => {
+    let imgSource = imagePath;
+
+    console.log('imagePath', isNaN(imagePath));
+    if (isNaN(imagePath)) {
+      imgSource = {uri: imagePath};
+      if (Platform.OS == 'android') {
+        imgSource.uri = imgSource.uri;
+      }
+    } else {
+      if (image !== '') {
+        imgSource = {uri: image};
+        if (Platform.OS == 'android') {
+          imgSource.uri = imgSource.uri;
+        }
+      } else {
+        imgSource = null;
+      }
+    }
+    return imgSource;
+  };
+
+  const chooseLib = () => {
+    var options = {
+      title: 'Select Image',
+      storageOptions: {
+        skipBackup: true, // do not backup to iCloud
+        path: 'images', // store camera images under Pictures/images for android and Documents/images for iOS
+      },
+    };
+    launchImageLibrary(options, response => {
+      if (response.didCancel) {
+      } else if (response.error) {
+        console.log('ImagePicker Error: ', response.error);
+      } else if (response.customButton) {
+        console.log('User tapped custom button: ', response.customButton);
+      } else {
+        let path = getPlatformPath(response).value;
+        let fileName = getFileName(response.fileName, path);
+        setImagePath(path);
+        setImageFileName(fileName);
+        console.log(fileName);
+        // getUrl(path, fileName);
+      }
+    });
+  };
+
+  const chooseCamera = () => {
+    var options = {
+      title: 'Select Image',
+      storageOptions: {
+        skipBackup: true, // do not backup to iCloud
+        path: 'images', // store camera images under Pictures/images for android and Documents/images for iOS
+      },
+    };
+    launchCamera(options, response => {
+      if (response.didCancel) {
+      } else if (response.error) {
+        console.log('ImagePicker Error: ', response.error);
+      } else if (response.customButton) {
+        console.log('User tapped custom button: ', response.customButton);
+      } else {
+        let path = getPlatformPath(response).value;
+        let fileName = getFileName(response.fileName, path);
+        setImagePath(path);
+        setImageFileName(fileName);
+        // getUrl(path, fileName);
+      }
+    });
+  };
+
+  let imgSource = getPlatformURI(imagePath);
+  console.log(imgSource)
+
+  const clearImage =()=>{
+    getPlatformURI(null)
+    setImagePath(null);
+    setImageFileName(null);
+  }
+
+  const changeText =(text)=>{
+    setText(text)
+  }
+
+  const changeTextSubmit = (text) =>{
+    chooseCamera()
+  }
+
+  return (
+    <SafeAreaView>
+      <View style={{alignItems: 'center', width: 460}}>
+        <AppBar
+          navigation={props.navigation}
+          title={''}
+          isShowBack={false}
+          isShowHamberger={true}
+          isShowProfile={false}
+        />
+        <Background
+          source={Images.BG}
+          resizeMode="cover"
+          style={styles.mainComp}>
+          <View
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+              paddingRight: 60,
+              paddingBottom: 20,
+            }}>
+            <Text
+              style={{
+                color: 'white',
+                fontSize: 30,
+                fontWeight: 'bold',
+              }}>
+              AR Math Solver
+            </Text>
+          </View>
+
+          <View
+            style={{
+              backgroundColor: 'white',
+              height: 700,
+              width: 460,
+              borderTopLeftRadius: 130,
+              paddingTop: 100,
+            }}>
+            <View style={{paddingTop: 30, paddingBottom: 20,paddingLeft:50}}>
+            <Text style={{color:colors.blackColor}}>Please Enter the text</Text>
+            <TextInputField placeholder="Enter the text"  onChangeText={text => changeText(text)}
+                onSubmitEditing={event =>
+                  changeTextSubmit(event.nativeEvent.text)
+                } ></TextInputField>
+
+<Text style={{color: colors.red, paddingBottom: 15}}>
+                  {' '}
+                  * This feature still not available
+                </Text>
+            </View>
+           
+            <View style={{width: 380}}>
+         
+              <View style={{paddingTop: 20, paddingBottom: 20}}>
+             
+                <View style={{marginTop: 3}}>
+             
+              
+                 
+                </View>
+              </View>
+            </View>
+          </View>
+        </Background>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomView: {
+    flex: 1,
+    backgroundColor: 'white',
+    bottom: 40,
+  },
+  image: {
+    color: 'black',
+    width: width / 1.5,
+    height: height / 2,
+  
+  },
+
+  buttonStyle: {
+    margin: 80,
+    padding: 20,
+    borderRadius: 5,
+    color: '#000',
+  },
+  mainComp: {
+    paddingVertical: 20,
+    paddingHorizontal: 16,
+    position: 'relative',
+  },
+  bottomView: {
+    backgroundColor: 'white',
+  },
+  eightyWidthStyle: {
+    flexDirection: 'row',
+    width: '80%',
+    marginBottom: 10,
+    justifyContent: 'center',
+  },
+  camOrlibStyles: {
+    height: 30,
+    backgroundColor: colors.secondaryColor2,
+    margin: 10,
+    borderRadius: 20,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingTop: 2,
+  },
+
+  subjectItemImgStyle: {
+    width: width / 2.5,
+    height: height / 5,
+    borderRadius: 10,
+  },
+  subjectItemBtn: {
+    backgroundColor: colors.blackColor,
+    margin: 10,
+    width: width / 2.5,
+    height: height / 3.5,
+    borderRadius: 10,
+    // padding: 15,
+    shadow: '#9e9808',
+    elevation: 5,
+  },
+  subjName: {
+    alignContent: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+    paddingTop: 20,
+    fontWeight: 'bold',
+  },
+});
+
+export default AugmentedReality;

app/screens/chat/Chat.js

+import React, {useState, useCallback, useEffect} from 'react';
+import {GiftedChat,LeftAction, ChatInput, SendButton,Bubble} from 'react-native-gifted-chat';
+import {View,StyleSheet} from 'react-native';
+
+import {AppBar} from '../../components/AppBar';
+import { colors } from '../../config/styles';
+import {
+    renderAvatar,
+    renderBubble,
+    renderSystemMessage,
+    renderMessage,
+    renderMessageText,
+    renderCustomView,
+  } from './MessageContainer';
+  import { renderInputToolbar, renderActions, renderComposer, renderSend } from './InputToolbar';
+
+
+const Chat = (props) => {
+    const [text, setText] = useState('');
+    const [messages, setMessages] = useState([]);
+  
+   let i = 1;
+  
+ 
+
+  useEffect(() => {
+    setMessages([
+      {
+        _id: i,
+        text: 'Welcome to agumented Reality',
+        createdAt: new Date(),
+        user: {
+          _id: 2,
+          name: 'React Native',
+          avatar: 'https://placeimg.com/140/140/any',
+        },
+      },
+      
+    ]);
+  }, []);
+
+ 
+  const onSend = useCallback((messages = []) => {
+    console.log(messages)
+
+    setMessages(previousMessages =>
+      GiftedChat.append(previousMessages, messages),
+    );
+   
+
+    seletReply()
+   
+   
+  }, []);
+
+  const seletReply =() =>{
+    let obj=  [{"_id": Math.floor(Math.random() * 1000) + 1 , "createdAt": new Date(), "text": "This Feature not available", "user": {"_id": 2,  name: 'React Native',
+    avatar: 'https://placeimg.com/140/140/any',}}]
+
+    setTimeout(() => { setMessages(previousMessages =>
+      GiftedChat.append(previousMessages, obj),
+    );}, 1000)
+  }
+
+
+  return (
+    <View style={{flex:1, paddingTop: 20}}>
+      <AppBar
+        navigation={props.navigation}
+        title={'Algebraic Assistant'}
+        appBarColor={colors.blackColor}
+        isShowHamberger={true}
+        isShowProfile={false}
+        testStyleHeaderColor={{color:colors.white,fontSize:30}}
+        textColor={colors.white}
+
+      />
+        <View style={{flex:1, paddingTop: 30}}>
+        <GiftedChat
+                messages={messages}
+                onSend={messages => onSend(messages)}
+                user={{
+                  _id: 1,
+                }}
+                minInputToolbarHeight={70}
+                renderInputToolbar={renderInputToolbar}
+              // renderActions={renderActions}
+              renderComposer={renderComposer}
+        
+              />
+        </View>
+    
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+    inputContainer: {
+  
+     
+    },
+    
+  });
+  
+
+export default Chat;

app/screens/chat/InputToolbar.js

+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { Image,View,StyleSheet } from 'react-native';
+import { InputToolbar, Actions, Composer, Send ,LeftAction, ChatInput, SendButton} from 'react-native-gifted-chat';
+import { colors } from '../../config/styles';
+import IconEntypo from 'react-native-vector-icons/Entypo';
+
+export const renderInputToolbar = (props) => (
+  <InputToolbar
+    {...props}
+    containerStyle={{
+      backgroundColor: '#222B45',
+      paddingTop: 6,
+    }}
+    primaryStyle={{ alignItems: 'center' }}
+  />
+
+);
+
+export const renderActions = (props) => (
+  <Actions
+    {...props}
+    containerStyle={{
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: 4,
+      marginRight: 4,
+      marginBottom: 0,
+    }}
+    icon={() => (
+        <IconEntypo
+              name="image"
+              size={30}
+              color={colors.white}
+            />
+    )}
+    options={{
+      'Choose From Library': () => {
+        console.log('Choose From Library');
+      },
+      'Choose From Camera': () => {
+        console.log('Choose From Camera');
+      },
+      Cancel: () => {
+        console.log('Cancel');
+      },
+    }}
+    optionTintColor="#222B45"
+  />
+);
+
+export const renderComposer = (props) => (
+  <Composer
+    {...props}
+    textInputStyle={{
+      color: '#222B45',
+      backgroundColor: '#EDF1F7',
+      borderWidth: 1,
+      borderRadius: 5,
+      borderColor: '#E4E9F2',
+      paddingTop: 8.5,
+      paddingHorizontal: 12,
+      marginLeft: 0,
+    }}
+  />
+);
+
+export const renderSend = (props) => (
+  <Send
+    {...props}
+    disabled={!props.text}
+    containerStyle={{
+      width: 44,
+      height: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginHorizontal: 4,
+    }}
+  >
+    <Image
+      style={{ width: 32, height: 32 }}
+      source={require('../../assests/chat.jpg')}
+    />
+  </Send>
+);
+
+const styles = StyleSheet.create({
+    inputContainer: {
+  
+     
+    },
+    
+  });
+  
\ No newline at end of file

app/screens/chat/MessageContainer.js

+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { View, Text } from 'react-native';
+import { Avatar, Bubble, SystemMessage, Message, MessageText } from 'react-native-gifted-chat';
+
+export const renderAvatar = (props) => (
+  <Avatar
+    {...props}
+    containerStyle={{ left: { borderWidth: 3, borderColor: 'red' }, right: {} }}
+    imageStyle={{ left: { borderWidth: 3, borderColor: 'blue' }, right: {} }}
+  />
+);
+
+export const renderBubble = (props) => (
+  <Bubble
+    {...props}
+    // renderTime={() => <Text>Time</Text>}
+    // renderTicks={() => <Text>Ticks</Text>}
+    containerStyle={{
+      left: { borderColor: 'teal', borderWidth: 8 },
+      right: {},
+    }}
+    wrapperStyle={{
+      left: { borderColor: 'tomato', borderWidth: 4 },
+      right: {},
+    }}
+    bottomContainerStyle={{
+      left: { borderColor: 'purple', borderWidth: 4 },
+      right: {},
+    }}
+    tickStyle={{}}
+    usernameStyle={{ color: 'tomato', fontWeight: '100' }}
+    containerToNextStyle={{
+      left: { borderColor: 'navy', borderWidth: 4 },
+      right: {},
+    }}
+    containerToPreviousStyle={{
+      left: { borderColor: 'mediumorchid', borderWidth: 4 },
+      right: {},
+    }}
+  />
+);
+
+export const renderSystemMessage = (props) => (
+  <SystemMessage
+    {...props}
+    containerStyle={{ backgroundColor: 'pink' }}
+    wrapperStyle={{ borderWidth: 10, borderColor: 'white' }}
+    textStyle={{ color: 'crimson', fontWeight: '900' }}
+  />
+);
+
+export const renderMessage = (props) => (
+  <Message
+    {...props}
+    // renderDay={() => <Text>Date</Text>}
+    containerStyle={{
+      left: { backgroundColor: 'lime' },
+      right: { backgroundColor: 'gold' },
+    }}
+  />
+);
+
+export const renderMessageText = (props) => (
+  <MessageText
+    {...props}
+    containerStyle={{
+      left: { backgroundColor: 'yellow' },
+      right: { backgroundColor: 'purple' },
+    }}
+    textStyle={{
+      left: { color: 'red' },
+      right: { color: 'green' },
+    }}
+    linkStyle={{
+      left: { color: 'orange' },
+      right: { color: 'orange' },
+    }}
+    customTextStyle={{ fontSize: 24, lineHeight: 24 }}
+  />
+);
+
+export const renderCustomView = ({ user }) => (
+  <View style={{ minHeight: 20, alignItems: 'center' }}>
+    <Text>
+      Current user:
+      {user.name}
+    </Text>
+    <Text>From CustomView</Text>
+  </View>
+);

app/screens/contactus/ContactUs.js

+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  View,
+  TextInput,
+  ScrollView,
+  Dimensions,
+  StyleSheet,
+  SafeAreaView,
+
+  TouchableOpacity
+} from 'react-native';
+
+// import {TextInput, HelperText} from 'react-native-paper';
+
+import {colors} from '../../config/styles';
+
+import Images from '../../config/Images';
+import TextInputField from '../../components/TextInputField';
+import {Button} from '../../components/Button';
+import Background from '../../components/Background';
+import {AppBar} from '../../components/AppBar';
+
+const ContactUs = (props) => {
+  return (
+    <SafeAreaView>
+   
+    <View style={{alignItems: 'center', width: 460}}>
+
+<AppBar
+        navigation={props.navigation}
+        title={''}
+        isShowBack={false}
+        isShowHamberger={true}
+        isShowProfile={false}
+      />
+      <Background
+        source={Images.BG}
+        resizeMode="cover"
+        style={styles.mainComp}>
+
+        <View style={{justifyContent:'center',alignItems:'center',paddingRight:60, paddingBottom: 20}}>
+        <Text
+          style={{
+            color: 'white',
+            fontSize: 38,
+            fontWeight: 'bold',
+          }}>
+          Contact Us
+        </Text>
+      
+        </View>
+      
+        <ScrollView
+          style={{
+            backgroundColor: 'white',
+            height: 700,
+            width: 460,
+            borderTopLeftRadius: 130,
+            paddingTop: 20,
+            paddingLeft: 60,
+          }}>
+        
+          <View style={{paddingTop: 30, paddingBottom: 50}}>
+            <TextInputField placeholder="First Name"></TextInputField>
+            <TextInputField placeholder="Last Name"></TextInputField>
+            <TextInputField placeholder="Email/Username"></TextInputField>
+            <TextInputField placeholder="Contact Number"></TextInputField>
+           
+          </View>
+          <View style={{width: 280}}>
+            <Button
+              buttonStyle={{color: colors.primaryColor1}}
+              onPressBtn={() => clickLogin()}
+              addText={'Submit'}
+            />
+          </View>
+        </ScrollView>
+
+      </Background>
+    </View>
+  </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  bottomView: {
+    flex: 1,
+    backgroundColor: 'white',
+    bottom: 40,
+  },
+  inputUserName: {
+    height: 40,
+    marginLeft: 50,
+    marginRight: 50,
+    marginBottom: 20,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5,
+    color: '#000',
+  },
+  inputPassword: {
+    height: 40,
+    marginLeft: 50,
+    marginRight: 50,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5,
+    color: '#000',
+  },
+  buttonStyle: {
+    margin: 80,
+    padding: 20,
+    borderRadius: 5,
+    color: '#000',
+  },
+  mainComp: {
+    paddingVertical: 20,
+    paddingHorizontal: 16,
+    position: 'relative',
+  },
+});
+
+export default ContactUs

app/screens/home/Home.js

+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  StyleSheet,
+  Dimensions,
+  Image,
+  FlatList,
+  TouchableOpacity
+} from 'react-native';
+
+import {AppBar} from '../../components/AppBar';
+
+import {colors} from '../../config/styles';
+import Images from '../../config/Images';
+
+const {width, height} = Dimensions.get('window');
+
+
+
+
+const Home = props => {
+
+  const subjectData =[
+    {image: Images.ImageCapture,
+    subjectName:'Math Scanner',
+    subjectSubName:'Image',
+     press: () => props.navigation.navigate('Math_Scanner')
+   },
+   {image: Images.AugmentedReality,
+    subjectName:'AR Math Solver',
+    subjectSubName:'Image',
+    press: () => props.navigation.navigate('AR_Math_Solver')
+   },
+   {image: Images.Chat,
+    subjectName:'Algebraic Assistant ',
+    subjectSubName:'Image',
+    press: () => props.navigation.navigate('Algebraic_Assistant')
+   },
+   
+  ]
+
+  const SubjectItem = ({subjects}) => {
+    return (
+      <TouchableOpacity
+        activeOpacity={0.0}
+        onPress={subjects.item.press}
+        style={styles.subjectItemBtn}>
+        <Image
+          style={styles.subjectItemImgStyle}
+          source={subjects.item.image}
+        />
+        <Text style={styles.subjName}>{subjects.item.subjectName}</Text>
+        {/* <Text style={styles.subjSubName}>{subjects.item.subjectSubName}</Text> */}
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={{flex: 1}}>
+      <AppBar
+        navigation={props.navigation}
+        title={'Home'}
+        isShowBack={false}
+        isShowHamberger={true}
+        isShowProfile={false}
+      />
+      <View style={styles.header}>
+        <Image source={Images.Splash} style={styles.imgStyles} />
+      </View>
+
+      <View>
+        <FlatList
+          data={subjectData}
+          style={{paddingHorizontal: 20, marginTop: -60, marginBottom: 80}}
+          contentContainerStyle={{alignItems: 'center'}}
+          showsVerticalScrollIndicator={false}
+          numColumns={2}
+          // keyExtractor={item=> item.value}
+          renderItem={item => <SubjectItem subjects={item} />}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {flex: 1, position: 'relative'},
+  header: {
+    width: '100%',
+    height: height / 2.5,
+    padding: 30,
+    backgroundColor: colors.blackColor,
+    position: 'relative',
+  },
+  imgStyles: {
+    position: 'absolute',
+    opacity: 1,
+    top: 60,
+    left: 90,
+    borderRadius: 200,
+    width: 200,
+    height: 200,
+  },
+  subjectItemImgStyle: {
+    width: width / 2.2,
+    height: height / 5,
+    borderRadius: 10,
+  },
+  subjectItemBtn: {
+    backgroundColor: colors.blackColor,
+    margin: 10,
+    width: width / 2.2,
+    height: height / 3.5,
+    borderRadius: 10,
+    // padding: 15,
+    shadow: '#9e9808',
+    elevation: 5,
+  },
+  subjName:{
+    alignContent:'center',
+    justifyContent:'center',
+    alignItems:'center',
+    alignSelf:'center',
+    paddingTop:20,
+    fontWeight:'bold',
+  }
+  
+});
+
+export default Home;

app/screens/imagecapture/ImageCapture.js

+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  View,
+  TextInput,
+  ScrollView,
+  Dimensions,
+  StyleSheet,
+  SafeAreaView,
+  Image,
+  FlatList,
+  TouchableOpacity,
+} from 'react-native';
+
+import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
+
+import {colors} from '../../config/styles';
+
+import Images from '../../config/Images';
+import TextInputField from '../../components/TextInputField';
+import {Button} from '../../components/Button';
+import Background from '../../components/Background';
+import {AppBar} from '../../components/AppBar';
+
+const {width, height} = Dimensions.get('window');
+
+const ImageUpload = props => {
+  const [image, setImage] = useState('');
+  const [imagePath, setImagePath] = useState(null);
+  const [imageFileName, setImageFileName] = useState('');
+
+  const imgDataList = [
+    {
+      image: Images.Camera,
+      subjectName: 'Choose Camara',
+      subjectSubName: 'Image',
+      value: 1,
+      press: () => chooseCamera(),
+    },
+    {
+      image: Images.Gallary,
+      subjectName: 'Choose Gallery',
+      subjectSubName: 'Image',
+      value: 2,
+      press: () => chooseLib(),
+    },
+  ];
+
+  const SubjectItem = ({subjects}) => {
+    return (
+      <TouchableOpacity
+        activeOpacity={0.0}
+        onPress={subjects.item.press}
+        style={styles.subjectItemBtn}>
+        <Image
+          style={styles.subjectItemImgStyle}
+          source={subjects.item.image}
+        />
+        <Text style={styles.subjName}>{subjects.item.subjectName}</Text>
+        {/* <Text style={styles.subjSubName}>{subjects.item.subjectSubName}</Text> */}
+      </TouchableOpacity>
+    );
+  };
+
+  const setUser = () => {
+    setConfig();
+  };
+
+  const getPlatformPath = response => {
+    return Platform.select({
+      android: {value: response.assets[0].uri},
+      ios: {value: response.assets[0].uri},
+    });
+  };
+
+  /**
+   * Get the file name and handle the invalid null case
+   */
+  const getFileName = (name, path) => {
+    console.log(name + path + 'hhhhhh');
+    if (name != null) {
+      return name;
+    }
+
+    // if (Platform.OS === "ios") {
+    //     path = "~" + path.substring(path.indexOf("/Documents"));
+    // }
+    return path.split('/').pop();
+  };
+
+  const getPlatformURI = imagePath => {
+    let imgSource = imagePath;
+
+    console.log('imagePath', isNaN(imagePath));
+    if (isNaN(imagePath)) {
+      imgSource = {uri: imagePath};
+      if (Platform.OS == 'android') {
+        imgSource.uri = imgSource.uri;
+      }
+    } else {
+      if (image !== '') {
+        imgSource = {uri: image};
+        if (Platform.OS == 'android') {
+          imgSource.uri = imgSource.uri;
+        }
+      } else {
+        imgSource = null;
+      }
+    }
+    return imgSource;
+  };
+
+  const chooseLib = () => {
+    var options = {
+      title: 'Select Image',
+      storageOptions: {
+        skipBackup: true, // do not backup to iCloud
+        path: 'images', // store camera images under Pictures/images for android and Documents/images for iOS
+      },
+    };
+    launchImageLibrary(options, response => {
+      if (response.didCancel) {
+      } else if (response.error) {
+        console.log('ImagePicker Error: ', response.error);
+      } else if (response.customButton) {
+        console.log('User tapped custom button: ', response.customButton);
+      } else {
+        let path = getPlatformPath(response).value;
+        let fileName = getFileName(response.fileName, path);
+        setImagePath(path);
+        setImageFileName(fileName);
+        console.log(fileName);
+        // getUrl(path, fileName);
+      }
+    });
+  };
+
+  const chooseCamera = () => {
+    var options = {
+      title: 'Select Image',
+      storageOptions: {
+        skipBackup: true, // do not backup to iCloud
+        path: 'images', // store camera images under Pictures/images for android and Documents/images for iOS
+      },
+    };
+    launchCamera(options, response => {
+      if (response.didCancel) {
+      } else if (response.error) {
+        console.log('ImagePicker Error: ', response.error);
+      } else if (response.customButton) {
+        console.log('User tapped custom button: ', response.customButton);
+      } else {
+        let path = getPlatformPath(response).value;
+        let fileName = getFileName(response.fileName, path);
+        setImagePath(path);
+        setImageFileName(fileName);
+        // getUrl(path, fileName);
+      }
+    });
+  };
+
+  let imgSource = getPlatformURI(imagePath);
+  console.log(imgSource)
+
+  const clearImage =()=>{
+    getPlatformURI(null)
+    setImagePath(null);
+    setImageFileName(null);
+  }
+
+  return (
+    <SafeAreaView>
+      <View style={{alignItems: 'center', width: 460}}>
+        <AppBar
+          navigation={props.navigation}
+          title={''}
+          isShowBack={false}
+          isShowHamberger={true}
+          isShowProfile={false}
+        />
+        <Background
+          source={Images.BG}
+          resizeMode="cover"
+          style={styles.mainComp}>
+          <View
+            style={{
+              justifyContent: 'center',
+              alignItems: 'center',
+              paddingRight: 60,
+              paddingBottom: 20,
+            }}>
+            <Text
+              style={{
+                color: 'white',
+                fontSize: 30,
+                fontWeight: 'bold',
+              }}>
+              Math Scanner
+            </Text>
+          </View>
+
+          <View
+            style={{
+              backgroundColor: 'white',
+              height: 700,
+              width: 460,
+              borderTopLeftRadius: 130,
+              paddingTop: 20,
+            }}>
+            <View style={{paddingTop: 30, paddingBottom: 50}}></View>
+            <View style={{width: 380}}>
+              <View style={{paddingTop: 40, paddingBottom: 20}}>
+                <View style={{marginTop: 3}}>
+                {imgSource==null?  <FlatList
+                    data={imgDataList}
+                    style={{
+                      paddingHorizontal: 20,
+                      marginTop: -60,
+                      marginBottom: 80,
+                    }}
+                    contentContainerStyle={{alignItems: 'center'}}
+                    showsVerticalScrollIndicator={false}
+                    numColumns={1}
+                    keyExtractor={item => item.value}
+                    renderItem={item => <SubjectItem subjects={item} />}
+                  />:  
+                  <View style={{alignContent:'center',justifyContent:"center",alignItems:'center'}}>
+                      <Image style={styles.image} source={imgSource} />
+                      <Text style={{color:colors.blackColor, padding:10}}>This is demo answer</Text>
+                      <TouchableOpacity onPress={()=> clearImage()}>
+                         <Text style={{color:colors.red, padding:10}}>Clear Image</Text>
+                      </TouchableOpacity>
+                  </View>
+
+                }
+              
+                 
+                </View>
+              </View>
+            </View>
+          </View>
+        </Background>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomView: {
+    flex: 1,
+    backgroundColor: 'white',
+    bottom: 40,
+  },
+  image: {
+    color: 'black',
+    width: width / 1.5,
+    height: height / 2,
+  
+  },
+
+  buttonStyle: {
+    margin: 80,
+    padding: 20,
+    borderRadius: 5,
+    color: '#000',
+  },
+  mainComp: {
+    paddingVertical: 20,
+    paddingHorizontal: 16,
+    position: 'relative',
+  },
+  bottomView: {
+    backgroundColor: 'white',
+  },
+  eightyWidthStyle: {
+    flexDirection: 'row',
+    width: '80%',
+    marginBottom: 10,
+    justifyContent: 'center',
+  },
+  camOrlibStyles: {
+    height: 30,
+    backgroundColor: colors.secondaryColor2,
+    margin: 10,
+    borderRadius: 20,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingTop: 2,
+  },
+
+  subjectItemImgStyle: {
+    width: width / 2.5,
+    height: height / 5,
+    borderRadius: 10,
+  },
+  subjectItemBtn: {
+    backgroundColor: colors.blackColor,
+    margin: 10,
+    width: width / 2.5,
+    height: height / 3.5,
+    borderRadius: 10,
+    // padding: 15,
+    shadow: '#9e9808',
+    elevation: 5,
+  },
+  subjName: {
+    alignContent: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+    paddingTop: 20,
+    fontWeight: 'bold',
+  },
+});
+
+export default ImageUpload;

app/screens/onboarding/LoginorSignUp.js

+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  View,
+  ImageBackground,
+  StyleSheet,
+  SafeAreaView,
+  Dimensions,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {connect} from 'react-redux';
+
+import Images from '../../config/Images';
+import {colors, fontWeights} from '../../config/styles';
+import Background from '../../components/Background';
+import {Button} from '../../components/Button';
+
+const {width, height} = Dimensions.get('window');
+
+const LoginorSignup = props => {
+  useEffect(() => {
+    // const timer = setTimeout(() => {
+    //   props.navigation.navigate('login');
+    // }, 3000);
+    // return () => clearInterval(timer);
+  }, []);
+
+  const clickLogin = () =>{
+    props.navigation.navigate('login')
+  }
+  const clickSignup= () =>{
+    props.navigation.navigate('register')
+  }
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <ImageBackground
+        source={Images.BG}
+        resizeMode="cover"
+        style={styles.mainComp}>
+        <View
+          style={styles.imageBgStyle}>
+          <Image style={styles.tinyLogo} source={Images.Splash} />
+        </View>
+        <View>
+          <Text style={styles.textStyle}>Please click Login or Sign Up</Text>
+        </View>
+        <View>
+          <Button
+            buttonStyle={{color: colors.primaryColor1}}
+            onPressBtn={() => clickLogin()}
+            addText={'Login'}
+          />
+          <View style={{padding: 20}}></View>
+          <Button
+            buttonStyle={{
+              backgroundColor: 'none',
+              borderColor: colors.primaryColor1,
+              borderWidth: 2,
+            }}
+            onPressBtn={() => clickSignup()}
+            addText={'SignUp'}
+          />
+        </View>
+      </ImageBackground>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  textStyle: {color: colors.white, paddingTop: 70,paddingLeft: 15,paddingBottom: 40, fontWeight: fontWeights.semiMedium, fontSize: 18},
+  mainComp: {
+    flex: 1,
+    paddingVertical: 40,
+    paddingHorizontal: 16,
+    position: 'relative',
+  },
+  tinyLogo: {
+    width: width / 1.3,
+    height: height / 3,
+  },
+  imageBgStyle:{
+    alignContent: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 60,
+  }
+});
+
+const mapStateToProps = state => {
+  return {
+    // isLoggedIn: state.common.isLoggedIn,
+  };
+};
+
+function mapDispatchToProps(dispatch) {
+  return {};
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LoginorSignup);

app/screens/onboarding/Splash.js

+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  View,
+  ImageBackground,
+  StyleSheet,
+  SafeAreaView,
+  Dimensions,
+  TouchableOpacity,
+  Image
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {connect} from 'react-redux';
+
+import Images from '../../config/Images';
+import {colors} from '../../config/styles';
+import Background from '../../components/Background';
+
+
+const {width,height} = Dimensions.get('window');
+
+const Splash = props => {
+
+    useEffect(()=>{
+        const timer = setTimeout(() => {
+                props.navigation.navigate('loginorsignup')
+        
+          }, 3000);
+      
+          return () => clearInterval(timer);
+    },[])
+ 
+
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <ImageBackground
+        source={Images.BG}
+        resizeMode="cover"
+        style={styles.mainComp}>
+        <View style={{alignContent:'center',justifyContent:'center', alignItems:'center', paddingTop:60}}>
+            <Image
+            style={styles.tinyLogo}
+            source={Images.Splash}
+            />
+        </View>
+      </ImageBackground>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainComp: {
+    flex: 1,
+    paddingVertical: 40,
+    paddingHorizontal: 16,
+    position: 'relative',
+  },
+  tinyLogo: {
+    width: width/1.2,
+    height: height/2,
+  },
+});
+
+const mapStateToProps = state => {
+  return {
+   // isLoggedIn: state.common.isLoggedIn,
+  };
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+   
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Splash);

app/screens/onboarding/login/Login.js

+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  View,
+  TextInput,
+  ScrollView,
+  Dimensions,
+  StyleSheet,
+  SafeAreaView,
+  ImageBackground,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+
+// import {TextInput, HelperText} from 'react-native-paper';
+
+import {colors} from '../../../config/styles';
+import {AppBar} from '../../../components/AppBar';
+import {GET_LOGIN_OK} from './LoginActionTypes';
+import {connect} from 'react-redux';
+
+import Images from '../../../config/Images';
+import TextInputField from '../../../components/TextInputField';
+import {Button} from '../../../components/Button';
+import Background from '../../../components/Background';
+
+const {width, height} = Dimensions.get('window');
+
+const Login = props => {
+  const [password, setPassword] = useState('');
+  const [isValidPassword, setIsValidPassword] = useState(true);
+  const [email, setEmail] = useState('');
+  const [isValidEmail, setIsValidEmail] = useState(true);
+  const [isDisableButton, setIsDisableButton] = useState(true);
+
+  const setUser = () => {
+    setConfig();
+  };
+
+  const getUser = () => {
+    console.log(getConfig());
+  };
+
+  const emailValidation = username => {
+    const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+    if (reg.test(email) === true) {
+      console.log('valid');
+      setIsValidEmail(true);
+    } else {
+      console.log('invalid');
+      setIsValidEmail(false);
+    }
+  };
+
+  const emailValidationTextChange = email => {
+    setEmail(email);
+  };
+
+
+  const passwordValidation = password => {
+       if(password!=''){
+        setIsValidPassword(true)
+       }else{
+        setIsValidPassword(false)
+       }
+  };
+
+  const passwordValidationTextChange = email => {
+    setPassword(email);
+  };
+
+  useEffect(() => {
+    console.log('loginStatus');
+    if (props.loginStatus != null || props.loginStatus != undefined) {
+      if (props?.loginStatus == true) {
+      //  props.navigation.navigate('Home');
+      }
+    }
+  }, [props.loginStatus]);
+
+  const clickLogin = () => {
+   props.changeLoginStatus(true);
+    //props.navigation.navigate('Home');
+  };
+
+  useEffect(() => {
+   console.log("eail",email)
+   console.log(password)
+   console.log(isValidEmail)
+   console.log(isValidPassword)
+
+     if(email!='' && password!='' && isValidEmail==true && isValidPassword ==true){
+      setIsDisableButton(false)
+     }else{
+      setIsDisableButton(true)
+     }
+  }, [email,password, isValidEmail, isValidPassword]);
+
+  return (
+    <SafeAreaView style={{flex: 1}}>
+      <View style={{alignItems: 'center', width: 460}}>
+        <Background
+          source={Images.BG}
+          resizeMode="cover"
+          style={styles.mainComp}>
+          <Text
+            style={{
+              color: 'white',
+              fontSize: 54,
+              fontWeight: 'bold',
+              marginVertical: 10,
+              paddingLeft: 30,
+              paddingBottom: 20,
+            }}>
+            Login
+          </Text>
+          <View
+            style={{
+              backgroundColor: 'white',
+              height: 700,
+              width: 460,
+              borderTopLeftRadius: 130,
+              paddingTop: 100,
+              paddingLeft: 60,
+            }}>
+            <Text
+              style={{
+                fontSize: 30,
+                fontWeight: 'bold',
+                color: colors.blackColor,
+              }}>
+              Welcome Back
+            </Text>
+            <Text style={{color: colors.blackColor}}>
+              Login to your account
+            </Text>
+            <View style={{paddingTop: 30, paddingBottom: 50}}>
+              <TextInputField
+                placeholder="Email"
+                onChangeText={text => emailValidationTextChange(text)}
+                onSubmitEditing={event =>
+                  emailValidation(event.nativeEvent.text)
+                }></TextInputField>
+              {isValidEmail == false ? (
+                <Text style={{color: colors.red, paddingBottom: 15}}>
+                  {' '}
+                  * Please enter valid Email
+                </Text>
+              ) : null}
+
+              <TextInputField placeholder="Password"  onChangeText={text => passwordValidationTextChange(text)}
+                onSubmitEditing={event =>
+                  passwordValidation(event.nativeEvent.text)
+                } secureTextEntry={true}></TextInputField>
+              {isValidPassword == false ? (
+                <Text style={{color: colors.red, paddingBottom: 15}}>
+                  {' '}
+                  * Please enter  Password
+                </Text>
+              ) : null}
+            </View>
+            <View style={{width: 280}}>
+              <Button
+                buttonStyle={{backgroundColor: isDisableButton ?'#777':colors.primaryColor1}}
+                onPressBtn={() => clickLogin()}
+                addText={'Login'}
+                disabled={isDisableButton}
+              />
+
+              <View
+                style={{
+                  flexDirection: 'row',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  paddingTop: 20,
+                }}>
+                <Text style={{fontSize: 16, color: colors.blackColor}}>
+                  Dont have an account{' '}
+                </Text>
+                <TouchableOpacity
+                  onPress={() => {
+                    props.navigation.navigate('register');
+                  }}>
+                  <Text
+                    style={{
+                      fontSize: 16,
+                      fontWeight: 'bold',
+                      color: colors.blackColor,
+                    }}>
+                    Sign Up
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </View>
+        </Background>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomView: {
+    flex: 1,
+    backgroundColor: 'white',
+    bottom: 40,
+  },
+  inputUserName: {
+    height: 40,
+    marginLeft: 50,
+    marginRight: 50,
+    marginBottom: 20,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5,
+    color: '#000',
+  },
+  inputPassword: {
+    height: 40,
+    marginLeft: 50,
+    marginRight: 50,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5,
+    color: '#000',
+  },
+  buttonStyle: {
+    margin: 80,
+    padding: 20,
+    borderRadius: 5,
+    color: '#000',
+  },
+  mainComp: {
+    paddingVertical: 40,
+    paddingHorizontal: 16,
+    position: 'relative',
+  },
+});
+
+const mapStateToProps = (state, props) => {
+  return {
+    loginStatus: state.login.loginStatus,
+  };
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    changeLoginStatus: loginBody => {
+      dispatch({type: GET_LOGIN_OK, payload: true});
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login);

app/screens/onboarding/login/LoginActionTypes.js

+export const GET_LOGIN = 'GET_LOGIN';
+export const GET_LOGIN_OK = 'GET_LOGIN_OK';
\ No newline at end of file

app/screens/onboarding/login/LoginActions.js

+import {put, takeLatest} from 'redux-saga/effects';
+
+import {GET_LOGIN, GET_LOGIN_OK} from './LoginActionTypes';
+
+import {createUrl, ajaxCall} from '../../../lib/Utils';
+
+const getLogin = function* (payload) {
+    console.log(  payload.payload)
+  const response = yield ajaxCall(
+    createUrl('login'),
+    payload.payload,
+    true,
+    'POST',
+    true,
+  );
+  yield put({
+    type: GET_LOGIN_OK,
+    payload: {
+      data: response,
+    },
+  });
+};
+
+export function* getLoginSaga() {
+  yield takeLatest(GET_LOGIN, getLogin);
+}

app/screens/onboarding/login/LoginReducers.js

+import { GET_LOGIN_OK} from './LoginActionTypes';
+const initialState = {
+    loginStatus: false,
+  };
+  
+  export default (state = initialState, action) => {
+    switch (action.type) {
+      case GET_LOGIN_OK:
+        return {...state, loginStatus: action.payload};
+      default:
+        return state;
+    }
+  };
\ No newline at end of file

app/screens/onboarding/register/Register.js

+import React, {useEffect, useState} from 'react';
+import {
+  Text,
+  View,
+  TextInput,
+  ScrollView,
+  Dimensions,
+  StyleSheet,
+  SafeAreaView,
+  ImageBackground,
+  Image,
+  TouchableOpacity
+} from 'react-native';
+
+// import {TextInput, HelperText} from 'react-native-paper';
+
+import {colors} from '../../../config/styles';
+import {GET_REGISTER} from './RegisterActionTypes';
+import {connect} from 'react-redux';
+
+import Images from '../../../config/Images';
+import TextInputField from '../../../components/TextInputField';
+import {Button} from '../../../components/Button';
+import Background from '../../../components/Background';
+
+const {width, height} = Dimensions.get('window');
+
+const Login = props => {
+  const [password, setPassword] = useState('');
+  const [userName, setUserName] = useState('');
+
+  const emailValidate = () => {
+    const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+    if (reg.test(this.state.email) === true){
+        alert( valid);
+    }
+    else{
+        alert();
+    }
+}
+
+
+  return (
+
+    <SafeAreaView>
+   
+    <View style={{alignItems: 'center', width: 460}}>
+      <Background
+        source={Images.BG}
+        resizeMode="cover"
+        style={styles.mainComp}>
+        <View style={{justifyContent:'center',alignItems:'center',paddingRight:60, paddingBottom: 20}}>
+        <Text
+          style={{
+            color: 'white',
+            fontSize: 48,
+            fontWeight: 'bold',
+           
+           
+          
+          }}>
+          REGISTER
+        </Text>
+        <Text style={{color:'white'}}>Create a new account</Text>
+        </View>
+      
+        <ScrollView
+          style={{
+            backgroundColor: 'white',
+            height: 700,
+            width: 460,
+            borderTopLeftRadius: 130,
+            paddingTop: 20,
+            paddingLeft: 60,
+          }}>
+        
+          <View style={{paddingTop: 30, paddingBottom: 50}}>
+            <TextInputField placeholder="First Name" ></TextInputField>
+            <TextInputField placeholder="Last Name"></TextInputField>
+            <TextInputField placeholder="Email/Username"></TextInputField>
+            <TextInputField placeholder="Contact Number"></TextInputField>
+            <TextInputField placeholder="Password"></TextInputField>
+            <TextInputField placeholder="Confirm Password"></TextInputField>
+          </View>
+          <View style={{width: 280}}>
+            <Button
+              buttonStyle={{color: colors.primaryColor1}}
+              onPressBtn={() => clickLogin()}
+              addText={'Sign Up'}
+            />
+
+            <View
+              style={{
+                flexDirection: 'row',
+                display: 'flex',
+                justifyContent: 'center',
+                paddingTop: 20
+              }}>
+              <Text style={{fontSize: 16,color:colors.blackColor}}>Already have an account </Text>
+              <TouchableOpacity
+                onPress={() => {
+                  props.navigation.navigate('login');
+                }}>
+                <Text
+                  style={{
+                    fontSize: 16,
+                    fontWeight: 'bold',
+                    color: colors.blackColor,
+                  }}>
+                 Login
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </ScrollView>
+
+      </Background>
+    </View>
+  </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomView: {
+    flex: 1,
+    backgroundColor: 'white',
+    bottom: 40,
+  },
+  inputUserName: {
+    height: 40,
+    marginLeft: 50,
+    marginRight: 50,
+    marginBottom: 20,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5,
+    color: '#000',
+  },
+  inputPassword: {
+    height: 40,
+    marginLeft: 50,
+    marginRight: 50,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5,
+    color: '#000',
+  },
+  buttonStyle: {
+    margin: 80,
+    padding: 20,
+    borderRadius: 5,
+    color: '#000',
+  },
+  mainComp: {
+    paddingVertical: 20,
+    paddingHorizontal: 16,
+    position: 'relative',
+  },
+});
+
+const mapStateToProps = (state, props) => {
+  return {
+   
+  };
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login);

app/screens/onboarding/register/RegisterActionTypes.js

+export const GET_REGISTER = 'GET_REGISTER';
+export const GET_REGISTER_OK = 'GET_REGISTER_OK';
\ No newline at end of file