mobile app code add

Mobile App/.bundle/config

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

Mobile App/.eslintrc.js

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

Mobile App/.expo/README.md

+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

Mobile App/.expo/settings.json

+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

Mobile App/.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*
+
+# testing
+/coverage

Mobile App/.prettierrc.js

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

Mobile App/.watchmanconfig

+{}

Mobile App/App.js

+import React from 'react';
+import Providers from './src/auth/Providers';
+import { ToastProvider } from 'react-native-toast-notifications';
+
+
+const App = () => {
+  return (
+    <ToastProvider>
+      <Providers />
+    </ToastProvider>
+  )
+}
+
+export default App
\ No newline at end of file

Mobile App/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.12'

Mobile App/README.md

+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the _root_ of your React Native project:
+
+```bash
+# using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+
+This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
+
+## Step 3: Modifying your App
+
+Now that you have successfully run the app, let's modify it.
+
+1. Open `App.tsx` in your text editor of choice and edit some lines.
+2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+
+   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.

Mobile App/Test.js

+import { View, Text } from 'react-native'
+import React from 'react'
+
+const Test = () => {
+  return (
+    <View className="bg-white">
+      <Text className="text-4xl">Test</Text>
+    </View>
+  )
+}
+
+export default Test
\ No newline at end of file

Mobile App/__tests__/App.test.tsx

+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: import explicitly to use the types shiped with jest.
+import {it} from '@jest/globals';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});

Mobile App/android/app/build.gradle

+apply plugin: "com.android.application"
+apply plugin: "com.facebook.react"
+apply plugin: 'com.google.gms.google-services'
+
+/**
+ * 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 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:+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    compileSdkVersion rootProject.ext.compileSdkVersion
+
+    namespace "com.pomegra"
+    defaultConfig {
+        applicationId "com.pomegra"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+    }
+    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"
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    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
+    }
+}
+
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
\ No newline at end of file

Mobile App/android/app/google-services.json

+{
+  "project_info": {
+    "project_number": "1044222021245",
+    "firebase_url": "https://clean-57425-default-rtdb.asia-southeast1.firebasedatabase.app",
+    "project_id": "clean-57425",
+    "storage_bucket": "clean-57425.appspot.com"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:1044222021245:android:bcb562dbe1f997c58aeb14",
+        "android_client_info": {
+          "package_name": "com.pomegra"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "1044222021245-igrh77id1otkivrshrpennv60jp4gro1.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyDwb6zpS8kT9vBsnWs7Q6JtSvSnWPvWino"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": [
+            {
+              "client_id": "1044222021245-igrh77id1otkivrshrpennv60jp4gro1.apps.googleusercontent.com",
+              "client_type": 3
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}
\ No newline at end of file

Mobile App/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:

Mobile App/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>

Mobile App/android/app/src/debug/java/com/pomegra/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.pomegra;
+
+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());
+      }
+    }
+  }
+}

Mobile App/android/app/src/main/AndroidManifest.xml

+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <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>

Mobile App/android/app/src/main/java/com/pomegra/MainActivity.java

+package com.pomegra;
+
+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 "Pomegra";
+  }
+
+  /**
+   * 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());
+  }
+}

Mobile App/android/app/src/main/java/com/pomegra/MainApplication.java

+package com.pomegra;
+
+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());
+  }
+}

Mobile App/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>

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

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

Mobile App/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>

Mobile App/android/app/src/release/java/com/pomegra/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.pomegra;
+
+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.
+  }
+}

Mobile App/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"
+    }
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle")
+        classpath("com.facebook.react:react-native-gradle-plugin")
+        classpath 'com.google.gms:google-services:4.3.15'
+    }
+}

Mobile App/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.182.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

Mobile App/android/gradle/wrapper/gradle-wrapper.properties

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

Mobile App/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/HEAD/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
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
+
+# 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*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045 
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045 
+        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 \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# 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" "$@"

Mobile App/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=.
+@rem This is normally unused
+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% equ 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% equ 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!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

Mobile App/android/settings.gradle

+rootProject.name = 'Pomegra'
+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')

Mobile App/app.json

+{
+  "name": "Pomegra",
+  "displayName": "Pomegra"
+}

Mobile App/babel.config.js

+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: ["nativewind/babel"],
+};

Mobile App/index.js

+/**
+ * @format
+ */
+
+import {AppRegistry} from 'react-native';
+import App from './App';
+import {name as appName} from './app.json';
+
+AppRegistry.registerComponent(appName, () => App);

Mobile App/ios/.xcode.env

+# This `.xcode.env` file is versioned and is used to source the environment
+# used when running script phases inside Xcode.
+# To customize your local environment, you can create an `.xcode.env.local`
+# file that is not versioned.
+
+# NODE_BINARY variable contains the PATH to the node executable.
+#
+# Customize the NODE_BINARY variable here.
+# For example, to use nvm with brew, add the following line
+# . "$(brew --prefix nvm)/nvm.sh" --no-use
+export NODE_BINARY=$(command -v node)

Mobile App/ios/Podfile

+# Resolve react_native_pods.rb with node to allow for hoisting
+require Pod::Executable.execute_command('node', ['-p',
+  'require.resolve(
+    "react-native/scripts/react_native_pods.rb",
+    {paths: [process.argv[1]]},
+  )', __dir__]).strip
+
+platform :ios, min_ios_version_supported
+prepare_react_native_project!
+
+# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
+# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
+#
+# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
+# ```js
+# module.exports = {
+#   dependencies: {
+#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
+# ```
+flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
+
+linkage = ENV['USE_FRAMEWORKS']
+if linkage != nil
+  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
+  use_frameworks! :linkage => linkage.to_sym
+end
+
+target 'Pomegra' do
+  config = use_native_modules!
+
+  # Flags change depending on the env values.
+  flags = get_default_flags()
+
+  use_react_native!(
+    :path => config[:reactNativePath],
+    # Hermes is now enabled by default. Disable by setting this flag to false.
+    :hermes_enabled => flags[:hermes_enabled],
+    :fabric_enabled => flags[:fabric_enabled],
+    # Enables Flipper.
+    #
+    # Note that if you have use_frameworks! enabled, Flipper will not work and
+    # you should disable the next line.
+    :flipper_configuration => flipper_config,
+    # An absolute path to your application root.
+    :app_path => "#{Pod::Config.instance.installation_root}/.."
+  )
+
+  target 'PomegraTests' do
+    inherit! :complete
+    # Pods for testing
+  end
+
+  post_install do |installer|
+    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
+    react_native_post_install(
+      installer,
+      config[:reactNativePath],
+      :mac_catalyst_enabled => false
+    )
+    __apply_Xcode_12_5_M1_post_install_workaround(installer)
+  end
+end

Mobile App/ios/Pomegra.xcodeproj/xcshareddata/xcschemes/Pomegra.xcscheme

+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "1210"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+               BuildableName = "Pomegra.app"
+               BlueprintName = "Pomegra"
+               ReferencedContainer = "container:Pomegra.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "PomegraTests.xctest"
+               BlueprintName = "PomegraTests"
+               ReferencedContainer = "container:Pomegra.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+   </TestAction>
+   <LaunchAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "Pomegra.app"
+            BlueprintName = "Pomegra"
+            ReferencedContainer = "container:Pomegra.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "Pomegra.app"
+            BlueprintName = "Pomegra"
+            ReferencedContainer = "container:Pomegra.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

Mobile App/ios/Pomegra/AppDelegate.h

+#import <RCTAppDelegate.h>
+#import <UIKit/UIKit.h>
+
+@interface AppDelegate : RCTAppDelegate
+
+@end

Mobile App/ios/Pomegra/AppDelegate.mm

+#import "AppDelegate.h"
+
+#import <React/RCTBundleURLProvider.h>
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+  self.moduleName = @"Pomegra";
+  // You can add your custom initial props in the dictionary below.
+  // They will be passed down to the ViewController used by React Native.
+  self.initialProps = @{};
+
+  return [super application:application didFinishLaunchingWithOptions:launchOptions];
+}
+
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+#if DEBUG
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
+#else
+  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
+}
+
+@end

