#3 Task4-Deployment: React app prototypea

* React app initial files
tensorflow lite fetch scripts to get tflite files for building the app

* Application main screens

* Add pretrained models + labels for testing

* update UI & remove old screens

* + Update Main screen
+ add models post-processing utilities
+ integrate `mobilenetv3` and `efficientDet` models

* minor refactoring

* add toast notifications as loading indicators

* + update `.apk` application info
+ fix bug in camera permissions

.gitignore

@@ -20,7 +20,6 @@ expo-env.d.ts
 # @end expo-cli
 
 %ProgramData%/
-node_modules/
 android/
 tensorflow/
 

app/src/.gitignore

@@ -0,0 +1,6 @@
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

app/src/README.md

@@ -0,0 +1,71 @@
+# Welcome to Crop Disease Early Detection app
+
+Here you'll find a few extra things you need to do to get the app running quickly, and below you'll find Initial instructions for expo applications and android emulator, have a look at it to get the app running, but the first step right below should be done prior to the Expo instructions.
+
+1. run `fetch-tensorflow-lite` script to download tflite src files since they're required for building the app.
+
+2. run
+
+    ```bash
+    npm install
+    ```
+
+    to install all the dependencies, which will also automatically move downloaded tflite src files into their respective directory, `react-native-fast-tflite`.
+
+3. In the instructions, you'll find a link to Android Emulator, follow the instructions closely to get the android emulator setup properly.
+
+4. Inside `app/src` withing the repo directory, run `expo run:android` to start the app. The instructions mentions Expo Go, but we don't use it since it's not compatible with `react-native-vision-camera` which is a dependency for using the camera device.
+
+---
+
+
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

app/src/app.json

@@ -0,0 +1,68 @@
+{
+  "expo": {
+    "name": "Crop Diseases Detection",
+    "slug": "crop-diseases-detection",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/robot-outline.512.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/robot-outline.512.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/robot-outline.512.png",
+        "backgroundColor": "#ffffff"
+      },
+      "permissions": [
+        "android.permission.CAMERA"
+      ],
+      "package": "com.omdena.crop_diseases_detection"
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "react-native-vision-camera",
+        {
+          "cameraPermissionText": "Allow Crop Diseases Detection App to access your Camera."
+        }
+      ],
+      [
+        "expo-media-library",
+        {
+          "photosPermission": "Allow Crop Diseases Detection App to access your photos.",
+          "savePhotosPermission": "Allow Crop Diseases Detection App to save photos.",
+          "isAccessMediaLocationEnabled": true
+        }
+      ],
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "The app accesses your photos to let you share them with your friends."
+        }
+      ],
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow Crop Diseases Detection App to access your camera",
+          "microphonePermission": "Allow Crop Diseases Detection App to access your microphone",
+          "recordAudioAndroid": true
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

app/src/app/(tabs)/_layout.tsx

@@ -0,0 +1,31 @@
+import { Tabs } from "expo-router";
+import React from "react";
+import { useColorScheme } from "react-native";
+
+import TabBarIcon from "@/components/navigation/TabBarIcon";
+import Colors from "@/constants/Colors";
+
+const CameraTabIcon = ({ color, focused }: { color: any; focused: any }) => (
+	<TabBarIcon name={focused ? "eye" : "eye-outline"} color={color} />
+);
+
+export default function TabLayout() {
+	const colorScheme = useColorScheme();
+
+	return (
+		<Tabs
+			screenOptions={{
+				tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
+				headerShown: false,
+			}}
+		>
+			<Tabs.Screen
+				name="index"
+				options={{
+					title: "Home",
+					tabBarIcon: CameraTabIcon,
+				}}
+			/>
+		</Tabs>
+	);
+}