From c311d48ec387fee177c4a0a9ab72f4c570cc0691 Mon Sep 17 00:00:00 2001
From: Bartosz Hanc <bartosz.hanc02@gmail.com>
Date: Mon, 22 Jun 2026 04:03:57 +0200
Subject: [PATCH 1/9] chore: clean up and unify example app layout, styling,
 and dependencies

---
 .cspell-wordlist.txt                          |   1 +
 apps/computer-vision/app/_layout.tsx          |   7 +
 .../app/classification/index.tsx              | 315 +++-----
 apps/computer-vision/app/index.tsx            |   3 +
 apps/computer-vision/app/inspect/index.tsx    | 195 +++--
 apps/computer-vision/commonStyles.ts          |  32 +
 apps/computer-vision/components/Button.tsx    | 102 +++
 .../components/ImageViewport.tsx              |  91 +++
 .../components/LatencyIndicator.tsx           |  34 +
 .../components/ModelStatus.tsx                |  69 ++
 .../{ => components}/ScreenWrapper.tsx        |   0
 apps/computer-vision/package.json             |  13 +-
 apps/computer-vision/theme.ts                 |  41 +
 apps/computer-vision/utils.ts                 |  79 +-
 package.json                                  |   8 +-
 packages/react-native-executorch/package.json |   5 +-
 patches/react-native-worklets+0.9.1.patch     | 748 ++++++++++++++++++
 yarn.lock                                     | 359 +++++++--
 18 files changed, 1679 insertions(+), 423 deletions(-)
 create mode 100644 apps/computer-vision/commonStyles.ts
 create mode 100644 apps/computer-vision/components/Button.tsx
 create mode 100644 apps/computer-vision/components/ImageViewport.tsx
 create mode 100644 apps/computer-vision/components/LatencyIndicator.tsx
 create mode 100644 apps/computer-vision/components/ModelStatus.tsx
 rename apps/computer-vision/{ => components}/ScreenWrapper.tsx (100%)
 create mode 100644 apps/computer-vision/theme.ts
 create mode 100644 patches/react-native-worklets+0.9.1.patch

diff --git a/.cspell-wordlist.txt b/.cspell-wordlist.txt
index fd8fb360b5..fef84a8a24 100644
--- a/.cspell-wordlist.txt
+++ b/.cspell-wordlist.txt
@@ -229,3 +229,4 @@ imgproc
 c10
 probas
 Probas
+Skia
diff --git a/apps/computer-vision/app/_layout.tsx b/apps/computer-vision/app/_layout.tsx
index f5506bd40c..4c06fe72a7 100644
--- a/apps/computer-vision/app/_layout.tsx
+++ b/apps/computer-vision/app/_layout.tsx
@@ -27,6 +27,13 @@ export default function Layout() {
           title: 'Classification',
         }}
       />
