From c5f7b88ba80e764691ce85c9b0d9fecc703b445c Mon Sep 17 00:00:00 2001
From: Bartosz Hanc <bartosz.hanc02@gmail.com>
Date: Fri, 3 Jul 2026 16:07:49 +0200
Subject: [PATCH] fix(cv): add bottom safe area inset to classification screen

---
 apps/computer-vision/app/classification/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/computer-vision/app/classification/index.tsx b/apps/computer-vision/app/classification/index.tsx
index 0849f9853b..d2990c9040 100644
--- a/apps/computer-vision/app/classification/index.tsx
+++ b/apps/computer-vision/app/classification/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, Platform } from 'react-native';
-import { commonStyles, ColorPalette } from '../../theme';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { commonStyles, ColorPalette, theme } from '../../theme';
 import { useImage } from '@shopify/react-native-skia';
 import { useClassifier, models } from 'react-native-executorch';
 import ScreenWrapper from '../../components/ScreenWrapper';
@@ -28,6 +29,7 @@ const MODEL_OPTIONS: ModelOption[] = [
 ];
 
 function ClassificationContent() {
+  const insets = useSafeAreaInsets();
   const [selectedModel, setSelectedModel] = useState<any>(MODEL_OPTIONS[0].value);
   const [imageUri, setImageUri] = useState<string | null>(null);
   const [isProcessing, setIsProcessing] = useState(false);
@@ -97,7 +99,10 @@ function ClassificationContent() {
   return (
     <ScrollView
       style={commonStyles.container}
-      contentContainerStyle={commonStyles.contentContainer}
+      contentContainerStyle={[
+        commonStyles.contentContainer,
+        { paddingBottom: insets.bottom + theme.spacing.large },
+      ]}
     >
       <Text style={commonStyles.description}>
         Upload or capture an image to identify objects using a classifier.