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..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 f02b93d740..0849f9853b 100644
--- a/apps/computer-vision/app/classification/index.tsx
+++ b/apps/computer-vision/app/classification/index.tsx
@@ -1,20 +1,15 @@
 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, ColorPalette } from '../../theme';
+import { useImage } from '@shopify/react-native-skia';
 import { useClassifier, models } from 'react-native-executorch';
-import ScreenWrapper from '../../ScreenWrapper';
-import ColorPalette from '../../colors';
+import ScreenWrapper from '../../components/ScreenWrapper';
 import { getImage } 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,29 +27,16 @@ 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 [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,
@@ -64,228 +46,132 @@ export default function ClassificationScreen() {
   } = useClassifier<string>(selectedModel);
 
   const handlePickImage = async (useCamera: boolean) => {
-    const asset = await getImage(useCamera);
-    if (asset?.uri) {
-      setImageUri(asset.uri);
-      setResults([]);
-      setLatency(null);
-      setError(null);
+    setError(null);
+    try {
+      const uri = await getImage(useCamera);
+      if (uri) {
+        setImageUri(uri);
+        setResults([]);
+        setLatency(null);
+      }
+    } catch (e: any) {
+      setError(e.message || String(e));
     }
   };
 
   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 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: pixels,
+        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 a 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>
+      )}
+    </ScrollView>
+  );
+}
 
-        <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>
-
-        {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..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 f8de248506..5085ec0d31 100644
--- a/apps/computer-vision/app/inspect/index.tsx
+++ b/apps/computer-vision/app/inspect/index.tsx
@@ -10,12 +10,12 @@ import {
   Alert,
 } from 'react-native';
 import { inspectModel, type TensorMeta } from 'react-native-executorch';
-import ScreenWrapper from '../../ScreenWrapper';
-import ColorPalette from '../../colors';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import { ColorPalette } from '../../theme';
 
 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);
@@ -67,100 +67,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/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/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..765ed34ae1
--- /dev/null
+++ b/apps/computer-vision/theme.ts
@@ -0,0 +1,76 @@
+import { StyleSheet } from 'react-native';
+
+export const ColorPalette = {
+  primary: '#001A72',
+  strongPrimary: '#020F3C',
+};
+
+export const theme = {
+  colors: {
+    primary: ColorPalette.primary,
+    strongPrimary: ColorPalette.strongPrimary,
+    secondary: '#ffffff',
+    accent: '#1a73e8',
+    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',
+    },
+  },
+};
+
+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/utils.ts b/apps/computer-vision/utils.ts
index 09639cf6f9..2a73d4b5b5 100644
--- a/apps/computer-vision/utils.ts
+++ b/apps/computer-vision/utils.ts
@@ -1,39 +1,48 @@
-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';
+
+export const getImage = async (
+  useCamera: boolean,
+  targetWidth = 800
+): Promise<string | 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;
+  }
+
+  const asset = pickerResult.assets[0];
+  let imageRef = await ImageManipulator.manipulate(asset.uri).renderAsync();
 
-    return output.assets[0];
-  } catch (err) {
-    console.error(err);
+  if (imageRef.width > targetWidth) {
+    imageRef = await ImageManipulator.manipulate(asset.uri)
+      .resize({ width: targetWidth })
+      .renderAsync();
   }
+
+  const result = await imageRef.saveAsync({ format: SaveFormat.PNG });
+  return result.uri;
 };
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..32c25c0dce
--- /dev/null
+++ b/patches/react-native-worklets+0.9.1.patch
@@ -0,0 +1,309 @@
+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.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[] = [];
\ No newline at end of file
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"