chore: fix llm examples on android

Author: msluszniak

apps/llm/app/llm/index.tsx

@@ -18,6 +18,7 @@ import PauseIcon from '../../assets/icons/pause_icon.svg';
 import ColorPalette from '../../colors';
 import Messages from '../../components/Messages';
 import { useIsFocused } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { GeneratingContext } from '../../context';
 import Spinner from '../../components/Spinner';
 import SuggestedPrompts from '../../components/SuggestedPrompts';
@@ -38,6 +39,7 @@ export default function LLMScreenWrapper() {
 }
 
 function LLMScreen() {
+  const { bottom } = useSafeAreaInsets();
   const [isTextInputFocused, setIsTextInputFocused] = useState(false);
   const [userInput, setUserInput] = useState('');
   const [selectedModel, setSelectedModel] = useState<LLMModelSources>(
@@ -120,7 +122,9 @@ function LLMScreen() {
             disabled={llm.isGenerating}
           />
           <StatsBar stats={stats} />
-          <View style={styles.bottomContainer}>
+          <View
+            style={[styles.bottomContainer, { paddingBottom: bottom || 16 }]}
+          >
             <TextInput
               autoCorrect={false}
               onFocus={() => setIsTextInputFocused(true)}
@@ -187,7 +191,7 @@ const styles = StyleSheet.create({
     color: ColorPalette.primary,
   },
   bottomContainer: {
-    height: 100,
+    minHeight: 100,
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'space-between',

apps/llm/app/multimodal_llm/index.tsx

@@ -13,6 +13,7 @@ import {
 } from 'react-native';
 import { launchImageLibrary } from 'react-native-image-picker';
 import { useIsFocused } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useLLM, LFM2_VL_1_6B_QUANTIZED } from 'react-native-executorch';
 import SendIcon from '../../assets/icons/send_icon.svg';
 import PauseIcon from '../../assets/icons/pause_icon.svg';
@@ -38,6 +39,7 @@ export default function MultimodalLLMScreenWrapper() {
 }
 
 function MultimodalLLMScreen() {
+  const { bottom } = useSafeAreaInsets();
   const [imageUri, setImageUri] = useState<string | null>(null);
   const [userInput, setUserInput] = useState('');
   const [isTextInputFocused, setIsTextInputFocused] = useState(false);
@@ -158,7 +160,9 @@ function MultimodalLLMScreen() {
           )}
 
           <StatsBar stats={stats} />
-          <View style={styles.bottomContainer}>
+          <View
+            style={[styles.bottomContainer, { paddingBottom: bottom || 16 }]}
+          >
             {/* Image picker button */}
             <TouchableOpacity
               style={styles.imageButton}
@@ -309,7 +313,7 @@ const styles = StyleSheet.create({
     color: ColorPalette.blueDark,
   },
   bottomContainer: {
-    height: 100,
+    minHeight: 100,
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'space-between',

apps/llm/app/voice_chat/index.tsx

@@ -34,6 +34,7 @@ import Messages from '../../components/Messages';
 import { AudioManager, AudioRecorder } from 'react-native-audio-api';
 import DeviceInfo from 'react-native-device-info';
 import { useIsFocused } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { GeneratingContext } from '../../context';
 
 type LLMModelSources = LLMProps['model'];
@@ -59,6 +60,7 @@ export default function VoiceChatScreenWrapper() {
 }
 
 function VoiceChatScreen() {
+  const { bottom } = useSafeAreaInsets();
   const [isRecording, setIsRecording] = useState(false);
   const [liveTranscription, setLiveTranscription] = useState('');
   const [selectedLLM, setSelectedLLM] =
@@ -194,7 +196,7 @@ function VoiceChatScreen() {
           onSelect={(m) => setSelectedSTT(m)}
         />
 
-        <View style={styles.bottomContainer}>
+        <View style={[styles.bottomContainer, { paddingBottom: bottom || 16 }]}>
           {DeviceInfo.isEmulatorSync() ? (
             <View style={styles.emulatorBox}>
               <Text style={[styles.emulatorWarning]}>
@@ -265,7 +267,7 @@ const styles = StyleSheet.create({
     color: ColorPalette.primary,
   },
   bottomContainer: {
-    height: 100,
+    minHeight: 100,
     width: '100%',
     justifyContent: 'center',
     alignItems: 'center',