+      <Drawer.Screen
+        name="segmentation/index"
+        options={{
+          drawerLabel: 'Semantic Segmentation',
+          title: 'Semantic Segmentation',
+        }}
+      />
       <Drawer.Screen
         name="inspect/index"
         options={{
diff --git a/apps/computer-vision/app/classification/index.tsx b/apps/computer-vision/app/classification/index.tsx
index f02b93d740..f889da9f24 100644
--- a/apps/computer-vision/app/classification/index.tsx
+++ b/apps/computer-vision/app/classification/index.tsx
@@ -1,20 +1,16 @@
 import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Image,
-  TouchableOpacity,
-  ScrollView,
-  ActivityIndicator,
-  Platform,
-} from 'react-native';
-import { Skia } from '@shopify/react-native-skia';
+import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
+import { commonStyles } from '../../commonStyles';
+import { type SkImage as SkiaImageType } from '@shopify/react-native-skia';
 import { useClassifier, models } from 'react-native-executorch';
-import ScreenWrapper from '../../ScreenWrapper';
+import ScreenWrapper from '../../components/ScreenWrapper';
 import ColorPalette from '../../colors';
-import { getImage } from '../../utils';
+import { getImage, loadSkImage } from '../../utils';
 import { ModelPicker, type ModelOption } from '../../components/ModelPicker';
+import { ImageViewport } from '../../components/ImageViewport';
+import { ModelStatus } from '../../components/ModelStatus';
+import { LatencyIndicator } from '../../components/LatencyIndicator';
+import { Button } from '../../components/Button';
 
 const MODEL_OPTIONS: ModelOption[] = [
   {
@@ -32,25 +28,10 @@ const MODEL_OPTIONS: ModelOption[] = [
   },
 ];
 
-async function loadImageBuffer(uri: string) {
-  const data = await Skia.Data.fromURI(uri);
-  const img = Skia.Image.MakeImageFromEncoded(data);
-  if (!img) {
-    throw new Error('Failed to decode image using Skia');
-  }
-  return {
-    data: img.readPixels() as Uint8Array,
-    width: img.width(),
-    height: img.height(),
-    format: 'rgba' as const,
-    layout: 'hwc' as const,
-  };
-}
-
-export default function ClassificationScreen() {
+function ClassificationContent() {
   const [selectedModel, setSelectedModel] = useState<any>(MODEL_OPTIONS[0].value);
-  const [imageUri, setImageUri] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [skiaImage, setSkiaImage] = useState<SkiaImageType | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
   const [results, setResults] = useState<{ label: string; confidence: number }[]>([]);
   const [latency, setLatency] = useState<number | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -66,7 +47,8 @@ export default function ClassificationScreen() {
   const handlePickImage = async (useCamera: boolean) => {
     const asset = await getImage(useCamera);
     if (asset?.uri) {
-      setImageUri(asset.uri);
+      const img = await loadSkImage(asset.uri);
+      setSkiaImage(img);
       setResults([]);
       setLatency(null);
       setError(null);
@@ -74,218 +56,111 @@ export default function ClassificationScreen() {
   };
 
   const runClassification = async (sync: boolean) => {
-    if (!imageUri || !classify || !classifyWorklet) return;
-    if (!sync) setLoading(true);
+    if (!skiaImage || !classify || !classifyWorklet) return;
+    if (!sync) setIsProcessing(true);
     setError(null);
     try {
-      const inputBuffer = await loadImageBuffer(imageUri);
+      const buffer = {
+        data: skiaImage.readPixels() as Uint8Array,
+        width: skiaImage.width(),
+        height: skiaImage.height(),
+        format: 'rgba' as const,
+        layout: 'hwc' as const,
+      };
       const start = Date.now();
       const output = sync
-        ? classifyWorklet(inputBuffer, { topk: 5 })
-        : await classify(inputBuffer, { topk: 5 });
+        ? classifyWorklet(buffer, { topk: 5 })
+        : await classify(buffer, { topk: 5 });
+
       setLatency(Date.now() - start);
       setResults(output);
     } catch (e: any) {
       setError(e.message || String(e));
     } finally {
-      if (!sync) setLoading(false);
+      if (!sync) setIsProcessing(false);
     }
   };
 
   const activeError = loadError ? String(loadError) : error;
 
   return (
-    <ScreenWrapper>
-      <ScrollView contentContainerStyle={styles.container}>
-        <Text style={styles.title}>Image Classification</Text>
-
-        <ModelPicker
-          label="Model"
-          options={MODEL_OPTIONS}
-          selectedValue={selectedModel}
-          onValueChange={(model) => {
-            setSelectedModel(model);
-            setResults([]);
-            setLatency(null);
-            setError(null);
-          }}
+    <ScrollView
+      style={commonStyles.container}
+      contentContainerStyle={commonStyles.contentContainer}
+    >
+      <Text style={commonStyles.description}>
+        Upload or capture an image to identify objects using an EfficientNet classifier.
+      </Text>
+
+      <ModelPicker
+        label="Model"
+        options={MODEL_OPTIONS}
+        selectedValue={selectedModel}
+        onValueChange={(model) => {
+          setSelectedModel(model);
+          setResults([]);
+          setLatency(null);
+          setError(null);
+        }}
+      />
+
+      <ModelStatus
+        isReady={isReady}
+        downloadProgress={downloadProgress}
+        error={activeError}
+        modelTypeLabel="classification model"
+      />
+
+      <ImageViewport skiaImage={skiaImage} onPressPlaceholder={() => handlePickImage(false)} />
+
+      <View style={commonStyles.buttonRow}>
+        <Button title="Gallery" onPress={() => handlePickImage(false)} variant="secondary" />
+        <Button title="Camera" onPress={() => handlePickImage(true)} variant="secondary" />
+      </View>
+
+      <View style={commonStyles.buttonRow}>
+        <Button
+          title="Run Async"
+          onPress={() => runClassification(false)}
+          disabled={!skiaImage || !isReady || isProcessing}
+          loading={isProcessing}
         />
-
-        {!isReady && !activeError && (
-          <View style={styles.progressContainer}>
-            <ActivityIndicator size="small" color={ColorPalette.primary} />
-            <Text style={styles.progressText}>
-              Downloading Model... {downloadProgress ? `${Math.round(downloadProgress)}%` : '0%'}
-            </Text>
-          </View>
-        )}
-
-        {activeError && (
-          <View style={styles.errorContainer}>
-            <Text style={styles.errorText}>{activeError}</Text>
-          </View>
-        )}
-
-        <View style={styles.imageCard}>
-          {imageUri ? (
-            <Image source={{ uri: imageUri }} style={styles.image} resizeMode="contain" />
-          ) : (
-            <View style={styles.imagePlaceholder}>
-              <Text style={styles.placeholderText}>No image selected</Text>
+        <Button
+          title="Run Sync"
+          onPress={() => runClassification(true)}
+          disabled={!skiaImage || !isReady || isProcessing}
+          variant="accent"
+        />
+      </View>
+
+      <LatencyIndicator latency={latency} />
+
+      {results.length > 0 && (
+        <View style={styles.resultsContainer}>
+          <Text style={styles.resultsTitle}>Results</Text>
+          {results.map((res, idx) => (
+            <View key={idx} style={styles.resultRow}>
+              <Text style={styles.resultLabel} numberOfLines={1}>
+                {res.label}
+              </Text>
+              <Text style={styles.resultConfidence}>{Math.round(res.confidence * 100)}%</Text>
             </View>
-          )}
-        </View>
-
-        <View style={styles.buttonRow}>
-          <TouchableOpacity style={styles.btnSecondary} onPress={() => handlePickImage(false)}>
-            <Text style={styles.btnTextSecondary}>Gallery</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.btnSecondary} onPress={() => handlePickImage(true)}>
-            <Text style={styles.btnTextSecondary}>Camera</Text>
-          </TouchableOpacity>
-        </View>
-
-        <View style={styles.buttonRow}>
-          <TouchableOpacity
-            style={[styles.btnPrimary, (!imageUri || !isReady || loading) && styles.btnDisabled]}
-            onPress={() => runClassification(false)}
-            disabled={!imageUri || !isReady || loading}
-          >
-            {loading ? (
-              <ActivityIndicator size="small" color="#fff" />
-            ) : (
-              <Text style={styles.btnTextPrimary}>Run Async</Text>
-            )}
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={[styles.btnSecondary, (!imageUri || !isReady || loading) && styles.btnDisabled]}
-            onPress={() => runClassification(true)}
-            disabled={!imageUri || !isReady || loading}
-          >
-            <Text style={styles.btnTextSecondary}>Run Sync</Text>
-          </TouchableOpacity>
+          ))}
         </View>
+      )}
+    </ScrollView>
+  );
+}
 
-        {latency !== null && (
-          <Text style={styles.latencyText}>Inference Latency: {latency} ms</Text>
-        )}
-
-        {results.length > 0 && (
-          <View style={styles.resultsContainer}>
-            <Text style={styles.resultsTitle}>Results</Text>
-            {results.map((res, idx) => (
-              <View key={idx} style={styles.resultRow}>
-                <Text style={styles.resultLabel} numberOfLines={1}>
-                  {res.label}
-                </Text>
-                <Text style={styles.resultConfidence}>{Math.round(res.confidence * 100)}%</Text>
-              </View>
-            ))}
-          </View>
-        )}
-      </ScrollView>
+export default function ClassificationScreen() {
+  return (
+    <ScreenWrapper>
+      <ClassificationContent />
     </ScreenWrapper>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    padding: 16,
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: 22,
-    fontWeight: '700',
-    color: ColorPalette.strongPrimary,
-    marginBottom: 16,
-  },
-  progressContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 12,
-    gap: 8,
-  },
-  progressText: {
-    fontSize: 14,
-    color: '#666',
-  },
-  errorContainer: {
-    backgroundColor: '#ffe3e3',
-    padding: 12,
-    borderRadius: 8,
-    marginVertical: 8,
-    alignSelf: 'stretch',
-  },
-  errorText: {
-    color: '#d63031',
-    fontSize: 14,
-    textAlign: 'center',
-  },
-  imageCard: {
-    width: '100%',
-    height: 250,
-    backgroundColor: '#f1f3f5',
-    borderRadius: 12,
-    marginVertical: 16,
-    overflow: 'hidden',
-    borderWidth: 1,
-    borderColor: '#e9ecef',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-  },
-  imagePlaceholder: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  placeholderText: {
-    color: '#868e96',
-    fontSize: 14,
-  },
-  buttonRow: {
-    flexDirection: 'row',
-    gap: 8,
-    width: '100%',
-    marginBottom: 12,
-  },
-  btnPrimary: {
-    flex: 1,
-    backgroundColor: ColorPalette.primary,
-    paddingVertical: 12,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  btnSecondary: {
-    flex: 1,
-    borderWidth: 1,
-    borderColor: ColorPalette.primary,
-    paddingVertical: 12,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  btnDisabled: {
-    opacity: 0.5,
-  },
-  btnTextPrimary: {
-    color: '#fff',
-    fontSize: 15,
-    fontWeight: '600',
-  },
-  btnTextSecondary: {
-    color: ColorPalette.primary,
-    fontSize: 15,
-    fontWeight: '600',
-  },
-  latencyText: {
-    fontSize: 14,
-    color: '#666',
-    marginVertical: 12,
-  },
   resultsContainer: {
     width: '100%',
     backgroundColor: '#fff',
diff --git a/apps/computer-vision/app/index.tsx b/apps/computer-vision/app/index.tsx
index a3e035073e..f87e665c83 100644
--- a/apps/computer-vision/app/index.tsx
+++ b/apps/computer-vision/app/index.tsx
@@ -14,6 +14,9 @@ export default function Home() {
         <TouchableOpacity style={styles.button} onPress={() => router.navigate('classification/')}>
           <Text style={styles.buttonText}>Classification</Text>
         </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={() => router.navigate('segmentation/')}>
+          <Text style={styles.buttonText}>Segmentation</Text>
+        </TouchableOpacity>
         <TouchableOpacity style={styles.button} onPress={() => router.navigate('inspect/')}>
           <Text style={styles.buttonText}>Model Inspector</Text>
         </TouchableOpacity>
diff --git a/apps/computer-vision/app/inspect/index.tsx b/apps/computer-vision/app/inspect/index.tsx
index f8de248506..68b7fa3149 100644
--- a/apps/computer-vision/app/inspect/index.tsx
+++ b/apps/computer-vision/app/inspect/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   View,
   Text,
@@ -10,17 +10,26 @@ import {
   Alert,
 } from 'react-native';
 import { inspectModel, type TensorMeta } from 'react-native-executorch';
-import ScreenWrapper from '../../ScreenWrapper';
+import ScreenWrapper from '../../components/ScreenWrapper';
 import ColorPalette from '../../colors';
 
 type InspectionResult = Awaited<ReturnType<typeof inspectModel>>;
 
-export default function InspectScreen() {
+function InspectContent() {
   const [url, setUrl] = useState('');
   const [loading, setLoading] = useState(false);
   const [result, setResult] = useState<InspectionResult | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
   const handleInspect = async (targetUrl: string) => {
     if (!targetUrl.trim()) {
       Alert.alert('Error', 'Please enter a valid URL');
@@ -31,11 +40,17 @@ export default function InspectScreen() {
     setError(null);
     try {
       const res = await inspectModel(targetUrl.trim());
-      setResult(res);
+      if (isMountedRef.current) {
+        setResult(res);
+      }
     } catch (e: any) {
-      setError(e.message || String(e));
+      if (isMountedRef.current) {
+        setError(e.message || String(e));
+      }
     } finally {
-      setLoading(false);
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
     }
   };
 
@@ -67,100 +82,106 @@ export default function InspectScreen() {
   };
 
   return (
-    <ScreenWrapper>
-      <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
-        <View style={styles.card}>
-          <Text style={styles.cardTitle}>Model URL Inspector</Text>
-          <Text style={styles.cardDescription}>
-            Paste a URL to an ExecuTorch (.pte) model below to download and inspect its metadata and
-            methods.
-          </Text>
+    <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
+      <View style={styles.card}>
+        <Text style={styles.cardTitle}>Model URL Inspector</Text>
+        <Text style={styles.cardDescription}>
+          Paste a URL to an ExecuTorch (.pte) model below to download and inspect its metadata and
+          methods.
+        </Text>
+
+        <TextInput
+          style={styles.input}
+          placeholder="https://example.com/model.pte"
+          placeholderTextColor="#999"
+          value={url}
+          onChangeText={setUrl}
+          autoCapitalize="none"
+          autoCorrect={false}
+          keyboardType="url"
+          multiline
+        />
 
-          <TextInput
-            style={styles.input}
-            placeholder="https://example.com/model.pte"
-            placeholderTextColor="#999"
-            value={url}
-            onChangeText={setUrl}
-            autoCapitalize="none"
-            autoCorrect={false}
-            keyboardType="url"
-            multiline
-          />
+        <TouchableOpacity
+          style={[styles.button, loading && styles.buttonDisabled]}
+          onPress={() => handleInspect(url)}
+          disabled={loading}
+          activeOpacity={0.8}
+        >
+          {loading ? (
+            <ActivityIndicator color="#fff" size="small" />
+          ) : (
+            <Text style={styles.buttonText}>Inspect Model</Text>
+          )}
+        </TouchableOpacity>
+      </View>
 
-          <TouchableOpacity
-            style={[styles.button, loading && styles.buttonDisabled]}
-            onPress={() => handleInspect(url)}
-            disabled={loading}
-            activeOpacity={0.8}
-          >
-            {loading ? (
-              <ActivityIndicator color="#fff" size="small" />
-            ) : (
-              <Text style={styles.buttonText}>Inspect Model</Text>
-            )}
-          </TouchableOpacity>
+      {error && (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>{error}</Text>
         </View>
+      )}
 
-        {error && (
-          <View style={styles.errorContainer}>
-            <Text style={styles.errorText}>{error}</Text>
-          </View>
-        )}
+      {result && (
+        <View style={styles.resultsCard}>
+          <Text style={styles.resultsHeader}>Inspection Results</Text>
+          <Text style={styles.sourceLabel}>Source URL:</Text>
+          <Text style={styles.sourceValue}>{result.source}</Text>
 
-        {result && (
-          <View style={styles.resultsCard}>
-            <Text style={styles.resultsHeader}>Inspection Results</Text>
-            <Text style={styles.sourceLabel}>Source URL:</Text>
-            <Text style={styles.sourceValue}>{result.source}</Text>
+          <Text style={styles.methodsTitle}>Methods ({result.methods.length})</Text>
 
-            <Text style={styles.methodsTitle}>Methods ({result.methods.length})</Text>
+          {result.methods.map((method, mIdx) => (
+            <View key={mIdx} style={styles.methodContainer}>
+              <View style={styles.methodHeader}>
+                <Text style={styles.methodName}>{method.name}</Text>
+                <View style={styles.badge}>
+                  <Text style={styles.badgeText}>Method</Text>
+                </View>
+              </View>
 
-            {result.methods.map((method, mIdx) => (
-              <View key={mIdx} style={styles.methodContainer}>
-                <View style={styles.methodHeader}>
-                  <Text style={styles.methodName}>{method.name}</Text>
-                  <View style={styles.badge}>
-                    <Text style={styles.badgeText}>Method</Text>
-                  </View>
+              <View style={styles.statsRow}>
+                <View style={styles.statBox}>
+                  <Text style={styles.statVal}>{method.meta.numInputs}</Text>
+                  <Text style={styles.statLabel}>Inputs</Text>
+                </View>
+                <View style={styles.statBox}>
+                  <Text style={styles.statVal}>{method.meta.numOutputs}</Text>
+                  <Text style={styles.statLabel}>Outputs</Text>
                 </View>
+              </View>
 
-                <View style={styles.statsRow}>
-                  <View style={styles.statBox}>
-                    <Text style={styles.statVal}>{method.meta.numInputs}</Text>
-                    <Text style={styles.statLabel}>Inputs</Text>
-                  </View>
-                  <View style={styles.statBox}>
-                    <Text style={styles.statVal}>{method.meta.numOutputs}</Text>
-                    <Text style={styles.statLabel}>Outputs</Text>
+              {method.meta.usesBackend && Object.keys(method.meta.usesBackend).length > 0 && (
+                <View style={styles.metaSection}>
+                  <Text style={styles.metaSectionTitle}>Backends Used:</Text>
+                  <View style={styles.tagRow}>
+                    {Object.entries(method.meta.usesBackend).map(([backend, used]) => (
+                      <View
+                        key={backend}
+                        style={[styles.tag, used ? styles.tagActive : styles.tagInactive]}
+                      >
+                        <Text style={used ? styles.tagActiveText : styles.tagInactiveText}>
+                          {backend}: {used ? 'Yes' : 'No'}
+                        </Text>
+                      </View>
+                    ))}
                   </View>
                 </View>
+              )}
 
-                {method.meta.usesBackend && Object.keys(method.meta.usesBackend).length > 0 && (
-                  <View style={styles.metaSection}>
-                    <Text style={styles.metaSectionTitle}>Backends Used:</Text>
-                    <View style={styles.tagRow}>
-                      {Object.entries(method.meta.usesBackend).map(([backend, used]) => (
-                        <View
-                          key={backend}
-                          style={[styles.tag, used ? styles.tagActive : styles.tagInactive]}
-                        >
-                          <Text style={used ? styles.tagActiveText : styles.tagInactiveText}>
-                            {backend}: {used ? 'Yes' : 'No'}
-                          </Text>
-                        </View>
-                      ))}
-                    </View>
-                  </View>
-                )}
+              {renderTensorList(method.meta.inputTensorMeta, 'Input Tensors')}
+              {renderTensorList(method.meta.outputTensorMeta, 'Output Tensors')}
+            </View>
+          ))}
+        </View>
+      )}
+    </ScrollView>
+  );
+}
 
-                {renderTensorList(method.meta.inputTensorMeta, 'Input Tensors')}
-                {renderTensorList(method.meta.outputTensorMeta, 'Output Tensors')}
-              </View>
-            ))}
-          </View>
-        )}
-      </ScrollView>
+export default function InspectScreen() {
+  return (
+    <ScreenWrapper>
+      <InspectContent />
     </ScreenWrapper>
   );
 }
diff --git a/apps/computer-vision/commonStyles.ts b/apps/computer-vision/commonStyles.ts
new file mode 100644
index 0000000000..22040b7187
--- /dev/null
+++ b/apps/computer-vision/commonStyles.ts
@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import { theme } from './theme';
+
+export const commonStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  contentContainer: {
+    padding: theme.spacing.large,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: theme.typography.title.fontSize,
+    fontWeight: theme.typography.title.fontWeight,
+    color: theme.colors.strongPrimary,
+    marginBottom: theme.spacing.large,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    gap: theme.spacing.small,
+    width: '100%',
+    marginBottom: theme.spacing.large,
+  },
+  description: {
+    fontSize: theme.typography.body.fontSize,
+    color: theme.colors.textMuted,
+    textAlign: 'center',
+    marginBottom: theme.spacing.large,
+    paddingHorizontal: theme.spacing.medium,
+  },
+});
diff --git a/apps/computer-vision/components/Button.tsx b/apps/computer-vision/components/Button.tsx
new file mode 100644
index 0000000000..6c4c5d8081
--- /dev/null
+++ b/apps/computer-vision/components/Button.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  Text,
+  ActivityIndicator,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { theme } from '../theme';
+
+export interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'accent';
+  disabled?: boolean;
+  loading?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Button({
+  title,
+  onPress,
+  variant = 'primary',
+  disabled = false,
+  loading = false,
+  style,
+}: ButtonProps) {
+  const buttonStyles = [
+    styles.button,
+    variant === 'primary' && styles.primary,
+    variant === 'secondary' && styles.secondary,
+    variant === 'accent' && styles.accent,
+    disabled && styles.disabled,
+    style,
+  ];
+
+  const textStyles = [
+    styles.text,
+    variant === 'primary' && styles.textPrimary,
+    variant === 'secondary' && styles.textSecondary,
+    variant === 'accent' && styles.textPrimary,
+    disabled && styles.textDisabled,
+  ];
+
+  return (
+    <TouchableOpacity
+      style={buttonStyles}
+      onPress={onPress}
+      disabled={disabled || loading}
+      activeOpacity={0.8}
+    >
+      {loading ? (
+        <ActivityIndicator
+          size="small"
+          color={variant === 'secondary' ? theme.colors.primary : '#fff'}
+        />
+      ) : (
+        <Text style={textStyles}>{title}</Text>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+    paddingVertical: 14,
+    borderRadius: theme.radius.medium,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  primary: {
+    backgroundColor: theme.colors.strongPrimary,
+  },
+  secondary: {
+    backgroundColor: theme.colors.secondary,
+    borderColor: theme.colors.strongPrimary,
+    borderWidth: 1.5,
+  },
+  accent: {
+    backgroundColor: theme.colors.accent,
+  },
+  disabled: {
+    backgroundColor: '#aaa',
+    borderColor: '#aaa',
+    opacity: 0.6,
+  },
+  text: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  textPrimary: {
+    color: theme.colors.textPrimary,
+  },
+  textSecondary: {
+    color: theme.colors.textSecondary,
+  },
+  textDisabled: {
+    color: '#666',
+  },
+});
diff --git a/apps/computer-vision/components/ImageViewport.tsx b/apps/computer-vision/components/ImageViewport.tsx
new file mode 100644
index 0000000000..be9c3d2262
--- /dev/null
+++ b/apps/computer-vision/components/ImageViewport.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
+import {
+  Canvas,
+  Image as SkImage,
+  type SkImage as SkiaImageType,
+} from '@shopify/react-native-skia';
+
+import { theme } from '../theme';
+
+const VIEW_WIDTH = Dimensions.get('window').width - 32;
+const VIEW_HEIGHT = Math.round((VIEW_WIDTH * 16) / 9);
+
+export interface ImageViewportProps {
+  skiaImage: SkiaImageType | null;
+  overlayImage?: SkiaImageType | null;
+  onPressPlaceholder: () => void;
+  placeholderText?: string;
+  overlayOpacity?: number;
+}
+
+export function ImageViewport({
+  skiaImage,
+  overlayImage,
+  onPressPlaceholder,
+  placeholderText = 'Tap to select an image from gallery',
+  overlayOpacity = 0.8,
+}: ImageViewportProps) {
+  if (!skiaImage) {
+    return (
+      <TouchableOpacity style={styles.placeholder} onPress={onPressPlaceholder}>
+        <Text style={styles.placeholderText}>{placeholderText}</Text>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <View style={[styles.canvasWrapper, { width: VIEW_WIDTH, height: VIEW_HEIGHT }]}>
+      <Canvas style={styles.canvas}>
+        <SkImage
+          image={skiaImage}
+          fit="contain"
+          x={0}
+          y={0}
+          width={VIEW_WIDTH}
+          height={VIEW_HEIGHT}
+        />
+        {overlayImage && (
+          <SkImage
+            image={overlayImage}
+            fit="contain"
+            x={0}
+            y={0}
+            width={VIEW_WIDTH}
+            height={VIEW_HEIGHT}
+            opacity={overlayOpacity}
+          />
+        )}
+      </Canvas>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  placeholder: {
+    width: '100%',
+    height: VIEW_HEIGHT,
+    borderWidth: 2,
+    borderColor: theme.colors.border,
+    borderStyle: 'dashed',
+    borderRadius: theme.radius.large,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.placeholderBackground,
+    marginBottom: 20,
+  },
+  placeholderText: {
+    color: theme.colors.textMuted,
+    fontSize: 16,
+    textAlign: 'center',
+    paddingHorizontal: 32,
+  },
+  canvasWrapper: {
+    position: 'relative',
+    backgroundColor: '#000',
+    borderRadius: theme.radius.large,
+    overflow: 'hidden',
+    marginBottom: 20,
+  },
+  canvas: { width: '100%', height: '100%' },
+});
diff --git a/apps/computer-vision/components/LatencyIndicator.tsx b/apps/computer-vision/components/LatencyIndicator.tsx
new file mode 100644
index 0000000000..cf53d8a982
--- /dev/null
+++ b/apps/computer-vision/components/LatencyIndicator.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+export interface LatencyIndicatorProps {
+  latency: number | null;
+}
+
+export function LatencyIndicator({ latency }: LatencyIndicatorProps) {
+  if (latency === null) return null;
+
+  return (
+    <View style={styles.perfBox}>
+      <Text style={styles.perfLabel}>Total Pipeline Latency:</Text>
+      <Text style={styles.perfValue}>{latency} ms</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  perfBox: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    backgroundColor: '#e8f0fe',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 12,
+    marginBottom: 16,
+    width: '100%',
+    borderColor: '#c2d7fa',
+    borderWidth: 1,
+  },
+  perfLabel: { fontSize: 14, fontWeight: '600', color: '#1a73e8' },
+  perfValue: { fontSize: 14, fontWeight: '700', color: '#1a73e8' },
+});
diff --git a/apps/computer-vision/components/ModelStatus.tsx b/apps/computer-vision/components/ModelStatus.tsx
new file mode 100644
index 0000000000..0234ac53f8
--- /dev/null
+++ b/apps/computer-vision/components/ModelStatus.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';
+import { theme } from '../theme';
+
+export interface ModelStatusProps {
+  isReady: boolean;
+  downloadProgress?: number | null;
+  error?: string | null;
+  modelTypeLabel?: string;
+}
+
+export function ModelStatus({
+  isReady,
+  downloadProgress,
+  error,
+  modelTypeLabel = 'model',
+}: ModelStatusProps) {
+  if (error) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>{error}</Text>
+      </View>
+    );
+  }
+
+  if (!isReady) {
+    return (
+      <View style={styles.statusBox}>
+        <ActivityIndicator color="#a0522d" size="small" style={styles.statusIndicator} />
+        <Text style={styles.statusText}>
+          Downloading {modelTypeLabel}...{' '}
+          {downloadProgress ? `${Math.round(downloadProgress)}%` : '0%'}
+        </Text>
+      </View>
+    );
+  }
+
+  return null;
+}
+
+const styles = StyleSheet.create({
+  statusBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#ffe8d6',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: theme.radius.small,
+    marginBottom: 16,
+    width: '100%',
+  },
+  statusIndicator: {
+    marginRight: 8,
+  },
+  statusText: { fontSize: 13, color: '#a0522d', fontWeight: '500' },
+  errorContainer: {
+    backgroundColor: theme.colors.errorBackground,
+    padding: 12,
+    borderRadius: theme.radius.small,
+    marginVertical: 8,
+    alignSelf: 'stretch',
+    marginBottom: 16,
+  },
+  errorText: {
+    color: theme.colors.errorText,
+    fontSize: 14,
+    textAlign: 'center',
+  },
+});
diff --git a/apps/computer-vision/ScreenWrapper.tsx b/apps/computer-vision/components/ScreenWrapper.tsx
similarity index 100%
rename from apps/computer-vision/ScreenWrapper.tsx
rename to apps/computer-vision/components/ScreenWrapper.tsx
diff --git a/apps/computer-vision/package.json b/apps/computer-vision/package.json
index d3bf5361cd..9f1ce3f11f 100644
--- a/apps/computer-vision/package.json
+++ b/apps/computer-vision/package.json
@@ -8,7 +8,8 @@
     "ios": "expo run:ios",
     "web": "expo start --web",
     "typecheck": "tsc",
-    "lint": "eslint . --ext .ts,.tsx --fix"
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "postinstall": "yarn run -T patch-package --patch-dir ../../patches"
   },
   "dependencies": {
     "@react-navigation/drawer": "^7.9.4",
@@ -17,6 +18,8 @@
     "expo": "~56.0.9",
     "expo-build-properties": "~56.0.17",
     "expo-constants": "~56.0.17",
+    "expo-image-manipulator": "~56.0.18",
+    "expo-image-picker": "~56.0.18",
     "expo-linking": "~56.0.13",
     "expo-router": "~56.2.9",
     "react": "19.2.3",
@@ -25,17 +28,19 @@
     "react-native-executorch": "workspace:*",
     "react-native-gesture-handler": "~2.31.1",
     "react-native-image-picker": "^8.2.1",
-    "react-native-reanimated": "4.3.1",
+    "react-native-reanimated": "4.4.0",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "~4.25.2",
     "react-native-svg": "15.15.4",
-    "react-native-worklets": "0.8.3"
+    "react-native-worklets": "0.9.1"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
+    "@react-native/metro-config": "^0.86.0",
     "@types/react": "~19.2.0",
     "babel-preset-expo": "~56.0.14",
-    "react-native-svg-transformer": "^1.5.3"
+    "react-native-svg-transformer": "^1.5.3",
+    "react-refresh": "^0.14.0"
   },
   "private": true
 }
diff --git a/apps/computer-vision/theme.ts b/apps/computer-vision/theme.ts
new file mode 100644
index 0000000000..21522221b0
--- /dev/null
+++ b/apps/computer-vision/theme.ts
@@ -0,0 +1,41 @@
+import ColorPalette from './colors';
+
+export const theme = {
+  colors: {
+    primary: ColorPalette.primary,
+    strongPrimary: ColorPalette.strongPrimary,
+    secondary: '#ffffff',
+    accent: '#1a73e8', // Blue color used for synchronous runs
+    background: '#f5f5f5',
+    cardBackground: '#ffffff',
+    placeholderBackground: '#eaeaea',
+    border: '#ccc',
+    lightBorder: '#e9ecef',
+    errorBackground: '#ffe3e3',
+    errorText: '#d63031',
+    textPrimary: '#ffffff',
+    textSecondary: '#000000',
+    textMuted: '#666666',
+    textPlaceholder: '#868e96',
+  },
+  radius: {
+    small: 8,
+    medium: 12,
+    large: 16,
+  },
+  spacing: {
+    small: 8,
+    medium: 12,
+    large: 16,
+  },
+  typography: {
+    title: {
+      fontSize: 22,
+      fontWeight: '700' as const,
+    },
+    body: {
+      fontSize: 14,
+      color: '#333333',
+    },
+  },
+};
diff --git a/apps/computer-vision/utils.ts b/apps/computer-vision/utils.ts
index 09639cf6f9..c9085e7deb 100644
--- a/apps/computer-vision/utils.ts
+++ b/apps/computer-vision/utils.ts
@@ -1,39 +1,54 @@
-import { PermissionsAndroid, Platform } from 'react-native';
-import { CameraOptions, launchCamera, launchImageLibrary } from 'react-native-image-picker';
-
-export const getImage = async (useCamera: boolean) => {
-  if (useCamera && Platform.OS === 'android') {
-    try {
-      const hasPermission = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.CAMERA);
-      if (!hasPermission) {
-        const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA, {
-          title: 'Camera Permission',
-          message: 'This app needs access to your camera to take photos.',
-          buttonNeutral: 'Ask Me Later',
-          buttonNegative: 'Cancel',
-          buttonPositive: 'OK',
-        });
-        if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
-          console.warn('Camera permission denied');
-          return;
-        }
-      }
-    } catch (err) {
-      console.warn('Failed to request camera permission:', err);
-      return;
-    }
+import { Alert } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+import { ImageManipulator, SaveFormat } from 'expo-image-manipulator';
+import { Skia, SkImage } from '@shopify/react-native-skia';
+
+export const getImage = async (
+  useCamera: boolean
+): Promise<ImagePicker.ImagePickerAsset | undefined> => {
+  const permissionResult = useCamera
+    ? await ImagePicker.requestCameraPermissionsAsync()
+    : await ImagePicker.requestMediaLibraryPermissionsAsync();
+
+  if (!permissionResult.granted) {
+    Alert.alert(
+      'Permission Required',
+      useCamera
+        ? 'Permission to access camera is required!'
+        : 'Permission to access camera roll is required!'
+    );
+    return;
   }
 
-  const options: CameraOptions = {
-    mediaType: 'photo',
+  const options: ImagePicker.ImagePickerOptions = {
+    mediaTypes: ['images'],
+    allowsEditing: false,
+    quality: 1,
   };
-  try {
-    const output = useCamera ? await launchCamera(options) : await launchImageLibrary(options);
 
-    if (!output.assets || output.assets.length === 0) return;
+  const pickerResult = useCamera
+    ? await ImagePicker.launchCameraAsync(options)
+    : await ImagePicker.launchImageLibraryAsync(options);
+
+  if (pickerResult.canceled || !pickerResult.assets[0]) {
+    return;
+  }
 
-    return output.assets[0];
-  } catch (err) {
-    console.error(err);
+  return pickerResult.assets[0];
+};
+
+export const loadSkImage = async (uri: string, targetWidth = 800): Promise<SkImage> => {
+  const result = await ImageManipulator.manipulate(uri)
+    .resize({ width: targetWidth })
+    .renderAsync()
+    .then((res) => res.saveAsync({ format: SaveFormat.PNG }));
+
+  const encoded = await Skia.Data.fromURI(result.uri);
+  try {
+    const img = Skia.Image.MakeImageFromEncoded(encoded);
+    if (!img) throw new Error('Failed to create SkImage');
+    return img;
+  } finally {
+    encoded.dispose();
   }
 };
diff --git a/package.json b/package.json
index f1f15edb2c..2037220fd9 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   "scripts": {
     "prepare": "yarn workspaces foreach --all --exclude react-native-executorch-bare-resource-fetcher --exclude react-native-executorch-expo-resource-fetcher --exclude react-native-executorch-webrtc --topological-dev run prepare",
     "lint": "yarn workspaces foreach --all --exclude react-native-executorch-bare-resource-fetcher --exclude react-native-executorch-expo-resource-fetcher --exclude react-native-executorch-webrtc --parallel run lint",
-    "typecheck": "yarn workspaces foreach --all --exclude react-native-executorch-bare-resource-fetcher --exclude react-native-executorch-expo-resource-fetcher --exclude react-native-executorch-webrtc --parallel run typecheck"
+    "typecheck": "yarn workspaces foreach --all --exclude react-native-executorch-bare-resource-fetcher --exclude react-native-executorch-expo-resource-fetcher --exclude react-native-executorch-webrtc --parallel run typecheck",
+    "postinstall": "patch-package"
   },
   "private": true,
   "devDependencies": {
@@ -27,8 +28,13 @@
     "eslint-plugin-markdown": "^5.1.0",
     "eslint-plugin-prettier": "^5.0.1",
     "expo-router": "~6.0.17",
+    "patch-package": "^8.0.0",
     "prettier": "^3.3.3",
     "prettier-plugin-jsdoc": "^1.3.0",
+    "react-native-worklets": "0.9.1",
     "typescript": "~5.9.2"
+  },
+  "resolutions": {
+    "react-native-worklets": "0.9.1"
   }
 }
diff --git a/packages/react-native-executorch/package.json b/packages/react-native-executorch/package.json
index ee8d66dfe5..d29d74882e 100644
--- a/packages/react-native-executorch/package.json
+++ b/packages/react-native-executorch/package.json
@@ -35,7 +35,8 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "prepack": "cp ../../README.md ./README.md",
-    "postpack": "rm ./README.md"
+    "postpack": "rm ./README.md",
+    "postinstall": "yarn run -T patch-package --patch-dir ../../patches"
   },
   "keywords": [
     "text-to-speech",
@@ -76,7 +77,9 @@
     "react-native-worklets": "*"
   },
   "devDependencies": {
+    "@babel/core": "^7.25.1",
     "@react-native/babel-preset": "0.83.6",
+    "@react-native/metro-config": "^0.86.0",
     "@types/react": "^19.1.12",
     "del-cli": "^6.0.0",
     "react": "19.2.0",
diff --git a/patches/react-native-worklets+0.9.1.patch b/patches/react-native-worklets+0.9.1.patch
new file mode 100644
index 0000000000..8dfdc126ee
--- /dev/null
+++ b/patches/react-native-worklets+0.9.1.patch
@@ -0,0 +1,748 @@
+diff --git a/node_modules/react-native-worklets/Common/cpp/worklets/NativeModules/JSIWorkletsModuleProxy.cpp b/node_modules/react-native-worklets/Common/cpp/worklets/NativeModules/JSIWorkletsModuleProxy.cpp
+index 33ff739..aa1fee2 100644
+--- a/node_modules/react-native-worklets/Common/cpp/worklets/NativeModules/JSIWorkletsModuleProxy.cpp
++++ b/node_modules/react-native-worklets/Common/cpp/worklets/NativeModules/JSIWorkletsModuleProxy.cpp
+@@ -400,6 +400,18 @@ jsi::Object JSIWorkletsModuleProxy::toOptimizedObject(jsi::Runtime &rt) const {
+         return makeSerializableRegExp(rt, pattern, flags);
+       });
+ 
++  jsi_utils::addMethod<4>(
++      rt,
++      obj,
++      "createSerializableArrayBufferView",
++      [](jsi::Runtime &rt, const jsi::Value &, const jsi::Value(&args)[4]) {
++        auto typeName = at<0>(args).getString(rt).utf8(rt);
++        auto arrayBuffer = at<1>(args).getObject(rt).getArrayBuffer(rt);
++        auto byteOffset = static_cast<size_t>(at<2>(args).asNumber());
++        auto length = static_cast<size_t>(at<3>(args).asNumber());
++        return makeSerializableArrayBuffer(rt, arrayBuffer, typeName, byteOffset, length);
++      });
++
+   jsi_utils::addMethod<2>(
+       rt, obj, "createSerializableWorklet", [](jsi::Runtime &rt, const jsi::Value &, const jsi::Value(&args)[2]) {
+         return makeSerializableWorklet(rt, at<0>(args).getObject(rt), at<1>(args).getBool());
+diff --git a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.cpp b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.cpp
+index 3114a09..26cc787 100644
+--- a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.cpp
++++ b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.cpp
+@@ -160,7 +160,12 @@ jsi::Value SerializableArrayBuffer::toJSValue(jsi::Runtime &rt) {
+   auto arrayBuffer =
+       rt.global().getPropertyAsFunction(rt, "ArrayBuffer").callAsConstructor(rt, size).getObject(rt).getArrayBuffer(rt);
+   memcpy(arrayBuffer.data(rt), data_.data(), size);
+-  return arrayBuffer;
++  if (typeName_.empty()) {
++    return arrayBuffer;
++  }
++
++  auto constructor = rt.global().getPropertyAsFunction(rt, typeName_.c_str());
++  return constructor.callAsConstructor(rt, arrayBuffer, static_cast<double>(byteOffset_), static_cast<double>(length_));
+ }
+ 
+ SerializableObject::SerializableObject(jsi::Runtime &rt, const jsi::Object &object)
+diff --git a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.cpp.orig b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.cpp.orig
+new file mode 100644
+index 0000000..3114a09
+--- /dev/null
++++ b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.cpp.orig
+@@ -0,0 +1,433 @@
++#include <jsi/jsi.h>
++#include <react/debug/react_native_assert.h>
++#include <worklets/SharedItems/Serializable.h>
++#include <worklets/SharedItems/SerializableFactory.h>
++#include <worklets/WorkletRuntime/RuntimeData.h>
++#include <worklets/WorkletRuntime/RuntimeManager.h>
++#include <worklets/WorkletRuntime/WorkletRuntime.h>
++
++#include <memory>
++#include <string>
++#include <utility>
++
++using namespace facebook;
++
++namespace worklets {
++
++namespace {
++
++jsi::Function getValueUnpacker(jsi::Runtime &rt) {
++  auto valueUnpacker = rt.global().getProperty(rt, "__valueUnpacker");
++  react_native_assert(valueUnpacker.isObject() && "valueUnpacker not found");
++  return valueUnpacker.asObject(rt).asFunction(rt);
++}
++
++jsi::Function getRemoteFunctionUnpacker(jsi::Runtime &rt) {
++  auto remoteFunctionUnpacker = rt.global().getProperty(rt, "__remoteFunctionUnpacker");
++  react_native_assert(remoteFunctionUnpacker.isObject() && "remoteFunctionUnpacker not found");
++  return remoteFunctionUnpacker.asObject(rt).asFunction(rt);
++}
++
++jsi::Object getRemoteFunctionRegistry(jsi::Runtime &rt) {
++  auto registry = rt.global().getProperty(rt, "__remoteFunctionRegistry");
++  react_native_assert(registry.isObject() && "remoteFunctionRegistry not found");
++  return registry.getObject(rt);
++}
++
++} // namespace
++
++jsi::Value makeSerializableClone(
++    jsi::Runtime &rt,
++    const jsi::Value &value,
++    const jsi::Value &shouldRetainRemote,
++    const jsi::Value &nativeStateSource) {
++  std::shared_ptr<Serializable> serializable;
++  if (value.isObject()) {
++    auto object = value.asObject(rt);
++    if (!object.getProperty(rt, "__workletHash").isUndefined()) {
++      // We pass `false` because this function is invoked only
++      // by `makeSerializableCloneOnUIRecursive` which doesn't
++      // make Retaining Serializables.
++      return makeSerializableWorklet(rt, object, false);
++    } else if (!object.getProperty(rt, "__init").isUndefined()) {
++      return makeSerializableInitializer(rt, object);
++    } else if (object.isFunction(rt)) {
++      auto fun = object.asFunction(rt);
++      if (fun.isHostFunction(rt)) {
++        auto name = fun.getProperty(rt, "name").asString(rt).utf8(rt);
++        return makeSerializableHostFunction(
++            rt, fun.getHostFunction(rt), name, fun.getProperty(rt, "length").asNumber());
++      } else {
++        throw std::runtime_error(
++            "[Worklets] Cloning remote functions from Worklet Runtimes is only available in Bundle Mode.");
++      }
++    } else if (object.isArray(rt)) {
++      if (shouldRetainRemote.isBool() && shouldRetainRemote.getBool()) {
++        serializable = std::make_shared<RetainingSerializable<SerializableArray>>(rt, object.asArray(rt));
++      } else {
++        serializable = std::make_shared<SerializableArray>(rt, object.asArray(rt));
++      }
++    } else if (object.isArrayBuffer(rt)) {
++      serializable = std::make_shared<SerializableArrayBuffer>(rt, object.getArrayBuffer(rt));
++    } else if (object.isHostObject(rt)) {
++      if (object.isHostObject<SerializableJSRef>(rt)) {
++        return object;
++      }
++      serializable = std::make_shared<SerializableHostObject>(rt, object.getHostObject(rt));
++    } else {
++      if (shouldRetainRemote.isBool() && shouldRetainRemote.getBool()) {
++        serializable = std::make_shared<RetainingSerializable<SerializableObject>>(rt, object, nativeStateSource);
++      } else {
++        serializable = std::make_shared<SerializableObject>(rt, object, nativeStateSource);
++      }
++    }
++  } else if (value.isString()) {
++    serializable = std::make_shared<SerializableString>(value.asString(rt).utf8(rt));
++  } else if (value.isUndefined()) {
++    serializable = std::make_shared<SerializableScalar>();
++  } else if (value.isNull()) {
++    serializable = std::make_shared<SerializableScalar>(nullptr);
++  } else if (value.isBool()) {
++    serializable = std::make_shared<SerializableScalar>(value.getBool());
++  } else if (value.isNumber()) {
++    serializable = std::make_shared<SerializableScalar>(value.getNumber());
++  } else if (value.isBigInt()) {
++    serializable = std::make_shared<SerializableBigInt>(rt, value.getBigInt(rt));
++  } else if (value.isSymbol()) {
++    // TODO: this is only a placeholder implementation, here we replace symbols
++    // with strings in order to make certain objects to be captured. There isn't
++    // yet any use-case for using symbols on the UI runtime so it is fine to keep
++    // it like this for now.
++    serializable = std::make_shared<SerializableString>(value.getSymbol(rt).toString(rt));
++  } else {
++    throw std::runtime_error("[Worklets] Attempted to convert an unsupported value type.");
++  }
++  return SerializableJSRef::newNativeStateObject(rt, serializable);
++}
++
++std::shared_ptr<Serializable> extractSerializableOrThrow(
++    jsi::Runtime &rt,
++    const jsi::Value &maybeSerializableValue,
++    const std::string &errorMessage) {
++  if (maybeSerializableValue.isObject()) {
++    auto object = maybeSerializableValue.getObject(rt);
++    return extractSerializableOrThrow(rt, object, errorMessage);
++  } else if (maybeSerializableValue.isUndefined()) {
++    return Serializable::undefined();
++  }
++  throw std::runtime_error(errorMessage);
++}
++
++std::shared_ptr<Serializable> extractSerializableOrThrow(
++    jsi::Runtime &rt,
++    const jsi::Object &maybeSerializableValue,
++    const std::string &errorMessage) {
++  if (maybeSerializableValue.hasNativeState(rt)) {
++    auto nativeState = maybeSerializableValue.getNativeState(rt);
++    return std::dynamic_pointer_cast<SerializableJSRef>(nativeState)->value();
++  }
++  throw std::runtime_error(errorMessage);
++}
++
++Serializable::~Serializable() = default;
++
++std::shared_ptr<Serializable> Serializable::undefined() {
++  static auto undefined = std::make_shared<SerializableScalar>();
++  return undefined;
++}
++
++SerializableJSRef::~SerializableJSRef() = default;
++
++SerializableArray::SerializableArray(jsi::Runtime &rt, const jsi::Array &array) : Serializable(ValueType::ArrayType) {
++  auto size = array.size(rt);
++  data_.reserve(size);
++  for (size_t i = 0; i < size; i++) {
++    data_.push_back(extractSerializableOrThrow(rt, array.getValueAtIndex(rt, i)));
++  }
++}
++
++jsi::Value SerializableArray::toJSValue(jsi::Runtime &rt) {
++  auto size = data_.size();
++  auto ary = jsi::Array(rt, size);
++  for (size_t i = 0; i < size; i++) {
++    ary.setValueAtIndex(rt, i, data_[i]->toJSValue(rt));
++  }
++  return ary;
++}
++
++jsi::Value SerializableArrayBuffer::toJSValue(jsi::Runtime &rt) {
++  auto size = static_cast<int>(data_.size());
++  auto arrayBuffer =
++      rt.global().getPropertyAsFunction(rt, "ArrayBuffer").callAsConstructor(rt, size).getObject(rt).getArrayBuffer(rt);
++  memcpy(arrayBuffer.data(rt), data_.data(), size);
++  return arrayBuffer;
++}
++
++SerializableObject::SerializableObject(jsi::Runtime &rt, const jsi::Object &object)
++    : Serializable(ValueType::ObjectType) {
++  auto propertyNames = object.getPropertyNames(rt);
++  auto size = propertyNames.size(rt);
++  data_.reserve(size);
++  for (size_t i = 0; i < size; i++) {
++    auto key = propertyNames.getValueAtIndex(rt, i).asString(rt);
++    auto value = extractSerializableOrThrow(rt, object.getProperty(rt, key));
++    data_.emplace_back(key.utf8(rt), value);
++  }
++  if (object.hasNativeState(rt)) {
++    nativeState_ = object.getNativeState(rt);
++  }
++}
++
++SerializableObject::SerializableObject(jsi::Runtime &rt, const jsi::Object &object, const jsi::Value &nativeStateSource)
++    : SerializableObject(rt, object) {
++  if (nativeStateSource.isObject() && nativeStateSource.asObject(rt).hasNativeState(rt)) {
++    nativeState_ = nativeStateSource.asObject(rt).getNativeState(rt);
++  }
++}
++
++jsi::Value SerializableObject::toJSValue(jsi::Runtime &rt) {
++  auto obj = jsi::Object(rt);
++  for (const auto &i : data_) {
++    obj.setProperty(rt, jsi::String::createFromUtf8(rt, i.first), i.second->toJSValue(rt));
++  }
++  if (nativeState_ != nullptr) {
++    obj.setNativeState(rt, nativeState_);
++  }
++  return obj;
++}
++
++SerializableMap::SerializableMap(jsi::Runtime &rt, const jsi::Array &keys, const jsi::Array &values)
++    : Serializable(ValueType::MapType) {
++  auto size = keys.size(rt);
++  react_native_assert(size == values.size(rt) && "Keys and values arrays must have the same size.");
++  data_.reserve(size);
++  for (size_t i = 0; i < size; i++) {
++    auto key = extractSerializableOrThrow(rt, keys.getValueAtIndex(rt, i));
++    auto value = extractSerializableOrThrow(rt, values.getValueAtIndex(rt, i));
++    data_.emplace_back(key, value);
++  }
++}
++
++jsi::Value SerializableMap::toJSValue(jsi::Runtime &rt) {
++  const auto keyValues = jsi::Array(rt, data_.size());
++  for (size_t i = 0, size = data_.size(); i < size; i++) {
++    const auto pair = jsi::Array(rt, 2);
++    pair.setValueAtIndex(rt, 0, data_[i].first->toJSValue(rt));
++    pair.setValueAtIndex(rt, 1, data_[i].second->toJSValue(rt));
++    keyValues.setValueAtIndex(rt, i, std::move(pair));
++  }
++
++  const auto &global = rt.global();
++  auto map = global.getPropertyAsFunction(rt, "Map").callAsConstructor(rt, std::move(keyValues));
++
++  return map;
++}
++
++SerializableSet::SerializableSet(jsi::Runtime &rt, const jsi::Array &values) : Serializable(ValueType::SetType) {
++  auto size = values.size(rt);
++  data_.reserve(size);
++  for (size_t i = 0; i < size; i++) {
++    data_.push_back(extractSerializableOrThrow(rt, values.getValueAtIndex(rt, i)));
++  }
++}
++
++jsi::Value SerializableSet::toJSValue(jsi::Runtime &rt) {
++  const auto values = jsi::Array(rt, data_.size());
++  for (size_t i = 0, size = data_.size(); i < size; i++) {
++    values.setValueAtIndex(rt, i, data_[i]->toJSValue(rt));
++  }
++
++  const auto &global = rt.global();
++  auto set = global.getPropertyAsFunction(rt, "Set").callAsConstructor(rt, std::move(values));
++
++  return set;
++}
++
++jsi::Value SerializableRegExp::toJSValue(jsi::Runtime &rt) {
++  return rt.global()
++      .getPropertyAsFunction(rt, "RegExp")
++      .callAsConstructor(rt, jsi::String::createFromUtf8(rt, pattern_), jsi::String::createFromUtf8(rt, flags_));
++}
++
++jsi::Value SerializableError::toJSValue(jsi::Runtime &rt) {
++  auto error = rt.global()
++                   .getPropertyAsFunction(rt, "Error")
++                   .callAsConstructor(rt, jsi::String::createFromUtf8(rt, message_))
++                   .getObject(rt);
++
++  error.setProperty(rt, "name", jsi::String::createFromUtf8(rt, name_));
++
++  if (stack_.has_value()) {
++    error.setProperty(rt, "stack", jsi::String::createFromUtf8(rt, stack_.value()));
++  } else {
++    error.setProperty(rt, "stack", jsi::String::createFromUtf8(rt, ""));
++  }
++
++  return error;
++}
++
++jsi::Value SerializableHostObject::toJSValue(jsi::Runtime &rt) {
++  return jsi::Object::createFromHostObject(rt, hostObject_);
++}
++
++jsi::Value SerializableHostFunction::toJSValue(jsi::Runtime &rt) {
++  return jsi::Function::createFromHostFunction(rt, jsi::PropNameID::forUtf8(rt, name_), paramCount_, hostFunction_);
++}
++
++jsi::Value SerializableWorklet::toJSValue(jsi::Runtime &rt) {
++  react_native_assert(
++      std::any_of(data_.cbegin(), data_.cend(), [](const auto &item) { return item.first == "__workletHash"; }) &&
++      "SerializableWorklet doesn't have `__workletHash` property");
++  jsi::Value obj = SerializableObject::toJSValue(rt);
++  return getValueUnpacker(rt).call(rt, obj, jsi::String::createFromAscii(rt, "Worklet"));
++}
++
++jsi::Value SerializableImport::toJSValue(jsi::Runtime &rt) {
++  /**
++   * The only way to obtain a module in runtime is to use the Metro's require
++   * method implementation, which is injected into the global object as `__r`.
++   */
++  const auto metroRequire = rt.global().getProperty(rt, "__r");
++  if (metroRequire.isUndefined()) {
++    return jsi::Value::undefined();
++  }
++
++  const auto imported = jsi::String::createFromUtf8(rt, imported_);
++  return metroRequire.asObject(rt).asFunction(rt).call(rt, source_).asObject(rt).getProperty(rt, imported);
++}
++
++SerializableRemoteFunction::~SerializableRemoteFunction() {
++  if (isHostedOnRNRuntime()) {
++    // TODO: consider batching
++    const auto &data = std::get<RNRuntimeData>(runtimeData_);
++    data.jsScheduler->scheduleOnJS([id = data.remoteId](jsi::Runtime &rt) {
++      const auto registry = getRemoteFunctionRegistry(rt);
++      registry.getPropertyAsFunction(rt, "delete").callWithThis(rt, registry, jsi::Value(id));
++    });
++  } else {
++    auto &workletData = std::get<WorkletRuntimeData>(runtimeData_);
++    cleanupRuntimeAware(hostRuntime_, workletData.function);
++  }
++}
++
++jsi::Value SerializableRemoteFunction::toJSValue(jsi::Runtime &rt) {
++  if (&rt == hostRuntime_) {
++    if (isHostedOnRNRuntime()) {
++      const auto &rnData = std::get<RNRuntimeData>(runtimeData_);
++      const auto registry = getRemoteFunctionRegistry(rt);
++      return registry.getPropertyAsFunction(rt, "get").callWithThis(rt, registry, jsi::Value(rnData.remoteId));
++    } else {
++      const auto &workletData = std::get<WorkletRuntimeData>(runtimeData_);
++      return jsi::Value(rt, *workletData.function);
++    }
++  } else {
++    const auto name = name_.empty() ? jsi::Value::undefined() : jsi::String::createFromUtf8(rt, name_);
++    auto holderFunction = getRemoteFunctionUnpacker(rt).call(rt, name).getObject(rt);
++    holderFunction.setNativeState(rt, std::make_shared<SerializableJSRef>(shared_from_this()));
++    return holderFunction;
++  }
++}
++
++// TODO: generalize it and merge with other scheduling methods
++void SerializableRemoteFunction::resolveOrRejectPromise(
++    const std::shared_ptr<Serializable> &resolveValue,
++    const std::shared_ptr<RuntimeManager> &runtimeManager) {
++  if (isHostedOnRNRuntime()) {
++    const auto &data = std::get<RNRuntimeData>(runtimeData_);
++    data.jsScheduler->scheduleOnJS([resolver = shared_from_this(), resolveValue](jsi::Runtime &rt) {
++      resolver->toJSValue(rt).getObject(rt).getFunction(rt).call(rt, resolveValue->toJSValue(rt));
++    });
++  } else {
++    const auto workletRuntime = runtimeManager->getRuntime(hostRuntimeId_);
++    // NOLINTNEXTLINE(readability/braces)
++    if (!workletRuntime) [[unlikely]] {
++      // Host runtime is dead, most likely we're the last owner of the Remote Function.
++      // Do nothing.
++    } else {
++      workletRuntime->schedule([resolver = shared_from_this(), resolveValue](jsi::Runtime &rt) {
++        resolver->toJSValue(rt).getObject(rt).getFunction(rt).call(rt, resolveValue->toJSValue(rt));
++      });
++    }
++  }
++}
++
++jsi::Value SerializableInitializer::toJSValue(jsi::Runtime &rt) {
++  if (remoteValue_ == nullptr) {
++    auto initObj = initializer_->toJSValue(rt);
++    auto value = std::make_unique<jsi::Value>(
++        getValueUnpacker(rt).call(rt, initObj, jsi::String::createFromAscii(rt, "Handle")));
++
++    // We are locking the initialization here since the thread that is
++    // initializing can be preempted on runtime lock. E.g.
++    // UI thread can be preempted on initialization of a shared value and then
++    // JS thread can try to access the shared value, locking the whole runtime.
++    // If we put the lock on `getValueUnpacker` part (basically any part that
++    // requires runtime) we would get a deadlock since UI thread would never
++    // release it.
++    std::unique_lock<std::mutex> lock(initializationMutex_);
++    if (remoteValue_ == nullptr) {
++      remoteValue_ = std::move(value);
++      remoteRuntime_ = &rt;
++    }
++  }
++  if (&rt == remoteRuntime_) {
++    return jsi::Value(rt, *remoteValue_);
++  }
++  auto initObj = initializer_->toJSValue(rt);
++  return getValueUnpacker(rt).call(rt, initObj, jsi::String::createFromAscii(rt, "Handle"));
++}
++
++jsi::Value SerializableString::toJSValue(jsi::Runtime &rt) {
++  return jsi::String::createFromUtf8(rt, data_);
++}
++
++jsi::Value SerializableBigInt::toJSValue(jsi::Runtime &rt) {
++  if (fastValue_.has_value()) {
++    return jsi::BigInt::fromInt64(rt, fastValue_.value());
++  } else {
++    return rt.global().getPropertyAsFunction(rt, "BigInt").call(rt, jsi::String::createFromUtf8(rt, slowValue_));
++  }
++}
++
++jsi::Value SerializableScalar::toJSValue(jsi::Runtime &) {
++  switch (valueType_) {
++    case Serializable::ValueType::UndefinedType:
++      return jsi::Value();
++    case Serializable::ValueType::NullType:
++      return jsi::Value(nullptr);
++    case Serializable::ValueType::BooleanType:
++      return jsi::Value(data_.boolean);
++    case Serializable::ValueType::NumberType:
++      return jsi::Value(data_.number);
++    default:
++      throw std::runtime_error("[Worklets] Attempted to convert object that's not of a scalar type.");
++  }
++}
++
++jsi::Value SerializableTurboModuleLike::toJSValue(jsi::Runtime &rt) {
++  auto obj = properties_->toJSValue(rt).asObject(rt);
++  const auto prototype = proto_->toJSValue(rt);
++  rt.global().getPropertyAsObject(rt, "Object").getPropertyAsFunction(rt, "setPrototypeOf").call(rt, obj, prototype);
++
++  return obj;
++}
++
++jsi::Function getCustomSerializableUnpacker(jsi::Runtime &rt) {
++  auto customSerializableUnpacker = rt.global().getProperty(rt, "__customSerializableUnpacker");
++  react_native_assert(customSerializableUnpacker.isObject() && "customSerializableUnpacker not found");
++  return customSerializableUnpacker.asObject(rt).asFunction(rt);
++}
++
++jsi::Value CustomSerializable::toJSValue(jsi::Runtime &rt) {
++  try {
++    auto unpack = getCustomSerializableUnpacker(rt);
++    auto data = data_->toJSValue(rt);
++
++    return unpack.call(rt, data, jsi::Value(typeId_));
++  } catch (jsi::JSError &e) {
++    throw std::runtime_error(
++        std::string("[Worklets] Failed to deserialize CustomSerializable. Reason: ") + e.getMessage());
++  }
++}
++
++} // namespace worklets
+diff --git a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.h b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.h
+index 4194097..f397b2b 100644
+--- a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.h
++++ b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.h
+@@ -251,9 +251,24 @@ class SerializableArrayBuffer : public Serializable {
+       : Serializable(ValueType::ArrayBufferType),
+         data_(arrayBuffer.data(rt), arrayBuffer.data(rt) + arrayBuffer.size(rt)) {}
+ 
++  SerializableArrayBuffer(
++      jsi::Runtime &rt,
++      const jsi::ArrayBuffer &arrayBuffer,
++      const std::string &typeName,
++      size_t byteOffset,
++      size_t length)
++      : Serializable(ValueType::ArrayBufferType),
++        typeName_(typeName),
++        byteOffset_(byteOffset),
++        length_(length),
++        data_(arrayBuffer.data(rt), arrayBuffer.data(rt) + arrayBuffer.size(rt)) {}
++
+   jsi::Value toJSValue(jsi::Runtime &rt) override;
+ 
+  protected:
++  const std::string typeName_;
++  const size_t byteOffset_{0};
++  const size_t length_{0};
+   const std::vector<uint8_t> data_;
+ };
+ 
+diff --git a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/SerializableFactory.cpp b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/SerializableFactory.cpp
+index 97b0787..62bd3b7 100644
+--- a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/SerializableFactory.cpp
++++ b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/SerializableFactory.cpp
+@@ -89,8 +89,19 @@ jsi::Value makeSerializableArray(jsi::Runtime &rt, const jsi::Array &array, cons
+   return SerializableJSRef::newNativeStateObject(rt, serializable);
+ }
+ 
+-jsi::Value makeSerializableArrayBuffer(jsi::Runtime &rt, const jsi::ArrayBuffer &arrayBuffer) {
+-  auto serializable = std::make_shared<SerializableArrayBuffer>(rt, arrayBuffer);
++jsi::Value makeSerializableArrayBuffer(
++    jsi::Runtime &rt,
++    const jsi::ArrayBuffer &arrayBuffer,
++    std::optional<std::string> typeName,
++    std::optional<size_t> byteOffset,
++    std::optional<size_t> length) {
++  std::shared_ptr<SerializableArrayBuffer> serializable;
++  if (typeName.has_value()) {
++    serializable = std::make_shared<SerializableArrayBuffer>(
++        rt, arrayBuffer, *typeName, byteOffset.value_or(0), length.value_or(0));
++  } else {
++    serializable = std::make_shared<SerializableArrayBuffer>(rt, arrayBuffer);
++  }
+   return SerializableJSRef::newNativeStateObject(rt, serializable);
+ }
+ 
+diff --git a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/SerializableFactory.h b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/SerializableFactory.h
+index a7ce5ef..ca1c67d 100644
+--- a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/SerializableFactory.h
++++ b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/SerializableFactory.h
+@@ -4,6 +4,7 @@
+ #include <worklets/SharedItems/Serializable.h>
+ 
+ #include <memory>
++#include <optional>
+ #include <string>
+ 
+ namespace worklets {
+@@ -37,7 +38,12 @@ jsi::Value makeSerializableHostObject(jsi::Runtime &rt, const std::shared_ptr<js
+ 
+ jsi::Value makeSerializableArray(jsi::Runtime &rt, const jsi::Array &array, const jsi::Value &shouldRetainRemote);
+ 
+-jsi::Value makeSerializableArrayBuffer(jsi::Runtime &rt, const jsi::ArrayBuffer &arrayBuffer);
++jsi::Value makeSerializableArrayBuffer(
++    jsi::Runtime &rt,
++    const jsi::ArrayBuffer &arrayBuffer,
++    std::optional<std::string> typeName = std::nullopt,
++    std::optional<size_t> byteOffset = std::nullopt,
++    std::optional<size_t> length = std::nullopt);
+ 
+ jsi::Value makeSerializableMap(jsi::Runtime &rt, const jsi::Array &keys, const jsi::Array &values);
+ 
+diff --git a/node_modules/react-native-worklets/lib/module/WorkletsModule/NativeWorklets.native.js b/node_modules/react-native-worklets/lib/module/WorkletsModule/NativeWorklets.native.js
+index e55cd53..4245408 100644
+--- a/node_modules/react-native-worklets/lib/module/WorkletsModule/NativeWorklets.native.js
++++ b/node_modules/react-native-worklets/lib/module/WorkletsModule/NativeWorklets.native.js
+@@ -93,6 +93,9 @@ See https://docs.swmansion.com/react-native-worklets/docs/guides/troubleshooting
+   createSerializableRegExp(pattern, flags) {
+     return this.#workletsModuleProxy.createSerializableRegExp(pattern, flags);
+   }
++  createSerializableArrayBufferView(typeName, buffer, byteOffset, length) {
++    return this.#workletsModuleProxy.createSerializableArrayBufferView(typeName, buffer, byteOffset, length);
++  }
+   createSerializableInitializer(obj) {
+     return this.#workletsModuleProxy.createSerializableInitializer(obj);
+   }
+diff --git a/node_modules/react-native-worklets/lib/module/memory/serializable.native.js b/node_modules/react-native-worklets/lib/module/memory/serializable.native.js
+index d0131ff..f7c60c2 100644
+--- a/node_modules/react-native-worklets/lib/module/memory/serializable.native.js
++++ b/node_modules/react-native-worklets/lib/module/memory/serializable.native.js
+@@ -432,24 +432,14 @@ function cloneArrayBuffer(arrayBuffer) {
+   return clone;
+ }
+ function cloneArrayBufferView(value) {
+-  const buffer = value.buffer;
+   const typeName = value.constructor.name;
+-  const handle = cloneInitializer({
+-    __init: () => {
+-      'worklet';
+-
+-      if (!VALID_ARRAY_VIEWS_NAMES.includes(typeName)) {
+-        throw new Error(`[Worklets] Invalid array view name \`${typeName}\`.`);
+-      }
+-      const constructor = global[typeName];
+-      if (constructor === undefined) {
+-        throw new Error(`[Worklets] Constructor for \`${typeName}\` not found.`);
+-      }
+-      return new constructor(buffer);
+-    }
+-  });
+-  serializableMappingCache.set(value, handle);
+-  return handle;
++  if (!VALID_ARRAY_VIEWS_NAMES.includes(typeName)) {
++    throw new Error(`[Worklets] Invalid array view name \`${typeName}\`.`);
++  }
++  const length = typeName === 'DataView' ? value.byteLength : value.length;
++  const clone = WorkletsModule.createSerializableArrayBufferView(typeName, value.buffer, value.byteOffset, length);
++  serializableMappingCache.set(value, clone);
++  return clone;
+ }
+ function cloneSynchronizable(value) {
+   serializableMappingCache.set(value);
+@@ -575,6 +565,17 @@ function makeShareableCloneOnUIRecursiveLEGACY(value) {
+       if (value instanceof RegExp) {
+         return globalThis.__workletsModuleProxy.createSerializableRegExp(value.source, value.flags);
+       }
++      if (value instanceof ArrayBuffer) {
++        return globalThis.__workletsModuleProxy.createSerializableArrayBuffer(value);
++      }
++      if (ArrayBuffer.isView(value)) {
++        const typeName = value.constructor.name;
++        if (!VALID_ARRAY_VIEWS_NAMES.includes(typeName)) {
++          throw new Error(`[Worklets] Invalid array view name \`${typeName}\`.`);
++        }
++        const length = typeName === 'DataView' ? value.byteLength : value.length;
++        return globalThis.__workletsModuleProxy.createSerializableArrayBufferView(typeName, value.buffer, value.byteOffset, length);
++      }
+       if (value instanceof Map) {
+         const keys = [];
+         const values = [];
+diff --git a/node_modules/react-native-worklets/src/WorkletsModule/NativeWorklets.native.ts b/node_modules/react-native-worklets/src/WorkletsModule/NativeWorklets.native.ts
+index 778a677..0a21bac 100644
+--- a/node_modules/react-native-worklets/src/WorkletsModule/NativeWorklets.native.ts
++++ b/node_modules/react-native-worklets/src/WorkletsModule/NativeWorklets.native.ts
+@@ -168,6 +168,20 @@ See https://docs.swmansion.com/react-native-worklets/docs/guides/troubleshooting
+     return this.#workletsModuleProxy.createSerializableRegExp(pattern, flags);
+   }
+ 
++  createSerializableArrayBufferView<TValue extends ArrayBufferView>(
++    typeName: string,
++    buffer: ArrayBuffer,
++    byteOffset: number,
++    length: number
++  ): SerializableRef<TValue> {
++    return this.#workletsModuleProxy.createSerializableArrayBufferView<TValue>(
++      typeName,
++      buffer,
++      byteOffset,
++      length
++    );
++  }
++
+   createSerializableInitializer(obj: object) {
+     return this.#workletsModuleProxy.createSerializableInitializer(obj);
+   }
+diff --git a/node_modules/react-native-worklets/src/WorkletsModule/workletsModuleProxy.ts b/node_modules/react-native-worklets/src/WorkletsModule/workletsModuleProxy.ts
+index d545482..5cc7ff0 100644
+--- a/node_modules/react-native-worklets/src/WorkletsModule/workletsModuleProxy.ts
++++ b/node_modules/react-native-worklets/src/WorkletsModule/workletsModuleProxy.ts
+@@ -92,6 +92,13 @@ export interface WorkletsModuleProxy {
+     flags: string
+   ): SerializableRef<RegExp>;
+ 
++  createSerializableArrayBufferView<TValue extends ArrayBufferView>(
++    typeName: string,
++    buffer: ArrayBuffer,
++    byteOffset: number,
++    length: number
++  ): SerializableRef<TValue>;
++
+   createSerializableInitializer(obj: object): SerializableRef<object>;
+ 
+   createSerializableNonWorkletFunction<TArgs extends unknown[], TReturn>(
+diff --git a/node_modules/react-native-worklets/src/memory/serializable.native.ts b/node_modules/react-native-worklets/src/memory/serializable.native.ts
+index fd73c6b..ef23281 100644
+--- a/node_modules/react-native-worklets/src/memory/serializable.native.ts
++++ b/node_modules/react-native-worklets/src/memory/serializable.native.ts
+@@ -639,26 +639,22 @@ function cloneArrayBuffer(
+ function cloneArrayBufferView<TValue extends ArrayBufferView>(
+   value: TValue
+ ): SerializableRef<TValue> {
+-  const buffer = value.buffer;
+   const typeName = value.constructor.name;
+-  const handle = cloneInitializer({
+-    __init: () => {
+-      'worklet';
+-      if (!VALID_ARRAY_VIEWS_NAMES.includes(typeName)) {
+-        throw new Error(`[Worklets] Invalid array view name \`${typeName}\`.`);
+-      }
+-      const constructor = global[typeName as keyof typeof global];
+-      if (constructor === undefined) {
+-        throw new Error(
+-          `[Worklets] Constructor for \`${typeName}\` not found.`
+-        );
+-      }
+-      return new constructor(buffer);
+-    },
+-  }) as unknown as SerializableRef<TValue>;
+-  serializableMappingCache.set(value, handle);
+-
+-  return handle;
++  if (!VALID_ARRAY_VIEWS_NAMES.includes(typeName)) {
++    throw new Error(`[Worklets] Invalid array view name \`${typeName}\`.`);
++  }
++  const length =
++    typeName === 'DataView'
++      ? value.byteLength
++      : (value as unknown as { length: number }).length;
++  const clone = WorkletsModule.createSerializableArrayBufferView<TValue>(
++    typeName,
++    value.buffer as ArrayBuffer,
++    value.byteOffset,
++    length
++  );
++  serializableMappingCache.set(value, clone);
++  return clone;
+ }
+ 
+ function cloneSynchronizable<TValue>(
+@@ -821,6 +817,29 @@ function makeShareableCloneOnUIRecursiveLEGACY<TValue>(
+           value.flags
+         ) as FlatSerializableRef<TValue>;
+       }
++      if (value instanceof ArrayBuffer) {
++        return globalThis.__workletsModuleProxy.createSerializableArrayBuffer(
++          value
++        ) as FlatSerializableRef<TValue>;
++      }
++      if (ArrayBuffer.isView(value)) {
++        const typeName = value.constructor.name;
++        if (!VALID_ARRAY_VIEWS_NAMES.includes(typeName)) {
++          throw new Error(
++            `[Worklets] Invalid array view name \`${typeName}\`.`
++          );
++        }
++        const length =
++          typeName === 'DataView'
++            ? value.byteLength
++            : (value as unknown as { length: number }).length;
++        return globalThis.__workletsModuleProxy.createSerializableArrayBufferView(
++          typeName,
++          value.buffer as ArrayBuffer,
++          value.byteOffset,
++          length
++        ) as FlatSerializableRef<TValue>;
++      }
+       if (value instanceof Map) {
+         const keys: unknown[] = [];
+         const values: unknown[] = [];
diff --git a/yarn.lock b/yarn.lock
index a7d217d048..f53aea2319 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -961,18 +961,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.27.1":
-  version: 7.29.7
-  resolution: "@babel/plugin-transform-class-properties@npm:7.29.7"
-  dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.29.7"
-    "@babel/helper-plugin-utils": "npm:^7.29.7"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/0cc5e7a882e29eead360f02ef79f6b2ec3b3813213b1513d8fdaa931d1d1361fccc92fbacc9b399e42495953d9d6fc722f283b5f3aa272fe016a0b5fe1e6a130
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-class-static-block@npm:^7.27.1, @babel/plugin-transform-class-static-block@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/plugin-transform-class-static-block@npm:7.28.6"
@@ -1001,22 +989,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.28.4":
-  version: 7.29.7
-  resolution: "@babel/plugin-transform-classes@npm:7.29.7"
-  dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.29.7"
-    "@babel/helper-compilation-targets": "npm:^7.29.7"
-    "@babel/helper-globals": "npm:^7.29.7"
-    "@babel/helper-plugin-utils": "npm:^7.29.7"
-    "@babel/helper-replace-supers": "npm:^7.29.7"
-    "@babel/traverse": "npm:^7.29.7"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/ac6387c6bfb9d9b9f9d0702050fa8833e76c123d607bdba1af8d991f691e01a0652130954baa53051f0e16b8a0545e3f3c5a5bc4404a19abac0af2eee748f898
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-computed-properties@npm:^7.24.7, @babel/plugin-transform-computed-properties@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/plugin-transform-computed-properties@npm:7.28.6"
@@ -1298,17 +1270,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
-  version: 7.29.7
-  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.29.7"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.29.7"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10/4bff79355c240342e18e02cee282ce5c30bafa4335a250f4a47e822fde6def70afa19708e04fec3cc942252da16ea3a28a21279180cc92734c2a2d9826600bb3
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-numeric-separator@npm:^7.24.7, @babel/plugin-transform-numeric-separator@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/plugin-transform-numeric-separator@npm:7.28.6"
@@ -1821,7 +1782,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.27.1, @babel/preset-typescript@npm:^7.28.5":
+"@babel/preset-typescript@npm:^7.28.5":
   version: 7.29.7
   resolution: "@babel/preset-typescript@npm:7.29.7"
   dependencies:
@@ -4199,6 +4160,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native/babel-plugin-codegen@npm:0.86.0":
+  version: 0.86.0
+  resolution: "@react-native/babel-plugin-codegen@npm:0.86.0"
+  dependencies:
+    "@babel/traverse": "npm:^7.29.0"
+    "@react-native/codegen": "npm:0.86.0"
+  checksum: 10/250cea9b6fbe272756ad570221b8a870c9313c5e0f4c2978062ea03d3270eddf7096c22f3b93fada042e3cded7a86e5d7d4d7562a99639dc3579d74adaef1153
+  languageName: node
+  linkType: hard
+
 "@react-native/babel-preset@npm:0.83.6":
   version: 0.83.6
   resolution: "@react-native/babel-preset@npm:0.83.6"
@@ -4254,6 +4225,49 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native/babel-preset@npm:0.86.0":
+  version: 0.86.0
+  resolution: "@react-native/babel-preset@npm:0.86.0"
+  dependencies:
+    "@babel/core": "npm:^7.25.2"
+    "@babel/plugin-proposal-export-default-from": "npm:^7.24.7"
+    "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
+    "@babel/plugin-syntax-export-default-from": "npm:^7.24.7"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.25.4"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.24.7"
+    "@babel/plugin-transform-block-scoping": "npm:^7.25.0"
+    "@babel/plugin-transform-class-properties": "npm:^7.25.4"
+    "@babel/plugin-transform-classes": "npm:^7.25.4"
+    "@babel/plugin-transform-destructuring": "npm:^7.24.8"
+    "@babel/plugin-transform-flow-strip-types": "npm:^7.25.2"
+    "@babel/plugin-transform-for-of": "npm:^7.24.7"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.8"
+    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.24.7"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.7"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.7"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.8"
+    "@babel/plugin-transform-private-methods": "npm:^7.24.7"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.24.7"
+    "@babel/plugin-transform-react-display-name": "npm:^7.24.7"
+    "@babel/plugin-transform-react-jsx": "npm:^7.25.2"
+    "@babel/plugin-transform-react-jsx-self": "npm:^7.24.7"
+    "@babel/plugin-transform-react-jsx-source": "npm:^7.24.7"
+    "@babel/plugin-transform-regenerator": "npm:^7.24.7"
+    "@babel/plugin-transform-runtime": "npm:^7.24.7"
+    "@babel/plugin-transform-typescript": "npm:^7.25.2"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.24.7"
+    "@react-native/babel-plugin-codegen": "npm:0.86.0"
+    babel-plugin-syntax-hermes-parser: "npm:0.36.0"
+    babel-plugin-transform-flow-enums: "npm:^0.0.2"
+    react-refresh: "npm:^0.14.0"
+  peerDependencies:
+    "@babel/core": "*"
+  checksum: 10/0eb0ed611616a22a2b56f55d5939339f8d3a445768ea584cb320fd24ac7678585addc9bdffcc2b43a2ee44f64981a5c7de4042b30f5795ffb97e77c4c26d003e
+  languageName: node
+  linkType: hard
+
 "@react-native/codegen@npm:0.81.5":
   version: 0.81.5
   resolution: "@react-native/codegen@npm:0.81.5"
@@ -4305,6 +4319,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native/codegen@npm:0.86.0":
+  version: 0.86.0
+  resolution: "@react-native/codegen@npm:0.86.0"
+  dependencies:
+    "@babel/core": "npm:^7.25.2"
+    "@babel/parser": "npm:^7.29.0"
+    hermes-parser: "npm:0.36.0"
+    invariant: "npm:^2.2.4"
+    nullthrows: "npm:^1.1.1"
+    tinyglobby: "npm:^0.2.15"
+    yargs: "npm:^17.6.2"
+  peerDependencies:
+    "@babel/core": "*"
+  checksum: 10/4b6323d16dab67c9e71a0db835b6ec5094f7e6d1c1c7abcb01038187dbcc6f766227bb93a50ebb8a81f84e5ed6e90b5a6877ea4a1242463d84824b1fb2beb5b1
+  languageName: node
+  linkType: hard
+
 "@react-native/community-cli-plugin@npm:0.81.5":
   version: 0.81.5
   resolution: "@react-native/community-cli-plugin@npm:0.81.5"
@@ -4547,6 +4578,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native/js-polyfills@npm:0.86.0":
+  version: 0.86.0
+  resolution: "@react-native/js-polyfills@npm:0.86.0"
+  checksum: 10/cdd2a0d8c6202783754a77e05285884eeb884d5640b7068d9d38c6486028a6c49ff72a03da42699247233f250ed52a4c991823617490929d1a501e30bc187ddf
+  languageName: node
+  linkType: hard
+
+"@react-native/metro-babel-transformer@npm:0.86.0":
+  version: 0.86.0
+  resolution: "@react-native/metro-babel-transformer@npm:0.86.0"
+  dependencies:
+    "@babel/core": "npm:^7.25.2"
+    "@react-native/babel-preset": "npm:0.86.0"
+    hermes-parser: "npm:0.36.0"
+    nullthrows: "npm:^1.1.1"
+  peerDependencies:
+    "@babel/core": "*"
+  checksum: 10/46470e8df20e3d7420f67a2a57a226cb5cded2fb9ef30c577ec03de38bd3d68ead0057467c6f17c22187f5970e41d53b0b61b126d4b55ca0890693909b99c9c9
+  languageName: node
+  linkType: hard
+
+"@react-native/metro-config@npm:^0.86.0":
+  version: 0.86.0
+  resolution: "@react-native/metro-config@npm:0.86.0"
+  dependencies:
+    "@react-native/js-polyfills": "npm:0.86.0"
+    "@react-native/metro-babel-transformer": "npm:0.86.0"
+    metro-config: "npm:^0.84.3"
+    metro-runtime: "npm:^0.84.3"
+  checksum: 10/0c7899e3861410fe560603bcea93eeef70284fc88d1152018a599c75e9bc21d3a982e1f443aa907aa283663c3b2a986f91c9b8d91b4f95efd6364559fae4790a
+  languageName: node
+  linkType: hard
+
 "@react-native/normalize-colors@npm:0.81.5":
   version: 0.81.5
   resolution: "@react-native/normalize-colors@npm:0.81.5"
@@ -5457,6 +5521,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@yarnpkg/lockfile@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@yarnpkg/lockfile@npm:1.1.0"
+  checksum: 10/cd19e1114aaf10a05126aeea8833ef4ca8af8a46e88e12884f8359d19333fd19711036dbc2698dbe937f81f037070cf9a8da45c2e8c6ca19cafd7d15659094ed
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^4.0.0":
   version: 4.0.0
   resolution: "abbrev@npm:4.0.0"
@@ -5961,6 +6032,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-syntax-hermes-parser@npm:0.36.0":
+  version: 0.36.0
+  resolution: "babel-plugin-syntax-hermes-parser@npm:0.36.0"
+  dependencies:
+    hermes-parser: "npm:0.36.0"
+  checksum: 10/22489c19d416f1e071c046ab42d5dd475ed5b76514621f755f55b4e8019ecd665dce8da40be2a5436bbd5d4f2d258ebceda30601e078104ce11fe4371b7a36a0
+  languageName: node
+  linkType: hard
+
 "babel-plugin-syntax-hermes-parser@npm:^0.28.0":
   version: 0.28.1
   resolution: "babel-plugin-syntax-hermes-parser@npm:0.28.1"
@@ -6518,7 +6598,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ci-info@npm:^3.2.0, ci-info@npm:^3.3.0":
+"ci-info@npm:^3.2.0, ci-info@npm:^3.3.0, ci-info@npm:^3.7.0":
   version: 3.9.0
   resolution: "ci-info@npm:3.9.0"
   checksum: 10/75bc67902b4d1c7b435497adeb91598f6d52a3389398e44294f6601b20cfef32cf2176f7be0eb961d9e085bb333a8a5cae121cb22f81cf238ae7f58eb80e9397
@@ -6710,6 +6790,7 @@ __metadata:
   resolution: "computer-vision@workspace:apps/computer-vision"
   dependencies:
     "@babel/core": "npm:^7.29.0"
+    "@react-native/metro-config": "npm:^0.86.0"
     "@react-navigation/drawer": "npm:^7.9.4"
     "@react-navigation/native": "npm:^7.2.2"
     "@shopify/react-native-skia": "npm:2.6.2"
@@ -6718,6 +6799,8 @@ __metadata:
     expo: "npm:~56.0.9"
     expo-build-properties: "npm:~56.0.17"
     expo-constants: "npm:~56.0.17"
+    expo-image-manipulator: "npm:~56.0.18"
+    expo-image-picker: "npm:~56.0.18"
     expo-linking: "npm:~56.0.13"
     expo-router: "npm:~56.2.9"
     react: "npm:19.2.3"
@@ -6726,12 +6809,13 @@ __metadata:
     react-native-executorch: "workspace:*"
     react-native-gesture-handler: "npm:~2.31.1"
     react-native-image-picker: "npm:^8.2.1"
-    react-native-reanimated: "npm:4.3.1"
+    react-native-reanimated: "npm:4.4.0"
     react-native-safe-area-context: "npm:~5.7.0"
     react-native-screens: "npm:~4.25.2"
     react-native-svg: "npm:15.15.4"
     react-native-svg-transformer: "npm:^1.5.3"
-    react-native-worklets: "npm:0.8.3"
+    react-native-worklets: "npm:0.9.1"
+    react-refresh: "npm:^0.14.0"
   languageName: unknown
   linkType: soft
 
@@ -8093,6 +8177,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-image-loader@npm:~56.0.3":
+  version: 56.0.3
+  resolution: "expo-image-loader@npm:56.0.3"
+  peerDependencies:
+    expo: "*"
+  checksum: 10/3273502fb284f7eb914fa0ac2eb533bb9025b5595e04d240d798060687f215847c707120d2641d0b0fa7d1b0c8a697a8aad55e6c455dfd430eb8c4e647a53467
+  languageName: node
+  linkType: hard
+
+"expo-image-manipulator@npm:~56.0.18":
+  version: 56.0.19
+  resolution: "expo-image-manipulator@npm:56.0.19"
+  dependencies:
+    expo-image-loader: "npm:~56.0.3"
+  peerDependencies:
+    expo: "*"
+  checksum: 10/e1c93536d383269779651300c25d218aeedf2f26a0283acb154e8eacbe70114d231c497a86da8b957ef519a885fc3d4373f3fe2c03f5c7d58432933b1d3c4952
+  languageName: node
+  linkType: hard
+
+"expo-image-picker@npm:~56.0.18":
+  version: 56.0.18
+  resolution: "expo-image-picker@npm:56.0.18"
+  dependencies:
+    expo-image-loader: "npm:~56.0.3"
+  peerDependencies:
+    expo: "*"
+  checksum: 10/1884e55aeafde653e46396fce80529787bed21256a234a75139bc494ae778fda2c4787477008dd58e2dcb15dd7685013eb1af91706d37b5d32aebdda0e74968b
+  languageName: node
+  linkType: hard
+
 "expo-keep-awake@npm:~56.0.3":
   version: 56.0.3
   resolution: "expo-keep-awake@npm:56.0.3"
@@ -8640,6 +8755,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-yarn-workspace-root@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "find-yarn-workspace-root@npm:2.0.0"
+  dependencies:
+    micromatch: "npm:^4.0.2"
+  checksum: 10/7fa7942849eef4d5385ee96a0a9a5a9afe885836fd72ed6a4280312a38690afea275e7d09b343fe97daf0412d833f8ac4b78c17fc756386d9ebebf0759d707a7
+  languageName: node
+  linkType: hard
+
 "flat-cache@npm:^3.0.4":
   version: 3.2.0
   resolution: "flat-cache@npm:3.2.0"
@@ -8708,7 +8832,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^10.1.0":
+"fs-extra@npm:^10.0.0, fs-extra@npm:^10.1.0":
   version: 10.1.0
   resolution: "fs-extra@npm:10.1.0"
   dependencies:
@@ -9004,7 +9128,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
+"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10/bf152d0ed1dc159239db1ba1f74fdbc40cb02f626770dcd5815c427ce0688c2635a06ed69af364396da4636d0408fcf7d4afdf7881724c3307e46aff30ca49e2
@@ -9131,6 +9255,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hermes-estree@npm:0.36.0":
+  version: 0.36.0
+  resolution: "hermes-estree@npm:0.36.0"
+  checksum: 10/76f3fec9700a8ccb299cf53be22cd9038caf3bfba711370dd24f276444c1ed3c38c27fedd3097f6d9cccaa4dfaa4d02de0f8f02e208ab3fb00c97f8845b8aac5
+  languageName: node
+  linkType: hard
+
 "hermes-parser@npm:0.28.1":
   version: 0.28.1
   resolution: "hermes-parser@npm:0.28.1"
@@ -9176,6 +9307,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hermes-parser@npm:0.36.0":
+  version: 0.36.0
+  resolution: "hermes-parser@npm:0.36.0"
+  dependencies:
+    hermes-estree: "npm:0.36.0"
+  checksum: 10/81150c00bd8da17187f421a75e6e427187465386681427024f3dc51de996c44cee18fb062d95254028aa1f4ffcdbe7cbdeda50e6edece5c378c9f909067f5bae
+  languageName: node
+  linkType: hard
+
 "hoist-non-react-statics@npm:^3.3.0":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
@@ -10046,6 +10186,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-stable-stringify@npm:^1.0.2":
+  version: 1.3.0
+  resolution: "json-stable-stringify@npm:1.3.0"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.4"
+    isarray: "npm:^2.0.5"
+    jsonify: "npm:^0.0.1"
+    object-keys: "npm:^1.1.1"
+  checksum: 10/6661e9704733d2826b2012fea7b152ca216c82d8c725c8d390ee6434eabdf43c66fa6e6b423cce9bf95f8fec0ef52004c09a99043c7daf6e58595a0cff204629
+  languageName: node
+  linkType: hard
+
 "json5@npm:^2.2.1, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
@@ -10068,6 +10221,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsonify@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "jsonify@npm:0.0.1"
+  checksum: 10/7b86b6f4518582ff1d8b7624ed6c6277affd5246445e864615dbdef843a4057ac58587684faf129ea111eeb80e01c15f0a4d9d03820eb3f3985fa67e81b12398
+  languageName: node
+  linkType: hard
+
 "jsx-ast-utils@npm:^2.4.1 || ^3.0.0":
   version: 3.3.5
   resolution: "jsx-ast-utils@npm:3.3.5"
@@ -10089,6 +10249,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"klaw-sync@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "klaw-sync@npm:6.0.0"
+  dependencies:
+    graceful-fs: "npm:^4.1.11"
+  checksum: 10/0da397f8961313c3ef8f79fb63af9002cde5a8fb2aeb1a37351feff0dd6006129c790400c3f5c3b4e757bedcabb13d21ec0a5eaef5a593d59515d4f2c291e475
+  languageName: node
+  linkType: hard
+
 "kleur@npm:^3.0.3":
   version: 3.0.3
   resolution: "kleur@npm:3.0.3"
@@ -11422,7 +11591,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.4, micromatch@npm:^4.0.8":
+"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
   dependencies:
@@ -11521,6 +11690,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimist@npm:^1.2.6":
+  version: 1.2.8
+  resolution: "minimist@npm:1.2.8"
+  checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f
+  languageName: node
+  linkType: hard
+
 "minipass-collect@npm:^2.0.1":
   version: 2.0.1
   resolution: "minipass-collect@npm:2.0.1"
@@ -12004,7 +12180,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:^7.0.3":
+"open@npm:^7.0.3, open@npm:^7.4.2":
   version: 7.4.2
   resolution: "open@npm:7.4.2"
   dependencies:
@@ -12195,6 +12371,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"patch-package@npm:^8.0.0":
+  version: 8.0.1
+  resolution: "patch-package@npm:8.0.1"
+  dependencies:
+    "@yarnpkg/lockfile": "npm:^1.1.0"
+    chalk: "npm:^4.1.2"
+    ci-info: "npm:^3.7.0"
+    cross-spawn: "npm:^7.0.3"
+    find-yarn-workspace-root: "npm:^2.0.0"
+    fs-extra: "npm:^10.0.0"
+    json-stable-stringify: "npm:^1.0.2"
+    klaw-sync: "npm:^6.0.0"
+    minimist: "npm:^1.2.6"
+    open: "npm:^7.4.2"
+    semver: "npm:^7.5.3"
+    slash: "npm:^2.0.0"
+    tmp: "npm:^0.2.4"
+    yaml: "npm:^2.2.2"
+  bin:
+    patch-package: index.js
+  checksum: 10/920a9fb0001ea67a66d79ea696e6d74e3040b0f282e09addae913978b6d0e8cb5ef9a4030eb77df8a5497e8822fa8449c2dfdc668ecff7fb9ff8bfef0c897c6e
+  languageName: node
+  linkType: hard
+
 "path-dirname@npm:^1.0.2":
   version: 1.0.2
   resolution: "path-dirname@npm:1.0.2"
@@ -12637,8 +12837,10 @@ __metadata:
     eslint-plugin-markdown: "npm:^5.1.0"
     eslint-plugin-prettier: "npm:^5.0.1"
     expo-router: "npm:~6.0.17"
+    patch-package: "npm:^8.0.0"
     prettier: "npm:^3.3.3"
     prettier-plugin-jsdoc: "npm:^1.3.0"
+    react-native-worklets: "npm:0.9.1"
     typescript: "npm:~5.9.2"
   languageName: unknown
   linkType: soft
@@ -12665,7 +12867,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-native-executorch@workspace:packages/react-native-executorch"
   dependencies:
+    "@babel/core": "npm:^7.25.1"
     "@react-native/babel-preset": "npm:0.83.6"
+    "@react-native/metro-config": "npm:^0.86.0"
     "@types/react": "npm:^19.1.12"
     del-cli: "npm:^6.0.0"
     react: "npm:19.2.0"
@@ -12753,17 +12957,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-reanimated@npm:4.3.1":
-  version: 4.3.1
-  resolution: "react-native-reanimated@npm:4.3.1"
+"react-native-reanimated@npm:4.4.0":
+  version: 4.4.0
+  resolution: "react-native-reanimated@npm:4.4.0"
   dependencies:
     react-native-is-edge-to-edge: "npm:^1.3.1"
     semver: "npm:^7.7.3"
   peerDependencies:
     react: "*"
-    react-native: 0.81 - 0.85
-    react-native-worklets: 0.8.x
-  checksum: 10/f47d50cc35def5038e68d9013bf976849207237e238ab597e0b8c07d003b0a54d73692185f1a49dc33ab3d7a9d345660a6e70796f28545a7340649806bf17b5c
+    react-native: 0.83 - 0.86
+    react-native-worklets: 0.9.x
+  checksum: 10/3c8c79d1cda0bfcc442deaf485867a0d1f175da417a46a144583e66f3a8c1f1a1e69d38993e30c99ff26da1c8166dab311ef5d657d7b354468b6ecfdb6a92262
   languageName: node
   linkType: hard
 
@@ -12847,30 +13051,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-worklets@npm:0.8.3":
-  version: 0.8.3
-  resolution: "react-native-worklets@npm:0.8.3"
-  dependencies:
-    "@babel/plugin-transform-arrow-functions": "npm:^7.27.1"
-    "@babel/plugin-transform-class-properties": "npm:^7.27.1"
-    "@babel/plugin-transform-classes": "npm:^7.28.4"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.27.1"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.27.1"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.27.1"
-    "@babel/plugin-transform-template-literals": "npm:^7.27.1"
-    "@babel/plugin-transform-unicode-regex": "npm:^7.27.1"
-    "@babel/preset-typescript": "npm:^7.27.1"
-    convert-source-map: "npm:^2.0.0"
-    semver: "npm:^7.7.3"
-  peerDependencies:
-    "@babel/core": "*"
-    "@react-native/metro-config": "*"
-    react: "*"
-    react-native: 0.81 - 0.85
-  checksum: 10/7b200ec7f0a909e3fc4294721d5dc78e10beb5cb6280a3398dbd7df47db77f8130e605c475768659110b0a7355f4361ea9e85cac40176157d622b4b2060e447a
-  languageName: node
-  linkType: hard
-
 "react-native-worklets@npm:0.9.1":
   version: 0.9.1
   resolution: "react-native-worklets@npm:0.9.1"
@@ -13470,7 +13650,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.7.3":
+"semver@npm:^7.5.3, semver@npm:^7.7.3":
   version: 7.8.4
   resolution: "semver@npm:7.8.4"
   bin:
@@ -13705,6 +13885,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slash@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "slash@npm:2.0.0"
+  checksum: 10/512d4350735375bd11647233cb0e2f93beca6f53441015eea241fe784d8068281c3987fbaa93e7ef1c38df68d9c60013045c92837423c69115297d6169aa85e6
+  languageName: node
+  linkType: hard
+
 "slash@npm:^3.0.0":
   version: 3.0.0
   resolution: "slash@npm:3.0.0"
@@ -14233,6 +14420,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tmp@npm:^0.2.4":
+  version: 0.2.7
+  resolution: "tmp@npm:0.2.7"
+  checksum: 10/0a3bc90beb0c6275273c3475fb57e466eaab1c9c4a101d029ff62b18146ce136e7f75d09de34863d9f2c2a492751402508f9e028bc98eb34a1416195d4b15619
+  languageName: node
+  linkType: hard
+
 "tmpl@npm:1.0.5":
   version: 1.0.5
   resolution: "tmpl@npm:1.0.5"
@@ -14949,6 +15143,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.2.2":
+  version: 2.9.0
+  resolution: "yaml@npm:2.9.0"
+  bin:
+    yaml: bin.mjs
+  checksum: 10/9a95e8e08651c3d292ab6a5befeb5f57b76801caa097c75bb45c9a70ce19c1b11f57e87a6ef84a579ea070ed2c2c8ac541c88c0ae684d544d5f42c7e77d11b7b
+  languageName: node
+  linkType: hard
+
 "yaml@npm:^2.6.1, yaml@npm:^2.7.1":
   version: 2.8.3
   resolution: "yaml@npm:2.8.3"

From 928154d477027a6e71810a85dcad2fac548c2d6b Mon Sep 17 00:00:00 2001
From: Bartosz Hanc <bartosz.hanc02@gmail.com>
Date: Mon, 22 Jun 2026 04:07:46 +0200
Subject: [PATCH 2/9] chore: remove semantic segmentation references

---
 apps/computer-vision/app/_layout.tsx | 7 -------
 apps/computer-vision/app/index.tsx   | 3 ---
 2 files changed, 10 deletions(-)

diff --git a/apps/computer-vision/app/_layout.tsx b/apps/computer-vision/app/_layout.tsx
index 4c06fe72a7..f5506bd40c 100644
--- a/apps/computer-vision/app/_layout.tsx
+++ b/apps/computer-vision/app/_layout.tsx
@@ -27,13 +27,6 @@ export default function Layout() {
           title: 'Classification',
         }}
       />
-      <Drawer.Screen
-        name="segmentation/index"
-        options={{
-          drawerLabel: 'Semantic Segmentation',
-          title: 'Semantic Segmentation',
-        }}
-      />
       <Drawer.Screen
         name="inspect/index"
         options={{
diff --git a/apps/computer-vision/app/index.tsx b/apps/computer-vision/app/index.tsx
index f87e665c83..a3e035073e 100644
--- a/apps/computer-vision/app/index.tsx
+++ b/apps/computer-vision/app/index.tsx
@@ -14,9 +14,6 @@ export default function Home() {
         <TouchableOpacity style={styles.button} onPress={() => router.navigate('classification/')}>
           <Text style={styles.buttonText}>Classification</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.button} onPress={() => router.navigate('segmentation/')}>
-          <Text style={styles.buttonText}>Segmentation</Text>
-        </TouchableOpacity>
         <TouchableOpacity style={styles.button} onPress={() => router.navigate('inspect/')}>
           <Text style={styles.buttonText}>Model Inspector</Text>
         </TouchableOpacity>

From caf1337ba4114c56d13c4462c96a54d07106162f Mon Sep 17 00:00:00 2001
From: Bartosz Hanc <bartosz.hanc02@gmail.com>
Date: Mon, 22 Jun 2026 04:09:36 +0200
Subject: [PATCH 3/9] chore: consolidate colors, theme, and commonStyles into
 theme.ts

---
 apps/computer-vision/app/_layout.tsx          |  2 +-
 .../app/classification/index.tsx              |  3 +-
 apps/computer-vision/app/index.tsx            |  2 +-
 apps/computer-vision/app/inspect/index.tsx    |  2 +-
 apps/computer-vision/colors.ts                |  6 ---
 apps/computer-vision/commonStyles.ts          | 32 ----------------
 apps/computer-vision/theme.ts                 | 37 ++++++++++++++++++-
 7 files changed, 40 insertions(+), 44 deletions(-)
 delete mode 100644 apps/computer-vision/colors.ts
 delete mode 100644 apps/computer-vision/commonStyles.ts

diff --git a/apps/computer-vision/app/_layout.tsx b/apps/computer-vision/app/_layout.tsx
index f5506bd40c..91b231a771 100644
--- a/apps/computer-vision/app/_layout.tsx
+++ b/apps/computer-vision/app/_layout.tsx
@@ -1,5 +1,5 @@
 import { Drawer } from 'expo-router/drawer';
-import ColorPalette from '../colors';
+import { ColorPalette } from '../theme';
 import React from 'react';
 
 export default function Layout() {
diff --git a/apps/computer-vision/app/classification/index.tsx b/apps/computer-vision/app/classification/index.tsx
index f889da9f24..c6ed9a0904 100644
--- a/apps/computer-vision/app/classification/index.tsx
+++ b/apps/computer-vision/app/classification/index.tsx
@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
-import { commonStyles } from '../../commonStyles';
+import { commonStyles, ColorPalette } from '../../theme';
 import { type SkImage as SkiaImageType } from '@shopify/react-native-skia';
 import { useClassifier, models } from 'react-native-executorch';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import ColorPalette from '../../colors';
 import { getImage, loadSkImage } from '../../utils';
 import { ModelPicker, type ModelOption } from '../../components/ModelPicker';
 import { ImageViewport } from '../../components/ImageViewport';
diff --git a/apps/computer-vision/app/index.tsx b/apps/computer-vision/app/index.tsx
index a3e035073e..388a6a0840 100644
--- a/apps/computer-vision/app/index.tsx
+++ b/apps/computer-vision/app/index.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'expo-router';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import ColorPalette from '../colors';
+import { ColorPalette } from '../theme';
 import ExecutorchLogo from '../assets/icons/executorch.svg';
 
 export default function Home() {
diff --git a/apps/computer-vision/app/inspect/index.tsx b/apps/computer-vision/app/inspect/index.tsx
index 68b7fa3149..c5d2669a64 100644
--- a/apps/computer-vision/app/inspect/index.tsx
+++ b/apps/computer-vision/app/inspect/index.tsx
@@ -11,7 +11,7 @@ import {
 } from 'react-native';
 import { inspectModel, type TensorMeta } from 'react-native-executorch';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import ColorPalette from '../../colors';
+import { ColorPalette } from '../../theme';
 
 type InspectionResult = Awaited<ReturnType<typeof inspectModel>>;
 
diff --git a/apps/computer-vision/colors.ts b/apps/computer-vision/colors.ts
deleted file mode 100644
index feb75ac336..0000000000
--- a/apps/computer-vision/colors.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-const ColorPalette = {
-  primary: '#001A72',
-  strongPrimary: '#020F3C',
-};
-
-export default ColorPalette;
diff --git a/apps/computer-vision/commonStyles.ts b/apps/computer-vision/commonStyles.ts
deleted file mode 100644
index 22040b7187..0000000000
--- a/apps/computer-vision/commonStyles.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { theme } from './theme';
-
-export const commonStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: theme.colors.background,
-  },
-  contentContainer: {
-    padding: theme.spacing.large,
-    alignItems: 'center',
-  },
-  title: {
-    fontSize: theme.typography.title.fontSize,
-    fontWeight: theme.typography.title.fontWeight,
-    color: theme.colors.strongPrimary,
-    marginBottom: theme.spacing.large,
-  },
-  buttonRow: {
-    flexDirection: 'row',
-    gap: theme.spacing.small,
-    width: '100%',
-    marginBottom: theme.spacing.large,
-  },
-  description: {
-    fontSize: theme.typography.body.fontSize,
-    color: theme.colors.textMuted,
-    textAlign: 'center',
-    marginBottom: theme.spacing.large,
-    paddingHorizontal: theme.spacing.medium,
-  },
-});
diff --git a/apps/computer-vision/theme.ts b/apps/computer-vision/theme.ts
index 21522221b0..ef0877dfc4 100644
--- a/apps/computer-vision/theme.ts
+++ b/apps/computer-vision/theme.ts
@@ -1,4 +1,9 @@
-import ColorPalette from './colors';
+import { StyleSheet } from 'react-native';
+
+export const ColorPalette = {
+  primary: '#001A72',
+  strongPrimary: '#020F3C',
+};
 
 export const theme = {
   colors: {
@@ -39,3 +44,33 @@ export const theme = {
     },
   },
 };
+
+export const commonStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  contentContainer: {
+    padding: theme.spacing.large,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: theme.typography.title.fontSize,
+    fontWeight: theme.typography.title.fontWeight,
+    color: theme.colors.strongPrimary,
+    marginBottom: theme.spacing.large,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    gap: theme.spacing.small,
+    width: '100%',
+    marginBottom: theme.spacing.large,
+  },
+  description: {
+    fontSize: theme.typography.body.fontSize,
+    color: theme.colors.textMuted,
+    textAlign: 'center',
+    marginBottom: theme.spacing.large,
+    paddingHorizontal: theme.spacing.medium,
+  },
+});

From 1aef571dbf3976f3a7951720018e0ca143501c10 Mon Sep 17 00:00:00 2001
From: Bartosz Hanc <bartosz.hanc02@gmail.com>
Date: Mon, 22 Jun 2026 04:17:20 +0200
Subject: [PATCH 4/9] chore: remove isMountedRef from Model Inspector screen

---
 apps/computer-vision/app/inspect/index.tsx | 23 ++++------------------
 1 file changed, 4 insertions(+), 19 deletions(-)

diff --git a/apps/computer-vision/app/inspect/index.tsx b/apps/computer-vision/app/inspect/index.tsx
index c5d2669a64..5085ec0d31 100644
--- a/apps/computer-vision/app/inspect/index.tsx
+++ b/apps/computer-vision/app/inspect/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState } from 'react';
 import {
   View,
   Text,
@@ -21,15 +21,6 @@ function InspectContent() {
   const [result, setResult] = useState<InspectionResult | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const isMountedRef = useRef(true);
-
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-
   const handleInspect = async (targetUrl: string) => {
     if (!targetUrl.trim()) {
       Alert.alert('Error', 'Please enter a valid URL');
@@ -40,17 +31,11 @@ function InspectContent() {
     setError(null);
     try {
       const res = await inspectModel(targetUrl.trim());
-      if (isMountedRef.current) {
-        setResult(res);
-      }
+      setResult(res);
     } catch (e: any) {
-      if (isMountedRef.current) {
-        setError(e.message || String(e));
-      }
+      setError(e.message || String(e));
     } finally {
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
+      setLoading(false);
     }
   };
 

From 1e0dc48e4f8e751c689dd5869614d350f05c64b5 Mon Sep 17 00:00:00 2001
From: Bartosz Hanc <bartosz.hanc02@gmail.com>
Date: Mon, 22 Jun 2026 04:23:22 +0200
Subject: [PATCH 5/9] fix: fix comments

---
 apps/computer-vision/app/classification/index.tsx | 2 +-
 apps/computer-vision/theme.ts                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/computer-vision/app/classification/index.tsx b/apps/computer-vision/app/classification/index.tsx
index c6ed9a0904..98f52ea638 100644
--- a/apps/computer-vision/app/classification/index.tsx
+++ b/apps/computer-vision/app/classification/index.tsx
@@ -88,7 +88,7 @@ function ClassificationContent() {
       contentContainerStyle={commonStyles.contentContainer}
     >
       <Text style={commonStyles.description}>
-        Upload or capture an image to identify objects using an EfficientNet classifier.
+        Upload or capture an image to identify objects using a classifier.
       </Text>
 
       <ModelPicker
diff --git a/apps/computer-vision/theme.ts b/apps/computer-vision/theme.ts
index ef0877dfc4..765ed34ae1 100644
--- a/apps/computer-vision/theme.ts
+++ b/apps/computer-vision/theme.ts
@@ -10,7 +10,7 @@ export const theme = {
     primary: ColorPalette.primary,
     strongPrimary: ColorPalette.strongPrimary,
     secondary: '#ffffff',
-    accent: '#1a73e8', // Blue color used for synchronous runs
+    accent: '#1a73e8',
     background: '#f5f5f5',
     cardBackground: '#ffffff',
     placeholderBackground: '#eaeaea',

From 45b856cd42ba8f15ece6274deb729d90e721e304 Mon Sep 17 00:00:00 2001
From: Bartosz Hanc <bartosz.hanc02@gmail.com>
Date: Mon, 22 Jun 2026 14:56:20 +0200
Subject: [PATCH 6/9] fix(cv): clamp image resizing width to source width and
 avoid passing ImageRef to manipulate to prevent iOS JSI crash

---
 apps/computer-vision/utils.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/computer-vision/utils.ts b/apps/computer-vision/utils.ts
index c9085e7deb..2915c353c0 100644
--- a/apps/computer-vision/utils.ts
+++ b/apps/computer-vision/utils.ts
@@ -38,11 +38,14 @@ export const getImage = async (
 };
 
 export const loadSkImage = async (uri: string, targetWidth = 800): Promise<SkImage> => {
-  const result = await ImageManipulator.manipulate(uri)
-    .resize({ width: targetWidth })
-    .renderAsync()
-    .then((res) => res.saveAsync({ format: SaveFormat.PNG }));
+  let imageRef = await ImageManipulator.manipulate(uri).renderAsync();
 
+  let finalRef = imageRef;
+  if (imageRef.width > targetWidth) {
+    finalRef = await ImageManipulator.manipulate(uri).resize({ width: targetWidth }).renderAsync();
+  }
+
+  const result = await finalRef.saveAsync({ format: SaveFormat.PNG });
   const encoded = await Skia.Data.fromURI(result.uri);
   try {
     const img = Skia.Image.MakeImageFromEncoded(encoded);

From f940ff5a02744eaa4322f34c32c0426de3ecc853 Mon Sep 17 00:00:00 2001
From: Bartosz Hanc <bartosz.hanc02@gmail.com>
Date: Mon, 22 Jun 2026 15:14:59 +0200
Subject: [PATCH 7/9] Refactor Skia image loading to use useImage hook and fix
 Expo JSI crash on resize

---
 .../app/classification/index.tsx              | 35 +++++++++++++------
 apps/computer-vision/utils.ts                 | 17 +++------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/apps/computer-vision/app/classification/index.tsx b/apps/computer-vision/app/classification/index.tsx
index 98f52ea638..1ed249b62e 100644
--- a/apps/computer-vision/app/classification/index.tsx
+++ b/apps/computer-vision/app/classification/index.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
 import { commonStyles, ColorPalette } from '../../theme';
-import { type SkImage as SkiaImageType } from '@shopify/react-native-skia';
+import { useImage } from '@shopify/react-native-skia';
 import { useClassifier, models } from 'react-native-executorch';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import { getImage, loadSkImage } from '../../utils';
+import { getImage, prepareImage } from '../../utils';
 import { ModelPicker, type ModelOption } from '../../components/ModelPicker';
 import { ImageViewport } from '../../components/ImageViewport';
 import { ModelStatus } from '../../components/ModelStatus';
@@ -29,12 +29,14 @@ const MODEL_OPTIONS: ModelOption[] = [
 
 function ClassificationContent() {
   const [selectedModel, setSelectedModel] = useState<any>(MODEL_OPTIONS[0].value);
-  const [skiaImage, setSkiaImage] = useState<SkiaImageType | null>(null);
+  const [imageUri, setImageUri] = useState<string | null>(null);
   const [isProcessing, setIsProcessing] = useState(false);
   const [results, setResults] = useState<{ label: string; confidence: number }[]>([]);
   const [latency, setLatency] = useState<number | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const skiaImage = useImage(imageUri, (err) => setError(err.message || String(err)));
+
   const {
     isReady,
     downloadProgress,
@@ -44,13 +46,17 @@ function ClassificationContent() {
   } = useClassifier<string>(selectedModel);
 
   const handlePickImage = async (useCamera: boolean) => {
-    const asset = await getImage(useCamera);
-    if (asset?.uri) {
-      const img = await loadSkImage(asset.uri);
-      setSkiaImage(img);
-      setResults([]);
-      setLatency(null);
-      setError(null);
+    setError(null);
+    try {
+      const asset = await getImage(useCamera);
+      if (asset?.uri) {
+        const uri = await prepareImage(asset.uri);
+        setImageUri(uri);
+        setResults([]);
+        setLatency(null);
+      }
+    } catch (e: any) {
+      setError(e.message || String(e));
     }
   };
 
@@ -59,8 +65,15 @@ function ClassificationContent() {
     if (!sync) setIsProcessing(true);
     setError(null);
     try {
+      const pixels = skiaImage.readPixels();
+      if (!pixels) {
+        throw new Error('Failed to read pixels from image');
+      }
+      if (!(pixels instanceof Uint8Array)) {
+        throw new Error('Expected Uint8Array from readPixels');
+      }
       const buffer = {
-        data: skiaImage.readPixels() as Uint8Array,
+        data: pixels,
         width: skiaImage.width(),
         height: skiaImage.height(),
         format: 'rgba' as const,
diff --git a/apps/computer-vision/utils.ts b/apps/computer-vision/utils.ts
index 2915c353c0..325d9aea14 100644
--- a/apps/computer-vision/utils.ts
+++ b/apps/computer-vision/utils.ts
@@ -1,7 +1,6 @@
 import { Alert } from 'react-native';
 import * as ImagePicker from 'expo-image-picker';
 import { ImageManipulator, SaveFormat } from 'expo-image-manipulator';
-import { Skia, SkImage } from '@shopify/react-native-skia';
 
 export const getImage = async (
   useCamera: boolean
@@ -37,21 +36,13 @@ export const getImage = async (
   return pickerResult.assets[0];
 };
 
-export const loadSkImage = async (uri: string, targetWidth = 800): Promise<SkImage> => {
+export const prepareImage = async (uri: string, targetWidth = 800): Promise<string> => {
   let imageRef = await ImageManipulator.manipulate(uri).renderAsync();
 
-  let finalRef = imageRef;
   if (imageRef.width > targetWidth) {
-    finalRef = await ImageManipulator.manipulate(uri).resize({ width: targetWidth }).renderAsync();
+    imageRef = await ImageManipulator.manipulate(uri).resize({ width: targetWidth }).renderAsync();
   }
 
-  const result = await finalRef.saveAsync({ format: SaveFormat.PNG });
-  const encoded = await Skia.Data.fromURI(result.uri);
-  try {
-    const img = Skia.Image.MakeImageFromEncoded(encoded);
-    if (!img) throw new Error('Failed to create SkImage');
-    return img;
-  } finally {
-    encoded.dispose();
-  }
+  const result = await imageRef.saveAsync({ format: SaveFormat.PNG });
+  return result.uri;
 };

From 9181b4e5b76c9769a58310019e88fc31cc63b77b Mon Sep 17 00:00:00 2001
From: Bartosz Hanc <bartosz.hanc02@gmail.com>
Date: Mon, 22 Jun 2026 15:19:26 +0200
Subject: [PATCH 8/9] Update react-native-worklets patch to match rnet-poc
 version

---
 patches/react-native-worklets+0.9.1.patch | 441 +---------------------
 1 file changed, 1 insertion(+), 440 deletions(-)

diff --git a/patches/react-native-worklets+0.9.1.patch b/patches/react-native-worklets+0.9.1.patch
index 8dfdc126ee..32c25c0dce 100644
--- a/patches/react-native-worklets+0.9.1.patch
+++ b/patches/react-native-worklets+0.9.1.patch
@@ -39,445 +39,6 @@ index 3114a09..26cc787 100644
  }
  
  SerializableObject::SerializableObject(jsi::Runtime &rt, const jsi::Object &object)
-diff --git a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.cpp.orig b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.cpp.orig
-new file mode 100644
-index 0000000..3114a09
---- /dev/null
-+++ b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.cpp.orig
-@@ -0,0 +1,433 @@
-+#include <jsi/jsi.h>
-+#include <react/debug/react_native_assert.h>
-+#include <worklets/SharedItems/Serializable.h>
-+#include <worklets/SharedItems/SerializableFactory.h>
-+#include <worklets/WorkletRuntime/RuntimeData.h>
-+#include <worklets/WorkletRuntime/RuntimeManager.h>
-+#include <worklets/WorkletRuntime/WorkletRuntime.h>
-+
-+#include <memory>
-+#include <string>
-+#include <utility>
-+
-+using namespace facebook;
-+
-+namespace worklets {
-+
-+namespace {
-+
-+jsi::Function getValueUnpacker(jsi::Runtime &rt) {
-+  auto valueUnpacker = rt.global().getProperty(rt, "__valueUnpacker");
-+  react_native_assert(valueUnpacker.isObject() && "valueUnpacker not found");
-+  return valueUnpacker.asObject(rt).asFunction(rt);
-+}
-+
-+jsi::Function getRemoteFunctionUnpacker(jsi::Runtime &rt) {
-+  auto remoteFunctionUnpacker = rt.global().getProperty(rt, "__remoteFunctionUnpacker");
-+  react_native_assert(remoteFunctionUnpacker.isObject() && "remoteFunctionUnpacker not found");
-+  return remoteFunctionUnpacker.asObject(rt).asFunction(rt);
-+}
-+
-+jsi::Object getRemoteFunctionRegistry(jsi::Runtime &rt) {
-+  auto registry = rt.global().getProperty(rt, "__remoteFunctionRegistry");
-+  react_native_assert(registry.isObject() && "remoteFunctionRegistry not found");
-+  return registry.getObject(rt);
-+}
-+
-+} // namespace
-+
-+jsi::Value makeSerializableClone(
-+    jsi::Runtime &rt,
-+    const jsi::Value &value,
-+    const jsi::Value &shouldRetainRemote,
-+    const jsi::Value &nativeStateSource) {
-+  std::shared_ptr<Serializable> serializable;
-+  if (value.isObject()) {
-+    auto object = value.asObject(rt);
-+    if (!object.getProperty(rt, "__workletHash").isUndefined()) {
-+      // We pass `false` because this function is invoked only
-+      // by `makeSerializableCloneOnUIRecursive` which doesn't
-+      // make Retaining Serializables.
-+      return makeSerializableWorklet(rt, object, false);
-+    } else if (!object.getProperty(rt, "__init").isUndefined()) {
-+      return makeSerializableInitializer(rt, object);
-+    } else if (object.isFunction(rt)) {
-+      auto fun = object.asFunction(rt);
-+      if (fun.isHostFunction(rt)) {
-+        auto name = fun.getProperty(rt, "name").asString(rt).utf8(rt);
-+        return makeSerializableHostFunction(
-+            rt, fun.getHostFunction(rt), name, fun.getProperty(rt, "length").asNumber());
-+      } else {
-+        throw std::runtime_error(
-+            "[Worklets] Cloning remote functions from Worklet Runtimes is only available in Bundle Mode.");
-+      }
-+    } else if (object.isArray(rt)) {
-+      if (shouldRetainRemote.isBool() && shouldRetainRemote.getBool()) {
-+        serializable = std::make_shared<RetainingSerializable<SerializableArray>>(rt, object.asArray(rt));
-+      } else {
-+        serializable = std::make_shared<SerializableArray>(rt, object.asArray(rt));
-+      }
-+    } else if (object.isArrayBuffer(rt)) {
-+      serializable = std::make_shared<SerializableArrayBuffer>(rt, object.getArrayBuffer(rt));
-+    } else if (object.isHostObject(rt)) {
-+      if (object.isHostObject<SerializableJSRef>(rt)) {
-+        return object;
-+      }
-+      serializable = std::make_shared<SerializableHostObject>(rt, object.getHostObject(rt));
-+    } else {
-+      if (shouldRetainRemote.isBool() && shouldRetainRemote.getBool()) {
-+        serializable = std::make_shared<RetainingSerializable<SerializableObject>>(rt, object, nativeStateSource);
-+      } else {
-+        serializable = std::make_shared<SerializableObject>(rt, object, nativeStateSource);
-+      }
-+    }
-+  } else if (value.isString()) {
-+    serializable = std::make_shared<SerializableString>(value.asString(rt).utf8(rt));
-+  } else if (value.isUndefined()) {
-+    serializable = std::make_shared<SerializableScalar>();
-+  } else if (value.isNull()) {
-+    serializable = std::make_shared<SerializableScalar>(nullptr);
-+  } else if (value.isBool()) {
-+    serializable = std::make_shared<SerializableScalar>(value.getBool());
-+  } else if (value.isNumber()) {
-+    serializable = std::make_shared<SerializableScalar>(value.getNumber());
-+  } else if (value.isBigInt()) {
-+    serializable = std::make_shared<SerializableBigInt>(rt, value.getBigInt(rt));
-+  } else if (value.isSymbol()) {
-+    // TODO: this is only a placeholder implementation, here we replace symbols
-+    // with strings in order to make certain objects to be captured. There isn't
-+    // yet any use-case for using symbols on the UI runtime so it is fine to keep
-+    // it like this for now.
-+    serializable = std::make_shared<SerializableString>(value.getSymbol(rt).toString(rt));
-+  } else {
-+    throw std::runtime_error("[Worklets] Attempted to convert an unsupported value type.");
-+  }
-+  return SerializableJSRef::newNativeStateObject(rt, serializable);
-+}
-+
-+std::shared_ptr<Serializable> extractSerializableOrThrow(
-+    jsi::Runtime &rt,
-+    const jsi::Value &maybeSerializableValue,
-+    const std::string &errorMessage) {
-+  if (maybeSerializableValue.isObject()) {
-+    auto object = maybeSerializableValue.getObject(rt);
-+    return extractSerializableOrThrow(rt, object, errorMessage);
-+  } else if (maybeSerializableValue.isUndefined()) {
-+    return Serializable::undefined();
-+  }
-+  throw std::runtime_error(errorMessage);
-+}
-+
-+std::shared_ptr<Serializable> extractSerializableOrThrow(
-+    jsi::Runtime &rt,
-+    const jsi::Object &maybeSerializableValue,
-+    const std::string &errorMessage) {
-+  if (maybeSerializableValue.hasNativeState(rt)) {
-+    auto nativeState = maybeSerializableValue.getNativeState(rt);
-+    return std::dynamic_pointer_cast<SerializableJSRef>(nativeState)->value();
-+  }
-+  throw std::runtime_error(errorMessage);
-+}
-+
-+Serializable::~Serializable() = default;
-+
-+std::shared_ptr<Serializable> Serializable::undefined() {
-+  static auto undefined = std::make_shared<SerializableScalar>();
-+  return undefined;
-+}
-+
-+SerializableJSRef::~SerializableJSRef() = default;
-+
-+SerializableArray::SerializableArray(jsi::Runtime &rt, const jsi::Array &array) : Serializable(ValueType::ArrayType) {
-+  auto size = array.size(rt);
-+  data_.reserve(size);
-+  for (size_t i = 0; i < size; i++) {
-+    data_.push_back(extractSerializableOrThrow(rt, array.getValueAtIndex(rt, i)));
-+  }
-+}
-+
-+jsi::Value SerializableArray::toJSValue(jsi::Runtime &rt) {
-+  auto size = data_.size();
-+  auto ary = jsi::Array(rt, size);
-+  for (size_t i = 0; i < size; i++) {
-+    ary.setValueAtIndex(rt, i, data_[i]->toJSValue(rt));
-+  }
-+  return ary;
-+}
-+
-+jsi::Value SerializableArrayBuffer::toJSValue(jsi::Runtime &rt) {
-+  auto size = static_cast<int>(data_.size());
-+  auto arrayBuffer =
-+      rt.global().getPropertyAsFunction(rt, "ArrayBuffer").callAsConstructor(rt, size).getObject(rt).getArrayBuffer(rt);
-+  memcpy(arrayBuffer.data(rt), data_.data(), size);
-+  return arrayBuffer;
-+}
-+
-+SerializableObject::SerializableObject(jsi::Runtime &rt, const jsi::Object &object)
-+    : Serializable(ValueType::ObjectType) {
-+  auto propertyNames = object.getPropertyNames(rt);
-+  auto size = propertyNames.size(rt);
-+  data_.reserve(size);
-+  for (size_t i = 0; i < size; i++) {
-+    auto key = propertyNames.getValueAtIndex(rt, i).asString(rt);
-+    auto value = extractSerializableOrThrow(rt, object.getProperty(rt, key));
-+    data_.emplace_back(key.utf8(rt), value);
-+  }
-+  if (object.hasNativeState(rt)) {
-+    nativeState_ = object.getNativeState(rt);
-+  }
-+}
-+
-+SerializableObject::SerializableObject(jsi::Runtime &rt, const jsi::Object &object, const jsi::Value &nativeStateSource)
-+    : SerializableObject(rt, object) {
-+  if (nativeStateSource.isObject() && nativeStateSource.asObject(rt).hasNativeState(rt)) {
-+    nativeState_ = nativeStateSource.asObject(rt).getNativeState(rt);
-+  }
-+}
-+
-+jsi::Value SerializableObject::toJSValue(jsi::Runtime &rt) {
-+  auto obj = jsi::Object(rt);
-+  for (const auto &i : data_) {
-+    obj.setProperty(rt, jsi::String::createFromUtf8(rt, i.first), i.second->toJSValue(rt));
-+  }
-+  if (nativeState_ != nullptr) {
-+    obj.setNativeState(rt, nativeState_);
-+  }
-+  return obj;
-+}
-+
-+SerializableMap::SerializableMap(jsi::Runtime &rt, const jsi::Array &keys, const jsi::Array &values)
-+    : Serializable(ValueType::MapType) {
-+  auto size = keys.size(rt);
-+  react_native_assert(size == values.size(rt) && "Keys and values arrays must have the same size.");
-+  data_.reserve(size);
-+  for (size_t i = 0; i < size; i++) {
-+    auto key = extractSerializableOrThrow(rt, keys.getValueAtIndex(rt, i));
-+    auto value = extractSerializableOrThrow(rt, values.getValueAtIndex(rt, i));
-+    data_.emplace_back(key, value);
-+  }
-+}
-+
-+jsi::Value SerializableMap::toJSValue(jsi::Runtime &rt) {
-+  const auto keyValues = jsi::Array(rt, data_.size());
-+  for (size_t i = 0, size = data_.size(); i < size; i++) {
-+    const auto pair = jsi::Array(rt, 2);
-+    pair.setValueAtIndex(rt, 0, data_[i].first->toJSValue(rt));
-+    pair.setValueAtIndex(rt, 1, data_[i].second->toJSValue(rt));
-+    keyValues.setValueAtIndex(rt, i, std::move(pair));
-+  }
-+
-+  const auto &global = rt.global();
-+  auto map = global.getPropertyAsFunction(rt, "Map").callAsConstructor(rt, std::move(keyValues));
-+
-+  return map;
-+}
-+
-+SerializableSet::SerializableSet(jsi::Runtime &rt, const jsi::Array &values) : Serializable(ValueType::SetType) {
-+  auto size = values.size(rt);
-+  data_.reserve(size);
-+  for (size_t i = 0; i < size; i++) {
-+    data_.push_back(extractSerializableOrThrow(rt, values.getValueAtIndex(rt, i)));
-+  }
-+}
-+
-+jsi::Value SerializableSet::toJSValue(jsi::Runtime &rt) {
-+  const auto values = jsi::Array(rt, data_.size());
-+  for (size_t i = 0, size = data_.size(); i < size; i++) {
-+    values.setValueAtIndex(rt, i, data_[i]->toJSValue(rt));
-+  }
-+
-+  const auto &global = rt.global();
-+  auto set = global.getPropertyAsFunction(rt, "Set").callAsConstructor(rt, std::move(values));
-+
-+  return set;
-+}
-+
-+jsi::Value SerializableRegExp::toJSValue(jsi::Runtime &rt) {
-+  return rt.global()
-+      .getPropertyAsFunction(rt, "RegExp")
-+      .callAsConstructor(rt, jsi::String::createFromUtf8(rt, pattern_), jsi::String::createFromUtf8(rt, flags_));
-+}
-+
-+jsi::Value SerializableError::toJSValue(jsi::Runtime &rt) {
-+  auto error = rt.global()
-+                   .getPropertyAsFunction(rt, "Error")
-+                   .callAsConstructor(rt, jsi::String::createFromUtf8(rt, message_))
-+                   .getObject(rt);
-+
-+  error.setProperty(rt, "name", jsi::String::createFromUtf8(rt, name_));
-+
-+  if (stack_.has_value()) {
-+    error.setProperty(rt, "stack", jsi::String::createFromUtf8(rt, stack_.value()));
-+  } else {
-+    error.setProperty(rt, "stack", jsi::String::createFromUtf8(rt, ""));
-+  }
-+
-+  return error;
-+}
-+
-+jsi::Value SerializableHostObject::toJSValue(jsi::Runtime &rt) {
-+  return jsi::Object::createFromHostObject(rt, hostObject_);
-+}
-+
-+jsi::Value SerializableHostFunction::toJSValue(jsi::Runtime &rt) {
-+  return jsi::Function::createFromHostFunction(rt, jsi::PropNameID::forUtf8(rt, name_), paramCount_, hostFunction_);
-+}
-+
-+jsi::Value SerializableWorklet::toJSValue(jsi::Runtime &rt) {
-+  react_native_assert(
-+      std::any_of(data_.cbegin(), data_.cend(), [](const auto &item) { return item.first == "__workletHash"; }) &&
-+      "SerializableWorklet doesn't have `__workletHash` property");
-+  jsi::Value obj = SerializableObject::toJSValue(rt);
-+  return getValueUnpacker(rt).call(rt, obj, jsi::String::createFromAscii(rt, "Worklet"));
-+}
-+
-+jsi::Value SerializableImport::toJSValue(jsi::Runtime &rt) {
-+  /**
-+   * The only way to obtain a module in runtime is to use the Metro's require
-+   * method implementation, which is injected into the global object as `__r`.
-+   */
-+  const auto metroRequire = rt.global().getProperty(rt, "__r");
-+  if (metroRequire.isUndefined()) {
-+    return jsi::Value::undefined();
-+  }
-+
-+  const auto imported = jsi::String::createFromUtf8(rt, imported_);
-+  return metroRequire.asObject(rt).asFunction(rt).call(rt, source_).asObject(rt).getProperty(rt, imported);
-+}
-+
-+SerializableRemoteFunction::~SerializableRemoteFunction() {
-+  if (isHostedOnRNRuntime()) {
-+    // TODO: consider batching
-+    const auto &data = std::get<RNRuntimeData>(runtimeData_);
-+    data.jsScheduler->scheduleOnJS([id = data.remoteId](jsi::Runtime &rt) {
-+      const auto registry = getRemoteFunctionRegistry(rt);
-+      registry.getPropertyAsFunction(rt, "delete").callWithThis(rt, registry, jsi::Value(id));
-+    });
-+  } else {
-+    auto &workletData = std::get<WorkletRuntimeData>(runtimeData_);
-+    cleanupRuntimeAware(hostRuntime_, workletData.function);
-+  }
-+}
-+
-+jsi::Value SerializableRemoteFunction::toJSValue(jsi::Runtime &rt) {
-+  if (&rt == hostRuntime_) {
-+    if (isHostedOnRNRuntime()) {
-+      const auto &rnData = std::get<RNRuntimeData>(runtimeData_);
-+      const auto registry = getRemoteFunctionRegistry(rt);
-+      return registry.getPropertyAsFunction(rt, "get").callWithThis(rt, registry, jsi::Value(rnData.remoteId));
-+    } else {
-+      const auto &workletData = std::get<WorkletRuntimeData>(runtimeData_);
-+      return jsi::Value(rt, *workletData.function);
-+    }
-+  } else {
-+    const auto name = name_.empty() ? jsi::Value::undefined() : jsi::String::createFromUtf8(rt, name_);
-+    auto holderFunction = getRemoteFunctionUnpacker(rt).call(rt, name).getObject(rt);
-+    holderFunction.setNativeState(rt, std::make_shared<SerializableJSRef>(shared_from_this()));
-+    return holderFunction;
-+  }
-+}
-+
-+// TODO: generalize it and merge with other scheduling methods
-+void SerializableRemoteFunction::resolveOrRejectPromise(
-+    const std::shared_ptr<Serializable> &resolveValue,
-+    const std::shared_ptr<RuntimeManager> &runtimeManager) {
-+  if (isHostedOnRNRuntime()) {
-+    const auto &data = std::get<RNRuntimeData>(runtimeData_);
-+    data.jsScheduler->scheduleOnJS([resolver = shared_from_this(), resolveValue](jsi::Runtime &rt) {
-+      resolver->toJSValue(rt).getObject(rt).getFunction(rt).call(rt, resolveValue->toJSValue(rt));
-+    });
-+  } else {
-+    const auto workletRuntime = runtimeManager->getRuntime(hostRuntimeId_);
-+    // NOLINTNEXTLINE(readability/braces)
-+    if (!workletRuntime) [[unlikely]] {
-+      // Host runtime is dead, most likely we're the last owner of the Remote Function.
-+      // Do nothing.
-+    } else {
-+      workletRuntime->schedule([resolver = shared_from_this(), resolveValue](jsi::Runtime &rt) {
-+        resolver->toJSValue(rt).getObject(rt).getFunction(rt).call(rt, resolveValue->toJSValue(rt));
-+      });
-+    }
-+  }
-+}
-+
-+jsi::Value SerializableInitializer::toJSValue(jsi::Runtime &rt) {
-+  if (remoteValue_ == nullptr) {
-+    auto initObj = initializer_->toJSValue(rt);
-+    auto value = std::make_unique<jsi::Value>(
-+        getValueUnpacker(rt).call(rt, initObj, jsi::String::createFromAscii(rt, "Handle")));
-+
-+    // We are locking the initialization here since the thread that is
-+    // initializing can be preempted on runtime lock. E.g.
-+    // UI thread can be preempted on initialization of a shared value and then
-+    // JS thread can try to access the shared value, locking the whole runtime.
-+    // If we put the lock on `getValueUnpacker` part (basically any part that
-+    // requires runtime) we would get a deadlock since UI thread would never
-+    // release it.
-+    std::unique_lock<std::mutex> lock(initializationMutex_);
-+    if (remoteValue_ == nullptr) {
-+      remoteValue_ = std::move(value);
-+      remoteRuntime_ = &rt;
-+    }
-+  }
-+  if (&rt == remoteRuntime_) {
-+    return jsi::Value(rt, *remoteValue_);
-+  }
-+  auto initObj = initializer_->toJSValue(rt);
-+  return getValueUnpacker(rt).call(rt, initObj, jsi::String::createFromAscii(rt, "Handle"));
-+}
-+
-+jsi::Value SerializableString::toJSValue(jsi::Runtime &rt) {
-+  return jsi::String::createFromUtf8(rt, data_);
-+}
-+
-+jsi::Value SerializableBigInt::toJSValue(jsi::Runtime &rt) {
-+  if (fastValue_.has_value()) {
-+    return jsi::BigInt::fromInt64(rt, fastValue_.value());
-+  } else {
-+    return rt.global().getPropertyAsFunction(rt, "BigInt").call(rt, jsi::String::createFromUtf8(rt, slowValue_));
-+  }
-+}
-+
-+jsi::Value SerializableScalar::toJSValue(jsi::Runtime &) {
-+  switch (valueType_) {
-+    case Serializable::ValueType::UndefinedType:
-+      return jsi::Value();
-+    case Serializable::ValueType::NullType:
-+      return jsi::Value(nullptr);
-+    case Serializable::ValueType::BooleanType:
-+      return jsi::Value(data_.boolean);
-+    case Serializable::ValueType::NumberType:
-+      return jsi::Value(data_.number);
-+    default:
-+      throw std::runtime_error("[Worklets] Attempted to convert object that's not of a scalar type.");
-+  }
-+}
-+
-+jsi::Value SerializableTurboModuleLike::toJSValue(jsi::Runtime &rt) {
-+  auto obj = properties_->toJSValue(rt).asObject(rt);
-+  const auto prototype = proto_->toJSValue(rt);
-+  rt.global().getPropertyAsObject(rt, "Object").getPropertyAsFunction(rt, "setPrototypeOf").call(rt, obj, prototype);
-+
-+  return obj;
-+}
-+
-+jsi::Function getCustomSerializableUnpacker(jsi::Runtime &rt) {
-+  auto customSerializableUnpacker = rt.global().getProperty(rt, "__customSerializableUnpacker");
-+  react_native_assert(customSerializableUnpacker.isObject() && "customSerializableUnpacker not found");
-+  return customSerializableUnpacker.asObject(rt).asFunction(rt);
-+}
-+
-+jsi::Value CustomSerializable::toJSValue(jsi::Runtime &rt) {
-+  try {
-+    auto unpack = getCustomSerializableUnpacker(rt);
-+    auto data = data_->toJSValue(rt);
-+
-+    return unpack.call(rt, data, jsi::Value(typeId_));
-+  } catch (jsi::JSError &e) {
-+    throw std::runtime_error(
-+        std::string("[Worklets] Failed to deserialize CustomSerializable. Reason: ") + e.getMessage());
-+  }
-+}
-+
-+} // namespace worklets
 diff --git a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.h b/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.h
 index 4194097..f397b2b 100644
 --- a/node_modules/react-native-worklets/Common/cpp/worklets/SharedItems/Serializable.h
@@ -745,4 +306,4 @@ index fd73c6b..ef23281 100644
 +      }
        if (value instanceof Map) {
          const keys: unknown[] = [];
-         const values: unknown[] = [];
+         const values: unknown[] = [];
\ No newline at end of file

From fdef4e96dd5d607f3ea3eaa03781abffa468fd56 Mon Sep 17 00:00:00 2001
From: Bartosz Hanc <bartosz.hanc02@gmail.com>
Date: Mon, 22 Jun 2026 15:28:16 +0200
Subject: [PATCH 9/9] Refactor getImage to prepare and return the image URI
 directly

---
 .../computer-vision/app/classification/index.tsx |  7 +++----
 apps/computer-vision/utils.ts                    | 16 ++++++++--------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/apps/computer-vision/app/classification/index.tsx b/apps/computer-vision/app/classification/index.tsx
index 1ed249b62e..0849f9853b 100644
--- a/apps/computer-vision/app/classification/index.tsx
+++ b/apps/computer-vision/app/classification/index.tsx
@@ -4,7 +4,7 @@ import { commonStyles, ColorPalette } from '../../theme';
 import { useImage } from '@shopify/react-native-skia';
 import { useClassifier, models } from 'react-native-executorch';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import { getImage, prepareImage } from '../../utils';
+import { getImage } from '../../utils';
 import { ModelPicker, type ModelOption } from '../../components/ModelPicker';
 import { ImageViewport } from '../../components/ImageViewport';
 import { ModelStatus } from '../../components/ModelStatus';
@@ -48,9 +48,8 @@ function ClassificationContent() {
   const handlePickImage = async (useCamera: boolean) => {
     setError(null);
     try {
-      const asset = await getImage(useCamera);
-      if (asset?.uri) {
-        const uri = await prepareImage(asset.uri);
+      const uri = await getImage(useCamera);
+      if (uri) {
         setImageUri(uri);
         setResults([]);
         setLatency(null);
diff --git a/apps/computer-vision/utils.ts b/apps/computer-vision/utils.ts
index 325d9aea14..2a73d4b5b5 100644
--- a/apps/computer-vision/utils.ts
+++ b/apps/computer-vision/utils.ts
@@ -3,8 +3,9 @@ import * as ImagePicker from 'expo-image-picker';
 import { ImageManipulator, SaveFormat } from 'expo-image-manipulator';
 
 export const getImage = async (
-  useCamera: boolean
-): Promise<ImagePicker.ImagePickerAsset | undefined> => {
+  useCamera: boolean,
+  targetWidth = 800
+): Promise<string | undefined> => {
   const permissionResult = useCamera
     ? await ImagePicker.requestCameraPermissionsAsync()
     : await ImagePicker.requestMediaLibraryPermissionsAsync();
@@ -33,14 +34,13 @@ export const getImage = async (
     return;
   }
 
-  return pickerResult.assets[0];
-};
-
-export const prepareImage = async (uri: string, targetWidth = 800): Promise<string> => {
-  let imageRef = await ImageManipulator.manipulate(uri).renderAsync();
+  const asset = pickerResult.assets[0];
+  let imageRef = await ImageManipulator.manipulate(asset.uri).renderAsync();
 
   if (imageRef.width > targetWidth) {
-    imageRef = await ImageManipulator.manipulate(uri).resize({ width: targetWidth }).renderAsync();
+    imageRef = await ImageManipulator.manipulate(asset.uri)
+      .resize({ width: targetWidth })
+      .renderAsync();
   }
 
   const result = await imageRef.saveAsync({ format: SaveFormat.PNG });