chore: add fix for android overlap of button and navbar

Author: msluszniak

apps/computer-vision/app/text_to_image/index.tsx

@@ -11,6 +11,7 @@ import {
   Platform,
 } from 'react-native';
 import React, { useContext, useEffect, useState } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Spinner from '../../components/Spinner';
 import {
   useTextToImage,
@@ -34,6 +35,7 @@ const MODELS: ModelOption<TextToImageModelSources>[] = [
 ];
 
 export default function TextToImageScreen() {
+  const { bottom } = useSafeAreaInsets();
   const [inferenceStepIdx, setInferenceStepIdx] = useState<number>(0);
   const [image, setImage] = useState<string | null>(null);
   const [steps, setSteps] = useState<number>(40);
@@ -173,7 +175,7 @@ export default function TextToImageScreen() {
 
         <StatsBar inferenceTime={generationTime} />
 
-        <View style={styles.inputRow}>
+        <View style={[styles.inputRow, { marginBottom: bottom || 12 }]}>
           <TextInput
             style={styles.textInput}
             placeholder="Enter prompt..."

apps/computer-vision/components/BottomBar.tsx

@@ -2,6 +2,7 @@ import ColorPalette from '../colors';
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import DeviceInfo from 'react-native-device-info';
 import { View, TouchableOpacity, StyleSheet, Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const BottomBar = ({
   handleCameraPress,
@@ -10,8 +11,10 @@ export const BottomBar = ({
   handleCameraPress: (isCamera: boolean) => void;
   runForward: () => void;
 }) => {
+  const { bottom } = useSafeAreaInsets();
+
   return (
-    <View style={styles.bottomContainer}>
+    <View style={[styles.bottomContainer, { paddingBottom: bottom || 16 }]}>
       <View style={styles.bottomIconsContainer}>
         <TouchableOpacity onPress={() => handleCameraPress(false)}>
           <FontAwesome name="photo" size={24} color={ColorPalette.primary} />
@@ -40,8 +43,8 @@ const styles = StyleSheet.create({
     width: '100%',
     gap: 15,
     alignItems: 'center',
-    padding: 16,
-    flex: 1,
+    paddingTop: 16,
+    paddingHorizontal: 16,
   },
   bottomIconsContainer: {
     flexDirection: 'row',