@mlodyjesienin/example app UI

apps/computer-vision/ScreenWrapper.tsx

@@ -0,0 +1,8 @@
+import { useIsFocused } from '@react-navigation/native';
+import { PropsWithChildren } from 'react';
+
+export default function ScreenWrapper({ children }: PropsWithChildren) {
+  const isFocused = useIsFocused();
+
+  return isFocused ? <>{children}</> : null;
+}

apps/computer-vision/android/app/src/main/AndroidManifest.xml

@@ -20,6 +20,12 @@
         <action android:name="android.intent.action.MAIN"/>
         <category android:name="android.intent.category.LAUNCHER"/>
       </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="rne-computer-vision"/>
+      </intent-filter>
     </activity>
   </application>
 </manifest>

apps/computer-vision/android/app/src/main/res/values/styles.xml

@@ -1,9 +1,9 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
   <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-    <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item>
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="android:statusBarColor">#ffffff</item>
+    <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item>
   </style>
   <style name="Theme.App.SplashScreen" parent="AppTheme">
     <item name="android:windowBackground">@drawable/ic_launcher_background</item>

apps/computer-vision/app.json

@@ -7,6 +7,7 @@
     "icon": "./assets/icons/icon.png",
     "userInterfaceStyle": "light",
     "newArchEnabled": true,
+    "scheme": "rne-computer-vision",
     "splash": {
       "image": "./assets/icons/splash.png",
       "resizeMode": "contain",
@@ -29,6 +30,6 @@
     "web": {
       "favicon": "./assets/icons/favicon.png"
     },
-    "plugins": ["expo-font"]
+    "plugins": ["expo-font", "expo-router"]
   }
 }

apps/computer-vision/app/_layout.tsx

@@ -0,0 +1,133 @@
+import { Drawer } from 'expo-router/drawer';
+import ColorPalette from '../colors';
+import React, { useState } from 'react';
+import { Text, StyleSheet, View } from 'react-native';
+
+import {
+  DrawerContentComponentProps,
+  DrawerContentScrollView,
+  DrawerItemList,
+} from '@react-navigation/drawer';
+import { GeneratingContext } from '../context';
+
+interface CustomDrawerProps extends DrawerContentComponentProps {
+  isGenerating: boolean;
+}
+
+function CustomDrawerContent(props: CustomDrawerProps) {
+  const { isGenerating, ...otherProps } = props;
+  return (
+    <DrawerContentScrollView {...otherProps}>
+      {!isGenerating ? (
+        <DrawerItemList {...otherProps} />
+      ) : (
+        <View style={styles.centerContent}>
+          <Text style={styles.mainText}>Model is generating...</Text>
+          <Text style={styles.subText}>Interrupt before switching model</Text>
+        </View>
+      )}
+    </DrawerContentScrollView>
+  );
+}
+
+export default function _layout() {
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  return (
+    <GeneratingContext
+      value={{
+        setGlobalGenerating: (newState: boolean) => {
+          setIsGenerating(newState);
+        },
+      }}
+    >
+      <Drawer
+        drawerContent={(props) => (
+          <CustomDrawerContent {...props} isGenerating={isGenerating} />
+        )}
+        screenOptions={{
+          drawerActiveTintColor: ColorPalette.primary,
+          drawerInactiveTintColor: '#888',
+          headerTintColor: ColorPalette.primary,
+          headerTitleStyle: { color: ColorPalette.primary },
+        }}
+      >
+        <Drawer.Screen
+          name="classification/index"
+          options={{
+            drawerLabel: 'Classification',
+            title: 'Classification',
+            headerTitleStyle: { color: ColorPalette.primary },
+          }}
+        />
+        <Drawer.Screen
+          name="image_segmentation/index"
+          options={{
+            drawerLabel: 'Image Segmentation',
+            title: 'Image Segmentation',
+            headerTitleStyle: { color: ColorPalette.primary },
+          }}
+        />
+        <Drawer.Screen
+          name="object_detection/index"
+          options={{
+            drawerLabel: 'Object Detection',
+            title: 'Object Detection',
+            headerTitleStyle: { color: ColorPalette.primary },
+          }}
+        />
+        <Drawer.Screen
+          name="ocr/index"
+          options={{
+            drawerLabel: 'OCR',
+            title: 'OCR',
+            headerTitleStyle: { color: ColorPalette.primary },
+          }}
+        />
+        <Drawer.Screen
+          name="ocr_vertical/index"
+          options={{
+            drawerLabel: 'OCR Vertical',
+            title: 'Vertical OCR',
+            headerTitleStyle: { color: ColorPalette.primary },
+          }}
+        />
+        <Drawer.Screen
+          name="style_transfer/index"
+          options={{
+            drawerLabel: 'Style Transfer',
+            title: 'Style Transfer',
+            headerTitleStyle: { color: ColorPalette.primary },
+          }}
+        />
+        <Drawer.Screen
+          name="index"
+          options={{
+            drawerLabel: () => null,
+            title: 'Main Menu',
+            drawerItemStyle: { display: 'none' },
+          }}
+        />
+      </Drawer>
+    </GeneratingContext>
+  );
+}
+
+const styles = StyleSheet.create({
+  centerContent: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  mainText: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 10,
+    color: ColorPalette.primary,
+  },
+  subText: {
+    fontSize: 14,
+    color: ColorPalette.strongPrimary,
+  },
+});

apps/computer-vision/screens/ClassificationScreen.tsx → apps/computer-vision/app/classification/index.tsx

@@ -1,24 +1,25 @@
-import { useState } from 'react';
 import Spinner from 'react-native-loading-spinner-overlay';
-import { BottomBar } from '../components/BottomBar';
-import { getImage } from '../utils';
+import { getImage } from '../../utils';
 import { useClassification, EFFICIENTNET_V2_S } from 'react-native-executorch';
 import { View, StyleSheet, Image, Text, ScrollView } from 'react-native';
+import { BottomBar } from '../../components/BottomBar';
+import React, { useContext, useEffect, useState } from 'react';
+import { GeneratingContext } from '../../context';
+import ScreenWrapper from '../../ScreenWrapper';
 
-export const ClassificationScreen = ({
-  imageUri,
-  setImageUri,
-}: {
-  imageUri: string;
-  setImageUri: (imageUri: string) => void;
-}) => {
+export default function ClassificationScreen() {
   const [results, setResults] = useState<{ label: string; score: number }[]>(
     []
   );
+  const [imageUri, setImageUri] = useState('');
 
   const model = useClassification({
     modelSource: EFFICIENTNET_V2_S,
   });
+  const { setGlobalGenerating } = useContext(GeneratingContext);
+  useEffect(() => {
+    setGlobalGenerating(model.isGenerating);
+  }, [model.isGenerating, setGlobalGenerating]);
 
   const handleCameraPress = async (isCamera: boolean) => {
     const image = await getImage(isCamera);
@@ -52,17 +53,16 @@ export const ClassificationScreen = ({
       />
     );
   }
-
   return (
-    <>
+    <ScreenWrapper>
       <View style={styles.imageContainer}>
         <Image
           style={styles.image}
           resizeMode="contain"
           source={
             imageUri
               ? { uri: imageUri }
-              : require('../assets/icons/executorch_logo.png')
+              : require('../../assets/icons/executorch_logo.png')
           }
         />
         {results.length > 0 && (
@@ -83,9 +83,9 @@ export const ClassificationScreen = ({
         handleCameraPress={handleCameraPress}
         runForward={runForward}
       />
-    </>
+    </ScreenWrapper>
   );
-};
+}
 
 const styles = StyleSheet.create({
   imageContainer: {