Mobile App/ios/Pomegra/Images.xcassets/AppIcon.appiconset/Contents.json

+{
+  "images" : [
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "20x20"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "20x20"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "29x29"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "29x29"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "40x40"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "40x40"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "60x60"
+    },
+    {
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "scale" : "1x",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Mobile App/ios/Pomegra/Images.xcassets/Contents.json

+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

Mobile App/ios/Pomegra/Info.plist

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>Pomegra</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>$(MARKETING_VERSION)</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>$(CURRENT_PROJECT_VERSION)</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>localhost</key>
+			<dict>
+				<key>NSExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+			</dict>
+		</dict>
+	</dict>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+</dict>
+</plist>

Mobile App/ios/Pomegra/LaunchScreen.storyboard

+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Pomegra" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
+                                <rect key="frame" x="0.0" y="202" width="375" height="43"/>
+                                <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="MN2-I3-ftu">
+                                <rect key="frame" x="0.0" y="626" width="375" height="21"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                        <constraints>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="bottom" secondItem="MN2-I3-ftu" secondAttribute="bottom" constant="20" id="OZV-Vh-mqD"/>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
+                            <constraint firstItem="MN2-I3-ftu" firstAttribute="centerX" secondItem="Bcu-3y-fUS" secondAttribute="centerX" id="akx-eg-2ui"/>
+                            <constraint firstItem="MN2-I3-ftu" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" id="i1E-0Y-4RG"/>
+                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
+                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" symbolic="YES" id="x7j-FC-K8j"/>
+                        </constraints>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="52.173913043478265" y="375"/>
+        </scene>
+    </scenes>
+</document>

Mobile App/ios/Pomegra/main.m

+#import <UIKit/UIKit.h>
+
+#import "AppDelegate.h"
+
+int main(int argc, char *argv[])
+{
+  @autoreleasepool {
+    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
+  }
+}

Mobile App/ios/PomegraTests/Info.plist

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>BNDL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+</dict>
+</plist>

Mobile App/ios/PomegraTests/PomegraTests.m

+#import <UIKit/UIKit.h>
+#import <XCTest/XCTest.h>
+
+#import <React/RCTLog.h>
+#import <React/RCTRootView.h>
+
+#define TIMEOUT_SECONDS 600
+#define TEXT_TO_LOOK_FOR @"Welcome to React"
+
+@interface PomegraTests : XCTestCase
+
+@end
+
+@implementation PomegraTests
+
+- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test
+{
+  if (test(view)) {
+    return YES;
+  }
+  for (UIView *subview in [view subviews]) {
+    if ([self findSubviewInView:subview matching:test]) {
+      return YES;
+    }
+  }
+  return NO;
+}
+
+- (void)testRendersWelcomeScreen
+{
+  UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
+  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
+  BOOL foundElement = NO;
+
+  __block NSString *redboxError = nil;
+#ifdef DEBUG
+  RCTSetLogFunction(
+      ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
+        if (level >= RCTLogLevelError) {
+          redboxError = message;
+        }
+      });
+#endif
+
+  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
+    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+
+    foundElement = [self findSubviewInView:vc.view
+                                  matching:^BOOL(UIView *view) {
+                                    if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
+                                      return YES;
+                                    }
+                                    return NO;
+                                  }];
+  }
+
+#ifdef DEBUG
+  RCTSetLogFunction(RCTDefaultLogFunction);
+#endif
+
+  XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
+  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
+}
+
+@end

Mobile App/jest.config.js

+module.exports = {
+  preset: 'react-native',
+};

Mobile App/metro.config.js

+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Mobile App/package.json

+{
+  "name": "Pomegra",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "lint": "eslint .",
+    "start": "react-native start",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.19.3",
+    "@react-native-community/geolocation": "^3.0.6",
+    "@react-native-community/progress-view": "^1.4.2",
+    "@react-native-community/slider": "^4.4.3",
+    "@react-native-firebase/app": "^18.3.1",
+    "@react-native-firebase/auth": "^18.3.1",
+    "@react-native-firebase/firestore": "^18.3.1",
+    "@react-navigation/bottom-tabs": "^6.5.8",
+    "@react-navigation/native": "^6.1.7",
+    "@react-navigation/native-stack": "^6.9.13",
+    "axios": "^1.4.0",
+    "nativewind": "^2.0.11",
+    "react": "18.2.0",
+    "react-native": "0.72.3",
+    "react-native-chart-kit": "^6.12.0",
+    "react-native-image-picker": "^5.6.1",
+    "react-native-image-resizer": "^1.4.5",
+    "react-native-linear-gradient": "^2.8.2",
+    "react-native-safe-area-context": "^4.7.1",
+    "react-native-screens": "^3.24.0",
+    "react-native-svg": "^13.13.0",
+    "react-native-toast-notifications": "^3.4.0",
+    "react-native-vector-icons": "^10.0.0",
+    "tailwindcss": "^3.3.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
+    "@react-native/eslint-config": "^0.72.2",
+    "@react-native/metro-config": "^0.72.9",
+    "@tsconfig/react-native": "^3.0.0",
+    "@types/react": "^18.0.24",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.2.1",
+    "eslint": "^8.19.0",
+    "jest": "^29.2.1",
+    "metro-react-native-babel-preset": "0.76.7",
+    "prettier": "^2.4.1",
+    "react-test-renderer": "18.2.0",
+    "typescript": "4.8.4"
+  },
+  "engines": {
+    "node": ">=16"
+  }
+}

Mobile App/src/Home.js

+import { View, Text, SafeAreaView, ScrollView, TouchableOpacity, Image, RefreshControl, StatusBar } from 'react-native';
+import React, { useContext, useState, useEffect } from 'react';
+import { useNavigation } from '@react-navigation/core';
+import { AuthContext } from './auth/AuthProvider';
+import img from './assets/home3.png';
+import LinearGradient from 'react-native-linear-gradient';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Cloud from 'react-native-vector-icons/Feather';
+import Soil from 'react-native-vector-icons/AntDesign';
+import axios from 'axios';
+import firestore from '@react-native-firebase/firestore';
+
+
+const Home = () => {
+  
+  const { farmData } = useContext(AuthContext);
+  const [greeting, setGreeting] = useState();
+  const { user } = useContext(AuthContext);
+  const [humidity, setHumidity] = useState('');
+  const [temperature, setTemperature] = useState('');
+  const [deviceId, setDeviceId] = useState('DH0001');
+  const [wind, setWind] = useState();
+  const [refreshing, setRefreshing] = useState(false);
+  const navigation = useNavigation();
+
+  const handleGreeting = () => {
+    const currentHour = new Date().getHours();
+    let newGreeting;
+    if (currentHour >= 5 && currentHour < 12) {
+      newGreeting = 'Good morning';
+    } else if (currentHour >= 12 && currentHour < 18) {
+      newGreeting = 'Good afternoon';
+    } else if (currentHour >= 18 && currentHour < 24) {
+      newGreeting = 'Good evening';
+    } else {
+      newGreeting = 'Good night';
+    }
+    setGreeting(newGreeting);
+  };
+
+
+  const getDeviceID = async () => {
+    try {
+      const userDocRef = firestore().collection('devices').doc(user.uid);
+      const userDocSnapshot = await userDocRef.get();
+      if (userDocSnapshot.exists) {
+        const userData = userDocSnapshot.data();
+        if (userData.deviceId) {
+          //setDeviceId(userData.deviceId);
+          getClimate(); // Call getClimate after setting the deviceId
+        } else {
+          console.log('Device ID not found in user data');
+        }
+      } else {
+        console.log('User document not found in Firestore');
+      }
+    } catch (error) {
+      console.error('Error getting device ID:', error);
+    }
+  };
+
+
+  const getWind = async () => {
+    try {
+      const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${farmData.latitude}&lon=${farmData.longitude}&appid=09835ebba2c6a45b02dd9a232e6068c6`);
+      if (response.data.wind) {
+        const windSpeedMS = response.data.wind.speed;
+        const windSpeedKMH = (windSpeedMS * 3.6).toFixed(1);
+        setWind(windSpeedKMH);
+      } else {
+        console.log('Error getting wind data');
+      }
+    } catch (error) {
+      console.log("An error occurred:", error.message);
+    }
+  }
+
+  const getClimate = async (deviceId) => {
+    try {
+      const response = await axios.get(`http://192.168.177.130/api/data?deviceID=DH0001`);
+      if (response) {
+        setHumidity(response.data.humidity);
+        setTemperature(response.data.temperature);
+      } else {
+        console.log('Error getting data');
+      }
+    } catch (error) {
+      //console.log("An error occurred:", error.message);
+    }
+  };
+
+
+  // Call handleGreeting when the component mounts to set the initial greeting
+  useEffect(() => {
+    handleGreeting();0
+    getDeviceID();
+    getClimate(); // Initial call
+    getWind();
+    const interval = setInterval(() => {
+      getClimate(); // Fetch climate data every 5 seconds
+    }, 2000); // Interval in milliseconds (5 seconds)
+
+    return () => {
+      clearInterval(interval); // Clear interval when component unmounts
+    };
+  }, []);
+
+
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    await getClimate();
+    setRefreshing(false);
+  };
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
+      <StatusBar backgroundColor="transparent" barStyle="dark-content" />
+      <View className="w-screen h-screen bg-[#ebeaea]" >
+        <ScrollView
+          contentContainerStyle={{ flexGrow: 1 }}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }
+        >
+          <View className="">
+            <Image source={img} className="w-screen h-[30vh] rounded-b-[50px] bg-cover " />
+            <Text className="text-3xl text-center text-white -mt-36">{greeting}</Text>
+          </View>
+
+          <View className="flex-row items-center justify-center w-screen gap-3 mx-auto mt-16">
+            <View className="flex items-center text-black">
+              <TouchableOpacity onPress={() =>
+                navigation.navigate('Quality')
+              } style={{ elevation: 10 }}>
+                <LinearGradient colors={['#f87171', '#fdba74']} className="flex items-center justify-center h-[70px]  rounded-lg w-[70px] shadow" >
+                  <MaterialCommunityIcons name="fruit-pineapple" color="white" size={50} />
+                </LinearGradient>
+              </TouchableOpacity>
+              <Text className="font-light text-black">Quality</Text>
+            </View>
+            <View className="flex items-center text-black">
+              <TouchableOpacity onPress={() =>
+                navigation.navigate('Disease')
+              } style={{ elevation: 10 }}>
+                <LinearGradient colors={['#059669', '#6ee7b7']} className="flex items-center justify-center h-[70px]  rounded-lg w-[70px] shadow" >
+                  <MaterialCommunityIcons name="leaf" color="white" size={50} />
+                </LinearGradient>
+              </TouchableOpacity>
+              <Text className="font-light text-black">Disease</Text>
+            </View>
+            <View className="flex items-center text-black">
+              <TouchableOpacity onPress={() =>
+                navigation.navigate('Climate', { devideID: {deviceId}})
+              } style={{ elevation: 10 }}>
+                <LinearGradient colors={['#2563eb', '#38bdf8']} className="flex items-center justify-center h-[70px]  rounded-lg w-[70px] shadow" >
+                  <Cloud name="cloud-rain" color="white" size={50} />
+                </LinearGradient>
+              </TouchableOpacity>
+              <Text className="font-light text-black">Climate</Text>
+            </View>
+            <View className="flex items-center text-black" style={{ elevation: 10 }}>
+              <TouchableOpacity onPress={() =>
+                navigation.navigate('Soil')
+              }>
+                <LinearGradient colors={['#be123c', '#fdba74']} className="flex items-center justify-center h-[70px]  rounded-lg w-[70px] shadow" >
+                  <Soil name="caretdown" color="white" size={50} />
+                </LinearGradient>
+              </TouchableOpacity>
+              <Text className="font-light text-black">Soil</Text>
+            </View>
+          </View>
+          <View className="items-center">
+            <TouchableOpacity className="mt-8" onPress={() =>
+              navigation.navigate('Pest and Disease Forcast')} >
+              <LinearGradient style={{ elevation: 10 }} colors={['#059669', '#34d399']} className="px-4 py-2 rounded-xl w-[250px] items-center">
+                <Text className="text-lg text-white">Pest And Disease Forcast</Text>
+              </LinearGradient>
+            </TouchableOpacity>
+          </View>
+          <View className="flex-row justify-between w-screen gap-1 px-4 mx-auto max-w-[80%] py-4 ">
+            <View className="flex items-center justify-center p-4 bg-white rounded-lg w-36 h-[150px]">
+              {temperature !== '' ? (
+                <>
+                  <Text className="text-3xl font-semibold text-primary">{temperature}°C</Text>
+                  <Text className="text-lg text-center text-gray-500">Current Temperature</Text>
+                </>
+              ) : (
+                <Text className="text-lg font-semibold text-gray-500">Device Offline</Text>
+              )}
+            </View>
+            <View className="flex items-center justify-center p-4 bg-white rounded-lg w-36 h-[150px]">
+              {humidity !== '' ? (
+                <>
+                  <Text className="text-3xl font-semibold text-primary">{humidity}%</Text>
+                  <Text className="text-lg text-center text-gray-500">Current Humidity</Text>
+                </>
+              ) : (
+                <Text className="text-lg font-semibold text-gray-500">Device Offline</Text>
+              )}
+            </View>
+          </View>
+          <View className="flex-row justify-between w-screen gap-1 px-4 mx-auto max-w-[80%]  ">
+            <View className="flex items-center justify-center p-4 bg-white rounded-lg w-36 h-[150px]">
+              {wind !== '' ? (
+                <>
+                  <Text className="text-3xl font-semibold text-primary">{wind}</Text>
+                  <Text className="text-lg text-center text-gray-500">Wind Speed km/h</Text>
+                </>
+              ) : (
+                <Text className="text-lg font-semibold text-gray-500">Device Offline</Text>
+              )}
+            </View>
+            <View className="flex items-center justify-center p-4 bg-white rounded-lg w-36 h-[150px]">
+              {humidity !== '' ? (
+                <>
+                  <Text className="text-3xl font-semibold text-primary">{humidity}%</Text>
+                  <Text className="text-lg text-center text-gray-500">Rain Status</Text>
+                </>
+              ) : (
+                <Text className="text-lg font-semibold text-gray-500">Device Offline</Text>
+              )}
+            </View>
+          </View>
+          <View>
+            
+          </View>
+        </ScrollView>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+
+export default Home;

Mobile App/src/auth/AppStack.js

+import React from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Home from '../Home';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import Disease from '../diseases/Disease';
+import Quality from '../quality/Quality';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Ionicons from 'react-native-vector-icons/AntDesign';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import Profile from '../screens/Profile';
+import ClimateHome from '../climate/ClimateHome';
+import SoilHome from '../soil/SoilHome';
+import FindDisease from '../diseases/FindDisease';
+import FindQuality from '../quality/FindQuality';
+import DiseaseResult from '../diseases/DiseaseResult';
+import Npk from '../soil/Npk';
+import Soilmoisture from '../soil/Soilmoisture';
+import Soiltemprature from '../soil/Soiltemprature';
+import Fertilizers from '../soil/Fertilizers';
+import Notification from '../climate/Notification';
+import QualityResult from '../quality/QualityResult';
+import Settings from '../screens/Settings';
+import DiseaseForcast from '../climate/DiseaseForcast';
+import SpreadResult from '../climate/SpreadResult';
+
+const Tab = createBottomTabNavigator();
+const Stack = createNativeStackNavigator();
+
+
+
+const HomeStack = ({ navigation }) => (
+  <Stack.Navigator>
+    <Stack.Screen options={{ headerShown: false }} name="Homea" component={Home} />
+    <Stack.Screen name="Disease" component={Disease} />
+    <Stack.Screen name="Find" component={FindDisease} />
+    <Stack.Screen name="FindQuality" component={FindQuality} />
+    <Stack.Screen name="Quality" component={Quality} />
+    <Stack.Screen name="Climate" component={ClimateHome} />
+    <Stack.Screen name="Soil" component={SoilHome} />
+    <Stack.Screen name="DiseaseResult" component={DiseaseResult} />
+    <Stack.Screen name="QualityResult" component={QualityResult} />
+    <Stack.Screen name="Npk" component={Npk} />
+    <Stack.Screen name="Moisture" component={Soilmoisture} />
+    <Stack.Screen name="Soil temperature" component={Soiltemprature} />
+    <Stack.Screen name="Fertilizers" component={Fertilizers} />
+    <Stack.Screen name="Notifications" component={Notification} />
+    <Stack.Screen name="Settings" component={Settings} />
+    <Stack.Screen name="Pest and Disease Forcast" component={DiseaseForcast} />
+    <Stack.Screen name="Spread Result" component={SpreadResult} />
+  </Stack.Navigator>
+);
+
+
+
+
+const AppStack = () => {
+
+  const getTabBarVisibility = (route) => {
+    const routeName = route.state
+      ? route.state.routes[route.state.index].name
+      : '';
+
+    if (routeName === 'Chat') {
+      return false;
+    }
+    return true;
+  };
+
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        activeTintColor: '#DE1B55',
+        backgroundColor: '#DE1B55',
+      }}>
+      <Tab.Screen
+        name="Home"
+        component={HomeStack}
+        options={({ route }) => ({
+          tabBarLabel: 'Home',
+          headerShown: false,
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons
+              name="home-outline"
+              color={color}
+              activeTintColor='#DE1B55'
+              size={35}
+            />
+          ),
+        })}
+      />
+      <Tab.Screen
+        name="notification"
+        component={Notification}
+        options={({ route }) => ({
+          tabBarLabel: 'Notification',
+          headerShown: false,
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons
+              name="notification"
+              color={color}
+              size={30}
+            />
+          ),
+        })}
+      />
+      <Tab.Screen
+        name="Profile"
+        component={Profile}
+        options={({ route }) => ({
+          tabBarLabel: 'Profile',
+          headerShown: false,
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons
+              name="user"
+              color={color}
+              size={30}
+            />
+          ),
+        })}
+      />
+      <Tab.Screen
+        name="settings"
+        component={Settings}
+        options={({ route }) => ({
+          tabBarLabel: 'Settings',
+          headerShown: false,
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons
+              name="setting"
+              color={color}
+              size={30}
+            />
+          ),
+        })}
+      />
+
+    </Tab.Navigator>
+  )
+}
+
+const TabNavigator = () => {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name="Home" component={Home} />
+      <Tab.Screen name="Home" component={Home} />
+      <Tab.Screen name="Home" component={Home} />
+    </Tab.Navigator>
+  );
+}
+
+
+
+export default AppStack
\ No newline at end of file

Mobile App/src/auth/AuthProvider.jsx

+import React, { createContext, useState, useEffect } from 'react';
+import { View, Text } from 'react-native';
+import auth from '@react-native-firebase/auth';
+import firestore from '@react-native-firebase/firestore';
+import { useToast } from "react-native-toast-notifications";
+
+export const AuthContext = createContext();
+
+const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [farmData, setFarmData] = useState(null);
+  const toast = useToast();
+
+  // Function to fetch farm data by user ID
+  const fetchFarmData = async (userId) => {
+    try {
+      const farmRef = firestore().collection('farms').doc(userId);
+      const farmDoc = await farmRef.get();
+
+      if (farmDoc.exists) {
+        const farmInfo = farmDoc.data();
+        setFarmData(farmInfo);
+      } else {
+        setFarmData(null);
+      }
+    } catch (error) {
+      console.error('Error fetching farm data:', error);
+    }
+  };
+
+  // Use `useEffect` to fetch farm data when the user is set
+  useEffect(() => {
+    if (user) {
+      fetchFarmData(user.uid);
+    }
+  }, [user]);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        setUser,
+        farmData,
+        login: async (email, password) => {
+          try {
+            await auth().signInWithEmailAndPassword(email, password);
+            toast.show("Login Successful", {
+              type: "success",
+              placement: "top",
+              duration: 4000,
+              offset: 30,
+              animationType: "slide-in",
+            });
+          } catch (e) {
+            toast.show("Invalid email or password");
+          }
+        },
+        register: async (email, password) => {
+          try {
+            await auth().createUserWithEmailAndPassword(email, password).then(() => {
+              // Once the user creation has happened successfully, we can add the currentUser into firestore
+              // with the appropriate details.
+              firestore()
+                .collection('users')
+                .doc(auth().currentUser.uid)
+                .set({
+                  fname: '',
+                  lname: '',
+                  email: email,
+                  createdAt: firestore.Timestamp.fromDate(new Date()),
+                  userImg: null,
+                })
+                // Ensure we catch any errors at this stage to advise us if something does go wrong
+                .catch((error) => {
+                  console.log('Something went wrong with adding user to firestore: ', error);
+                });
+            })
+              // We need to catch the whole sign-up process if it fails too.
+              .catch((error) => {
+                console.log('Something went wrong with sign up: ', error);
+              });
+          } catch (e) {
+            console.log(e);
+          }
+        },
+        logout: async () => {
+          try {
+            await auth().signOut();
+          } catch (e) {
+            console.log(e);
+          }
+        },
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export default AuthProvider;

Mobile App/src/auth/AuthStack.js

+import React, { useState, useEffect } from 'react';
+import { View } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Login from './Login';
+import Signup from './Signup';
+import Splash from '../screens/Splash';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import Forgot from './Forgot';
+
+const Stack = createNativeStackNavigator();
+
+const AuthStack = () => {
+
+    const [isFirstLaunch, setIsFirstLaunch] = useState(null);
+    let routeName;
+
+    useEffect(() => {
+        AsyncStorage.getItem('alreadyLaunched').then((value) => {
+            if (value == null) {
+                AsyncStorage.setItem('alreadyLaunched', 'true'); // No need to wait for `setItem` to finish, although you might want to handle errors
+                setIsFirstLaunch(true);
+            } else {
+                setIsFirstLaunch(false);
+            }
+        }); // Add some error handling, also you can simply do setIsFirstLaunch(null)
+
+    }, []);
+
+    if (isFirstLaunch === null) {
+        return null; // This is the 'tricky' part: The query to AsyncStorage is not finished, but we have to present something to the user. Null will just render nothing, so you can also put a placeholder of some sort, but effectively the interval between the first mount and AsyncStorage retrieving your data won't be noticeable to the user. But if you want to display anything then you can use a LOADER here
+    } else if (isFirstLaunch == true) {
+        routeName = 'Splash';
+    } else {
+        routeName = 'Login';
+    }
+
+    return (
+        <Stack.Navigator initialRouteName={routeName}>
+            <Stack.Screen
+                name="Splash"
+                component={Splash}
+                options={{ header: () => null }}
+            />
+            <Stack.Screen
+                name="Login"
+                component={Login}
+                options={{ header: () => null }}
+            />
+
+            <Stack.Screen
+                name="Signup"
+                component={Signup}
+                options={{ header: () => null }}
+            />
+
+            <Stack.Screen
+                name="Forgot"
+                component={Forgot}
+                options={{ header: () => null }}
+            />
+
+        </Stack.Navigator>
+    )
+}
+
+export default AuthStack
\ No newline at end of file

Mobile App/src/auth/Forgot.js

+import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
+import React, { useState } from 'react';
+
+const Forgot = () => {
+    const [email, setEmail] = useState('');
+
+    const handleResendCode = () => {
+        // Logic to resend code to the provided email
+    };
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.heading}>Forgot Password</Text>
+            <TextInput
+                style={styles.input}
+                placeholder="Enter Email"
+                onChangeText={(text) => setEmail(text)}
+                value={email}
+                autoCapitalize="none"
+            />
+            <TouchableOpacity style={styles.resendButton} onPress={handleResendCode}>
+                <Text style={styles.resendButtonText}>Resend Code</Text>
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#f0f0f0',
+    },
+    heading: {
+        fontSize: 28,
+        fontWeight: 'bold',
+        marginBottom: 20,
+        color: '#333',
+    },
+    input: {
+        width: '80%',
+        height: 50,
+        borderColor: '#ccc',
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 16,
+        marginBottom: 20,
+        fontSize: 18,
+        backgroundColor: '#fff',
+    },
+    resendButton: {
+        backgroundColor: 'red',
+        paddingVertical: 14,
+        paddingHorizontal: 24,
+        borderRadius: 8,
+        elevation: 2,
+    },
+    resendButtonText: {
+        color: '#fff',
+        fontSize: 18,
+        fontWeight: 'bold',
+    },
+});
+
+export default Forgot;

Mobile App/src/auth/Login.js

+import React, { useContext, useState } from 'react';
+import { View, Text, TouchableOpacity, Image, TextInput } from 'react-native';
+import { useNavigation } from '@react-navigation/core';
+import { AuthContext } from './AuthProvider';
+import farming from "../assets/farming.png"
+import { useToast } from "react-native-toast-notifications";
+
+
+const Login = () => {
+    
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const navigation = useNavigation();
+    const toast = useToast();
+    
+    const { login } = useContext(AuthContext);
+
+
+    return (
+        <View className='items-center flex-1 w-screen h-screen' >
+            
+            <Image source={farming} className="w-screen bg-cover h-[20vh]" />
+            <Text className="p-4 text-4xl font-bold text-primary">Login</Text>
+            <TextInput
+             className="px-2 py-1  text-black bg-white dark:text-black w-[80%] text-lg border border-primary rounded-md mb-4"
+                placeholder='Enter Email Address'
+                onChangeText={(text) => setEmail(text)}
+                value={email}
+                autoCapitalize="none"
+            />
+            <TextInput
+             className="px-2 py-1  text-black bg-white dark:text-black w-[80%] text-lg border border-primary rounded-md "
+                placeholder='Enter Password'
+                value={password}
+                onChangeText={(text) => setPassword(text)}
+                secureTextEntry
+            />
+            <TouchableOpacity className="w-[80%] px-2 py-1 bg-primary text-center h-12 items-center mt-6" onPress={() => login(email, password)}>
+                <Text className="text-lg font-bold text-white">Login</Text>
+            </TouchableOpacity>
+            <View className="flex-row gap-16 p-4">
+                <TouchableOpacity className="" onPress={() => navigation.navigate('Forgot')}>
+                    <Text className="text-lg font-semibold text-primary focus-within:underline">Forgot Password?</Text>
+                </TouchableOpacity>
+                <TouchableOpacity className="" onPress={() => navigation.navigate('Signup')}>
+                    <Text className="text-lg font-semibold text-primary focus-within:underline">Sign Up</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    );
+};
+
+
+
+export default Login;

Mobile App/src/auth/Providers.jsx

+import React from 'react';
+import AuthProvider from './AuthProvider';
+import Router from '../router/Router';
+
+const Providers = () => {
+    return (
+        <AuthProvider>
+            <Router />
+        </AuthProvider>
+    );
+}
+
+export default Providers
\ No newline at end of file

Mobile App/src/auth/Signup.jsx

+import React, { useContext, useState } from 'react';
+import { View, Text, Image, TouchableOpacity } from 'react-native';
+import { AuthContext } from './AuthProvider';
+import farming from "../assets/farming.png";
+import Button from '../components/Button';
+import Input from '../components/Input';
+
+const Signup = () => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [errors, setErrors] = useState({}); // Store errors in a state object
+
+    const { register } = useContext(AuthContext);
+
+    const validateForm = () => {
+        const newErrors = {};
+
+        if (!email) newErrors.email = 'Email is required';
+        else if (!isValidEmail(email)) newErrors.email = 'Invalid email format';
+        else newErrors.email = ''; // Clear the error if valid
+
+        if (!password) newErrors.password = 'Password is required';
+        else if (password.length < 6) newErrors.password = 'Password must be at least 6 characters';
+        else newErrors.password = ''; // Clear the error if valid
+
+        setErrors(newErrors);
+        return Object.values(newErrors).every(error => error === '');
+    };
+
+    const isValidEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+    const handleSignup = () => {
+        if (validateForm()) {
+            register(email, password);
+        }
+    };
+
+    return (
+        <View className='items-center flex-1 w-screen h-screen'>
+            <Image className="w-screen bg-cover h-[20vh]" source={farming} />
+            <Text className="p-4 text-4xl font-bold text-primary">Signup</Text>
+
+            <Input
+                placeholder='Enter Email Address'
+                onChangeText={(text) => setEmail(text)}
+                value={email}
+                autoCapitalize="none"
+            />
+            {errors.email && <Text style={{ color: 'red' }}>{errors.email}</Text>}
+
+            <Input
+                placeholder='Enter Password'
+                value={password}
+                onChangeText={(text) => setPassword(text)}
+                secureTextEntry
+            />
+            {errors.password && <Text style={{ color: 'red' }}>{errors.password}</Text>}
+
+           
+            <TouchableOpacity className="w-[80%] px-2 py-1 bg-primary text-center h-12 items-center mt-6" onPress={handleSignup}>
+                <Text className="text-lg font-bold text-white">Signup</Text>
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+export default Signup;
\ No newline at end of file

Mobile App/src/climate/Chart.js

+import React, { useEffect, useState, useContext } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import { LineChart } from 'react-native-chart-kit';
+import { AuthContext } from '../auth/AuthProvider';
+import firestore from '@react-native-firebase/firestore';
+
+const Chart = () => {
+
+  const { user } = useContext(AuthContext);
+  const [temperatureData, setTemperatureData] = useState([]);
+  const [humidityData, setHumidityData] = useState([]);
+  const [climate, setClimateData] = useState([]);
+  const [hourArray, setHourArray] = useState([]);
+
+  const getClimateData = async () => {
+    try {
+      const weatherDataSnapshot = await firestore()
+        .collection('weatherData')
+        .doc(user.uid) // Use the user's UID as the document ID
+        .get();
+
+      if (weatherDataSnapshot.exists) {
+        const weatherData = weatherDataSnapshot.data();
+        setClimateData(weatherData.climateData)
+       
+      } else {
+        console.log('Weather data not found for user:', user.uid);
+        // Handle the case where weather data is not found for the user5
+      }
+    } catch (error) {
+      console.error('Error fetching weather data:', error);
+      // Handle the error appropriately
+    }
+  };
+
+
+  useEffect(() => {
+    // Check if 'climate' is defined and not empty
+    if (climate && Object.keys(climate).length > 0) {
+      const humidityValuesArray = [];
+      const temperatureValuesArray = [];
+      const hourArray = [];
+
+      // Convert the climate object into an array of entries and sort it by timestamp
+      const sortedClimate = Object.entries(climate).sort((a, b) => {
+        return new Date(a[0]) - new Date(b[0]);
+      });
+
+      for (const [timestamp, data] of sortedClimate) {
+        const humidity = data.humidity;
+        const temperature = data.temperature;
+        humidityValuesArray.push(humidity);
+        temperatureValuesArray.push(temperature);
+
+        // Extract hour from the timestamp (assuming timestamp is in UTC)
+        const dateObj = new Date(timestamp);
+
+        const hours = dateObj.getHours();
+        const minutes = dateObj.getMinutes();
+        const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+        hourArray.push(`${formattedTime}`);
+      }
+
+      // Only take the last 24 entries to have data for the last 24 hours
+      const last24Humidity = humidityValuesArray.slice(-24);
+      const last24Temperature = temperatureValuesArray.slice(-24);
+      const last24Hours = hourArray.slice(-24);
+      setTemperatureData(last24Temperature);
+      setHumidityData(last24Humidity);
+      setHourArray(last24Hours);
+    }
+  }, [climate]);
+
+  useEffect(() => {
+    getClimateData();
+  }, [user]); // Fetch data when the user context changes
+
+
+  // Calculate average, max, and min values for temperature and humidity arrays
+
+
+
+
+  const data = {
+    labels: hourArray,
+    datasets: [
+      {
+        data: [10, 65, 28, 80, 99, 10, 65, 28, 80],
+        color: (opacity = 1) => `rgba(158, 65, 244, ${opacity})`, // Line color
+        strokeWidth: 2, // Line width
+      },
+    ],
+  };
+
+  return (
+    <View>
+      <View >
+        <Text className="text-lg font-semibold text-black">Last 24 Hours Temperature</Text>
+        <LineChart
+          data={data}
+          width={350}
+          height={180}
+          yAxisSuffix="c"
+          withInnerLines={false}
+          withOuterLines={false}
+          chartConfig={{
+            backgroundColor: 'white',
+            backgroundGradientFrom: 'white',
+            backgroundGradientTo: 'white',
+            decimalPlaces: 2, // Number of decimal places for labels
+            color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, // Label color
+            yAxisInterval: 10, // Set the y-axis interval to 10 (0 to 100 in increments of 10)
+          }}
+          style={styles.chart}
+        />
+      </View>
+      <View >
+      <Text className="text-lg font-semibold text-black">Last 24 Hours Humidity</Text>
+      <LineChart
+        data={data}
+        width={350}
+        height={180}
+        yAxisSuffix="%"
+        withInnerLines={false}
+        withOuterLines={false}
+        chartConfig={{
+          backgroundColor: 'white',
+          backgroundGradientFrom: 'white',
+          backgroundGradientTo: 'white',
+          decimalPlaces: 2, // Number of decimal places for labels
+          color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`, // Label color
+          yAxisInterval: 10, // Set the y-axis interval to 10 (0 to 100 in increments of 10)
+        }}
+        style={styles.chart}
+      />
+    </View>
+    </View>
+
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  chart: {
+    marginVertical: 8,
+    borderRadius: 16,
+  },
+});
+
+export default Chart;
\ No newline at end of file

Mobile App/src/climate/ClimateHome.js

+import { View, Text, Image, ImageBackground } from 'react-native'
+import React, { useState, useEffect, useContext } from 'react'
+import axios from 'axios';
+import Back from "../assets/cli.png";
+import babelConfig from '../../babel.config';
+import { LineChart } from 'react-native-chart-kit';
+import Chart from './Chart';
+import { AuthContext } from '../auth/AuthProvider';
+
+
+const ClimateHome = ({route}) => {
+
+  const [humidity, setHumidity] = useState('');
+  const [temperature, setTemperature] = useState('');
+  const { user } = useContext(AuthContext);
+  const { deviceId } = route.params;
+
+
+  const getClimate = async (deviceId) => {
+    try {
+      const response = await axios.get(`http://192.168.73.130/api/data/DH0001`);
+      if (response) {
+        setHumidity(response.data.humidity);
+        setTemperature(response.data.temperature);
+      } else {
+        console.log('Error getting data');
+      }
+    } catch (error) {
+      //console.log("An error occurred:", error.message);
+    }
+  };
+
+  useEffect((deviceId) => {
+
+    getClimate(deviceId); // Initial call
+    console.log(deviceId)
+    const interval = setInterval(() => {
+      getClimate(); // Fetch climate data every 5 seconds
+    }, 10000); // Interval in milliseconds (5 seconds)
+
+    return () => {
+      clearInterval(interval); // Clear interval when component unmounts
+    };
+  }, []);
+
+  return (
+    <View className="w-screen h-screen">
+      <ImageBackground
+        source={Back} // Change to your image path
+        className="h-[50%] bg-center bg-no-repeat  "
+      >
+        <View className="flex-row justify-between w-screen gap-1 px-4 mx-auto max-w-[80%]  mt-12 ">
+          <View className="text-center">
+            {temperature !== '' ? (
+              <>
+                <Text className="text-4xl font-semibold text-center text-white">{temperature}°C</Text>
+                <Text className="text-lg text-center text-white"> Temperature</Text>
+              </>
+            ) : (
+              <Text className="text-lg font-semibold text-white">Device Offline</Text>
+            )}
+          </View>
+          <View className="text-center">
+            {humidity !== '' ? (
+              <>
+                <Text className="text-4xl font-semibold text-center text-white">{humidity}%</Text>
+                <Text className="text-lg text-center text-white">Current Humidity</Text>
+              </>
+            ) : (
+              <Text className="text-lg font-semibold text-white">Device Offline</Text>
+            )}
+          </View>
+        </View>
+        <View className="items-center w-screen mt-24">
+          <Chart />
+        </View>
+
+      </ImageBackground>
+
+    </View>
+
+  )
+}
+
+export default ClimateHome
\ No newline at end of file

Mobile App/src/climate/Currentclimate.js

+import { View, Text } from 'react-native'
+import React, {useState, useEffect} from 'react'
+
+const Currentclimate = () => {
+
+    const [humidity, setHumidity] = useState('');
+    const [temperature, setTemperature] = useState('');
+
+    const getClimate = async () => {
+        try {
+          const response = await axios.get(`http://192.168.226.130/api/data/DH0001`);
+          if (response) {
+            setHumidity(response.data.humidity);
+            setTemperature(response.data.temperature);
+          } else {
+            console.log('Error getting data');
+          }
+        } catch (error) {
+          //console.log("An error occurred:", error.message);
+        }
+      };
+      
+    useEffect(() => {
+       
+        getClimate(); // Initial call
+    
+        const interval = setInterval(() => {
+          getClimate(); // Fetch climate data every 5 seconds
+        }, 10000); // Interval in milliseconds (5 seconds)
+    
+        return () => {
+          clearInterval(interval); // Clear interval when component unmounts
+        };
+      }, []);
+    
+    return (
+        <View className="flex-row justify-between w-screen gap-1 px-4 mx-auto max-w-[80%] py-8 ">
+            <View className="flex items-center justify-center p-4 bg-white rounded-lg w-36 h-[150px]">
+                {temperature !== '' ? (
+                    <>
+                        <Text className="text-3xl font-semibold text-primary">{temperature}°C</Text>
+                        <Text className="text-lg text-center text-gray-500">Current Temperature</Text>
+                    </>
+                ) : (
+                    <Text className="text-lg font-semibold text-gray-500">Device Offline</Text>
+                )}
+            </View>
+            <View className="flex items-center justify-center p-4 bg-white rounded-lg w-36 h-[150px]">
+                {humidity !== '' ? (
+                    <>
+                        <Text className="text-3xl font-semibold text-primary">{humidity}%</Text>
+                        <Text className="text-lg text-center text-gray-500">Current Humidity</Text>
+                    </>
+                ) : (
+                    <Text className="text-lg font-semibold text-gray-500">Device Offline</Text>
+                )}
+            </View>
+        </View>
+    )
+}
+
+export default Currentclimate
\ No newline at end of file

Mobile App/src/climate/Foorcast.jsx

+import { View, Text, TouchableOpacity } from 'react-native'
+import React from 'react'
+
+
+const Foorcast = () => {
+  return (
+    <View className="bg-[#ffffff] rounded-lg  h-auto w-auto">
+      <Text className="p-4 font-semibold text-center text-black bg-gray-100">3 day Forecast</Text> 
+      <View className="flex flex-row items-center justify-between w-[95%] mx-auto p-2 text-center border-b ">
+        <Text className="text-gray-700">Today</Text>
+        <Text>Thunderstroam</Text>
+        <Text className="text-gray-700">Temperature  27°C</Text>
+      </View>
+      <View className="flex flex-row items-center justify-between w-[95%] mx-auto p-2 text-center border-b ">
+        <Text className="text-gray-700">Today</Text>
+        <Text>Thunderstroam</Text>
+        <Text className="text-gray-700">Temperature  27°C</Text>
+      </View>
+      <View className="flex flex-row items-center justify-between w-[95%] mx-auto p-2 text-center border-b ">
+        <Text className="text-gray-700">Today</Text>
+        <Text>Thunderstroam</Text>
+        <Text className="text-gray-700">Temperature  27°C</Text>
+      </View>
+    </View>
+  )
+}
+
+export default Foorcast
\ No newline at end of file

Mobile App/src/climate/Notification.js

+import { View, Text } from 'react-native'
+import React, { useContext } from 'react';
+import { AuthContext } from '../auth/AuthProvider';
+
+const Notification = () => {
+
+  const { farmData } = useContext(AuthContext);
+
+  return (
+    <View>
+      <Text>Notification</Text>
+      <Text>Farm Name: {farmData?.name}</Text>
+    </View>
+  )
+}
+
+export default Notification
\ No newline at end of file

Mobile App/src/climate/SpreadResult.js

+import { View, Text, TouchableOpacity } from 'react-native';
+import React from 'react';
+
+const SpreadResult = ({ route }) => {
+  const { status, name } = route.params;
+
+  let treatmentText = null; // Initialize treatmentText to null
+
+  if (status === 'medium' || status === 'high') {
+    treatmentText = (
+      <Text className="p-2 text-lg text-black bg-yellow-500">
+        Start The necessary Treatment Quickly
+      </Text>
+    );
+  }
+
+  return (
+    <View className="flex items-center w-screen h-screen bg-emerald-600">
+      <View className="mt-[200px]">
+        <Text className="p-2 text-2xl font-bold text-center text-white">Spread Result</Text>
+        <View className="items-center w-screen">
+          <Text className="p-4 text-lg text-center text-white">
+            In this Climate Conditions <Text className="p-2 bg-red-600">{name}</Text> Spread is{' '}
+            <Text className="p-2 text-xl bg-red-600">{status}</Text> Probability
+          </Text>
+          {treatmentText} 
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default SpreadResult;

Mobile App/src/components/Btn.js

+import { View, Text, TouchableOpacity } from 'react-native'
+import React from 'react';
+import LinearGradient from 'react-native-linear-gradient';
+
+const Btn = ({name}) => {
+    return (
+        <TouchableOpacity className="mt-4">
+            <LinearGradient style={{ elevation: 10 }} colors={['#059669', '#34d399']} className="px-4 py-2 rounded-xl w-[250px] items-center">
+                    <Text className="text-lg text-white">{name}</Text>
+            </LinearGradient>
+        </TouchableOpacity>
+    )
+}
+
+export default Btn
\ No newline at end of file

Mobile App/src/components/Button.jsx

+import { Text, TouchableOpacity } from 'react-native';
+import React from 'react'
+
+const Button = ({name}) => {
+    return (
+        <TouchableOpacity className="w-[80%] px-2 py-1 bg-primary text-center h-12 items-center mt-6">
+            <Text className="text-lg font-bold text-white">{name}</Text>
+        </TouchableOpacity>
+    )
+}
+
+export default Button
\ No newline at end of file

Mobile App/src/components/Input.jsx

+import { TextInput } from 'react-native'
+import React from 'react'
+
+const Input = ({ placeholder }) => {
+    return (
+        <TextInput
+            className="px-2 py-1  text-black bg-white dark:text-black w-[80%] text-lg border border-primary rounded-md "
+            placeholder={placeholder}
+        />
+    )
+}
+
+export default Input
\ No newline at end of file

Mobile App/src/components/LoadingScreen.js

+import React from 'react';
+import { View, Text, ActivityIndicator, Modal, StyleSheet } from 'react-native';
+
+const LoadingScreen = ({ visible }) => {
+  return (
+    <Modal visible={visible} transparent animationType="fade">
+      <View style={styles.modalBackground}>
+        <View style={styles.activityIndicatorWrapper}>
+          <ActivityIndicator size="large" color="#df5555" />
+          <Text>Waiting...</Text>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalBackground: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semi-transparent background
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  activityIndicatorWrapper: {
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    padding: 20,
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export default LoadingScreen;

Mobile App/src/diseases/Disease.js

+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
+import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
+import { useNavigation } from '@react-navigation/core';
+import LinearGradient from 'react-native-linear-gradient';
+import Camera from 'react-native-vector-icons/AntDesign';
+import ImageResizer from 'react-native-image-resizer';
+import Gallery from 'react-native-vector-icons/FontAwesome';
+
+
+export default function Disease() {
+
+    const [selectedImageUri, setSelectedImageUri] = useState('');
+    const [resizedImageUri, setResizedImageUri] = useState();
+    const navigation = useNavigation();
+
+
+
+    const handleLaunchCamera = () => {
+        launchCamera(
+            {
+                mediaType: 'photo',
+                includeBase64: false,
+            },
+            async (response) => {
+                if (!response.didCancel && response.assets && response.assets.length > 0) {
+                    const imageUri = response.assets[0].uri;
+
+                    try {
+                        // Resize the image to 256x256
+                        const resizedImageUri = await ImageResizer.createResizedImage(
+                            imageUri,
+                            256,
+                            256,
+                            'JPEG',
+                            100, // Image quality (0-100)
+                            0,   // Rotation (0 = no rotation)
+                            // Output directory (null = same as the original)
+                             // Output filename (null = random name)
+                        );
+
+                        // Now you can navigate to 'Find' screen with the resized image URI
+                        navigation.navigate('Find', { imageUri: resizedImageUri.uri });
+                    } catch (error) {
+                        console.error('Error resizing the image:', error);
+                    }
+                } else {
+                    console.log('Camera launch cancelled or failed.');
+                }
+            }
+        );
+    };
+
+    const handleLaunchImageLibrary = () => {
+
+        let options = {
+            storageOptions: {
+                path: 'image',
+            },
+        }
+
+        launchImageLibrary(options, response => {
+            if (response.didCancel) {
+                console.log("User cancelled image selection");
+            } else if (response.error) {
+                console.log("Image selection error:", response.error);
+            } else if (response.assets && response.assets.length > 0) {
+                navigation.navigate('Find', { imageUri: response.assets[0].uri });
+            } else {
+                console.log("No image selected");
+            }
+        });
+    };
+
+
+    return (
+        <View className="w-screen h-screen bg-primary">
+            <View
+                className="bg-primary h-[30vh] rounded-b-3xl items-center justify-center" >
+                <Text className="text-3xl text-white ">Identify Leaf Diseases</Text>
+                <Text className="p-4 text-lg text-center text-white fint-light">Take photos, diagnose diseases, and learn how to treat them. </Text>
+            </View>
+            <View className="flex items-center  h-[100%]   bg-white rounded-t-3xl w-screen">
+                <LinearGradient style={{ elevation: 10 }} colors={['#059669', '#34d399']} className="mt-12 px-4 py-2 rounded-xl w-[250px] items-center">
+                    <TouchableOpacity onPress={handleLaunchCamera} className="flex-row items-center gap-4">
+                        <Camera name="camera" color="white" size={20} />
+                        <Text className="text-lg text-white">Take a Photo</Text>
+                    </TouchableOpacity>
+                </LinearGradient>
+
+                <LinearGradient style={{ elevation: 10 }} colors={['#059669', '#34d399']} className="mt-4 px-4 py-2 rounded-xl w-[250px] items-center">
+                    <TouchableOpacity onPress={handleLaunchImageLibrary} className="flex-row items-center gap-4">
+                        <Gallery name="photo" color="white" size={20} />
+                        <Text className="text-lg text-white">Upload from gallery</Text>
+                    </TouchableOpacity>
+                </LinearGradient>
+            </View>
+
+        </View>
+    );
+}
+
+

Mobile App/src/diseases/DiseaseResult.js

+import { View, Text, Image, TouchableOpacity } from 'react-native';
+import React, { useState } from 'react';
+import HAppy from 'react-native-vector-icons/Entypo';
+import Sad from 'react-native-vector-icons/Entypo';
+import Qus from 'react-native-vector-icons/AntDesign';
+import LinearGradient from 'react-native-linear-gradient';
+
+const DiseaseResult = ({ route }) => {
+  const { validate, disease, emoji } = route.params;
+  const [showTreatmentBox, setShowTreatmentBox] = useState(false);
+
+  const getTreatment = (diseaseName) => {
+    switch (diseaseName) {
+      case 'Bacterial Blight':
+        return `
+          Bacterial Blight Treatment
+          Sprays containing 500 ppm Streptocycline and 0.2% copper oxychloride, or 500 ppm Bromopal and 0.2% copper oxychloride, successfully controlled blight and increased yield.`;
+
+      case 'Anthracnose':
+        return `
+          Anthracnose Treatment
+          Apply fungicides preventively, especially during periods of high disease pressure or favorable weather conditions for fungal growth.`;
+
+      case 'Cercospora Leaf Spot':
+        return `
+          Cercospora Leaf Spot Treatment
+          Fungicides can help manage Cercospora Leaf Spot. Copper-based fungicides and fungicides containing active ingredients like azoxystrobin can be effective.`;
+
+      default:
+        return '';
+    }
+  };
+
+  const handleGetTreatment = () => {
+    setShowTreatmentBox(!showTreatmentBox);
+  };
+
+  const treatmentInfo = getTreatment(disease);
+
+  return (
+    <View className="w-screen h-screen text-white bg-emerald-600">
+      <Text className="justify-center py-6 text-3xl font-semibold text-center text-white">Results</Text>
+      <View className="flex items-center">
+        {validate !== undefined && (
+          <Text className="justify-center text-2xl text-center text-white">You Uploaded {validate} Image</Text>
+        )}
+        {validate !== 'Healthy' && validate !== "Undefined" && (
+          <Text className="p-4 text-xl text-center text-white jjustify-center">This Disease is "<Text className="text-xl font-bold">{disease}</Text>"</Text>
+        )}
+        <HAppy name={emoji} color="white" size={80} />
+      </View>
+      <View className="items-center mt-6 ">
+        {validate !== 'Healthy' && validate !== "Undefined" && (
+          <TouchableOpacity className="mt-4" onPress={handleGetTreatment}>
+            <View style={{ elevation: 10 }} className="bg-white px-4 py-2 rounded-2xl w-[250px] items-center">
+              <Text className="text-lg text-green-800">Get Treatment</Text>
+            </View>
+          </TouchableOpacity>
+        )}
+
+        {showTreatmentBox && (
+          <View style={{ backgroundColor: 'white', marginTop: 10, padding: 10, borderRadius: 5 }} className="w-[85vw] p-4 text-left text-lg">
+            <Text>{treatmentInfo}</Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+export default DiseaseResult;

Mobile App/src/diseases/FindDisease.js

+import React, { useState } from 'react';
+import { View, Text, Image, TouchableOpacity, StyleSheet, ImageBackground, Alert } from 'react-native';
+import ImageResizer from 'react-native-image-resizer';
+import LinearGradient from 'react-native-linear-gradient';
+import Find from 'react-native-vector-icons/AntDesign';
+import { useNavigation } from '@react-navigation/core';
+import LoadingScreen from '../components/LoadingScreen';
+import bg from '../assets/diseaseback.jpeg'
+
+
+const FindDisease = ({ route }) => {
+  const { imageUri } = route.params;
+  const navigation = useNavigation();
+  const [isLoading, setIsLoading] = useState(false);
+  const [res, setRes] = useState('');
+  const [res2, setRes2] = useState('');
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+  
+  const handleFindDisease = async () => {
+    if (imageUri) {
+      try {
+        setLoading(true)
+        setIsLoading(true);
+        setError(null);
+
+        // Resize the image to 256x256
+        const resizedImage = await ImageResizer.createResizedImage(
+          imageUri,
+          256,
+          256,
+          'JPEG',
+          100,
+          0,
+          undefined,
+          false,
+          { mode: 'contain', onlyScaleDown: false }
+        );
+        const filename = imageUri.split('/').pop() || 'default.jpg';
+        const data = new FormData();
+        data.append('file', {
+          uri: resizedImage.uri,
+          name: filename,
+          type: 'image/jpg',
+        });
+
+        const backendURL = 'http://192.168.140.107:8000';
+
+        const response = await fetch(`${backendURL}/predict`, {
+          method: 'POST',
+          body: data,
+        });
+        const responseData = await response.json();
+
+        if (responseData) {
+          const validate = responseData.class_model_1;
+          if (validate === "Diseases") {
+            navigation.navigate('DiseaseResult', { validate: "Disease", disease: responseData.class_model_2, emoji: "emoji-sad" });
+          } else if (validate === "Helthy") {
+            navigation.navigate('DiseaseResult', { validate: "Healthy", disease: "null", emoji: "emoji-happy" });
+          }
+          else {
+            navigation.navigate('DiseaseResult', { validate: "Undefined", disease: "null", emoji: "none" });
+          }
+        } else {
+          setLoading(false);
+          setError('Invalid response from the server');
+        }
+
+      } catch (error) {
+        setLoading(false);
+        console.log('Error:', error);
+        setError('An error occurred while finding the disease.');
+      } finally {
+        setLoading(false);
+        setIsLoading(false);
+      }
+    }
+  };
+
+
+  return (
+    <ImageBackground
+      source={bg} // Change to your image path
+      className="items-center w-screen h-scre"
+    >
+    <View className="flex items-center w-screen h-screen ">
+      {loading && <LoadingScreen visible={loading} />}
+
+      <View
+        className=" h-[30vh] items-center justify-center w-screen" >
+        <Text className="text-3xl text-white ">Find Your Leaf Diseases</Text>
+        <Text className="p-4 text-lg text-center text-white fint-light">Now Click Find Disease Button.  </Text>
+      </View>
+      <View className="items-center w-screen bg-white h-[70vh] rounded-3xl">
+        {imageUri ? (
+          <View className="p-4 rounded-full ">
+            <Image source={{ uri: imageUri }} className='w-[256px] h-[256px] ' />
+          </View>
+        ) : (
+          <Text style={styles.noImageText}>No Image Selected</Text>
+        )}
+
+        <LinearGradient style={{ elevation: 10 }} colors={['#059669', '#34d399']} className="px-4 py-2 rounded-xl w-[250px] items-center">
+          <TouchableOpacity onPress={handleFindDisease} disabled={isLoading} className="flex-row items-center gap-4">
+            <Find name="search1" color="white" size={20} />
+            <Text className="text-lg text-white">
+              {isLoading ? 'Finding Disease...' : 'Find Disease'}
+            </Text>
+          </TouchableOpacity>
+        </LinearGradient>
+
+        {res && <Text className="text-lg font-semibold text-black ">{res}</Text>}
+        {res2 && <Text className="text-lg font-semibold text-black ">{res2}</Text>}
+
+        {error && (
+          <Text style={styles.errorText}>{error}</Text>
+        )}
+      </View>
+
+    </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  noImageText: {
+    textAlign: 'center',
+    marginTop: 20,
+    fontSize: 16,
+  },
+  errorText: {
+    color: 'red',
+    fontSize: 16,
+    marginTop: 10,
+    textAlign: 'center',
+  },
+});
+
+export default FindDisease;