work in progress - fix:switching between screens while model is generating

Author: mlodyjesienin

apps/llm/app/_layout.tsx

@@ -1,15 +1,18 @@
 import { Drawer } from 'expo-router/drawer';
 import ColorPalette from '../colors';
 import React from 'react';
+import { LlmProvider, useLlmContext } from '../contexts/LlmContext';
 
-export default function _layout() {
+function DrawerWithScreens() {
+  const { isGenerating } = useLlmContext();
   return (
     <Drawer
       screenOptions={{
         drawerActiveTintColor: ColorPalette.primary,
         drawerInactiveTintColor: '#888',
         headerTintColor: ColorPalette.primary,
         headerTitleStyle: { color: ColorPalette.primary },
+        swipeEnabled: !isGenerating,
       }}
     >
       <Drawer.Screen
@@ -47,3 +50,11 @@ export default function _layout() {
     </Drawer>
   );
 }
+
+export default function _layout() {
+  return (
+    <LlmProvider>
+      <DrawerWithScreens />
+    </LlmProvider>
+  );
+}

apps/llm/app/llm/index.tsx

@@ -21,8 +21,10 @@ import {
 import PauseIcon from '../../assets/icons/pause_icon.svg';
 import ColorPalette from '../../colors';
 import Messages from '../../components/Messages';
+import { useLlmContext } from '../../contexts/LlmContext';
 
 export default function LLMScreen() {
+  const { setIsGenerating } = useLlmContext();
   const [isTextInputFocused, setIsTextInputFocused] = useState(false);
   const [userInput, setUserInput] = useState('');
   const textInputRef = useRef<TextInput>(null);
@@ -33,6 +35,10 @@ export default function LLMScreen() {
     tokenizerConfigSource: LLAMA3_2_TOKENIZER_CONFIG,
   });
 
+  useEffect(() => {
+    setIsGenerating(llm.isGenerating);
+  }, [llm.isGenerating, setIsGenerating]);
+
   useEffect(() => {
     if (llm.error) {
       console.log('LLM error:', llm.error);

apps/llm/app/llm_tool_calling/index.tsx

@@ -26,8 +26,10 @@ import Messages from '../../components/Messages';
 import * as Brightness from 'expo-brightness';
 import * as Calendar from 'expo-calendar';
 import { executeTool, TOOL_DEFINITIONS_PHONE } from '../../utils/tools';
+import { useLlmContext } from '../../contexts/LlmContext';
 
 export default function LLMToolCallingScreen() {
+  const { setIsGenerating } = useLlmContext();
   const [isTextInputFocused, setIsTextInputFocused] = useState(false);
   const [userInput, setUserInput] = useState('');
   const textInputRef = useRef<TextInput>(null);
@@ -38,6 +40,10 @@ export default function LLMToolCallingScreen() {
     tokenizerConfigSource: HAMMER2_1_TOKENIZER_CONFIG,
   });
 
+  useEffect(() => {
+    setIsGenerating(llm.isGenerating);
+  }, [llm.isGenerating, setIsGenerating]);
+
   const { configure } = llm;
   useEffect(() => {
     configure({

apps/llm/app/voice_chat/index.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import {
   Keyboard,
   KeyboardAvoidingView,
@@ -27,7 +27,7 @@ import Messages from '../../components/Messages';
 import LiveAudioStream from 'react-native-live-audio-stream';
 import DeviceInfo from 'react-native-device-info';
 import { Buffer } from 'buffer';
-
+import { useLlmContext } from '../../contexts/LlmContext';
 const audioStreamOptions = {
   sampleRate: 16000,
   channels: 1,
@@ -57,6 +57,7 @@ const float32ArrayFromPCMBinaryBuffer = (b64EncodedBuffer: string) => {
 };
 
 export default function VoiceChatScreen() {
+  const { setIsGenerating } = useLlmContext();
   const [isRecording, setIsRecording] = useState(false);
   const messageRecorded = useRef<boolean>(false);
 
@@ -71,6 +72,10 @@ export default function VoiceChatScreen() {
     overlapSeconds: 1.2,
   });
 
+  useEffect(() => {
+    setIsGenerating(llm.isGenerating || speechToText.isGenerating);
+  }, [llm.isGenerating, speechToText.isGenerating, setIsGenerating]);
+
   const onChunk = (data: string) => {
     const float32Chunk = float32ArrayFromPCMBinaryBuffer(data);
     speechToText.streamingTranscribe(

apps/llm/contexts/LlmContext.tsx

@@ -0,0 +1,33 @@
+import React, {
+  createContext,
+  useState,
+  useContext,
+  Dispatch,
+  SetStateAction,
+} from 'react';
+
+type LlmContextType = {
+  isGenerating: boolean;
+  setIsGenerating: Dispatch<SetStateAction<boolean>>;
+};
+
+export const LlmContext = createContext<LlmContextType>({
+  isGenerating: false,
+  setIsGenerating: () => {},
+});
+
+export function useLlmContext() {
+  const context = useContext(LlmContext);
+  return context;
+}
+
+import { ReactNode } from 'react';
+
+export const LlmProvider = ({ children }: { children: ReactNode }) => {
+  const [isGenerating, setIsGenerating] = useState(false);
+  return (
+    <LlmContext.Provider value={{ isGenerating, setIsGenerating }}>
+      {children}
+    </LlmContext.Provider>
+  );
+};

yarn.lock

@@ -3789,7 +3789,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-navigation/native@npm:^7.1.6":
+"@react-navigation/native@npm:^7.1.10, @react-navigation/native@npm:^7.1.6":
   version: 7.1.10
   resolution: "@react-navigation/native@npm:7.1.10"
   dependencies:
@@ -5735,6 +5735,7 @@ __metadata:
     "@babel/core": "npm:^7.25.2"
     "@react-native/metro-config": "npm:^0.76.3"
     "@react-navigation/drawer": "npm:^7.4.1"
+    "@react-navigation/native": "npm:^7.1.10"
     "@shopify/react-native-skia": "npm:v2.0.0-next.2"
     "@types/react": "npm:~19.0.10"
     expo: "npm:^53.0.0"
@@ -5746,7 +5747,8 @@ __metadata:
     metro-config: "npm:^0.81.0"
     react: "npm:19.0.0"
     react-native: "npm:0.79.2"
-    react-native-executorch: "npm:0.4.2"
+    react-native-device-info: "npm:^14.0.4"
+    react-native-executorch: "workspace:*"
     react-native-gesture-handler: "npm:~2.24.0"
     react-native-image-picker: "npm:^7.2.2"
     react-native-loading-spinner-overlay: "npm:^3.0.1"
@@ -5755,7 +5757,6 @@ __metadata:
     react-native-screens: "npm:~4.11.1"
     react-native-svg: "npm:15.11.2"
     react-native-svg-transformer: "npm:^1.5.0"
-    react-native-wheel-scrollview-picker: "npm:^2.0.6"
   peerDependencies:
     react-native: "*"
   languageName: unknown
@@ -9692,6 +9693,7 @@ __metadata:
     "@babel/core": "npm:^7.25.2"
     "@react-native/metro-config": "npm:^0.76.3"
     "@react-navigation/drawer": "npm:^7.4.1"
+    "@react-navigation/native": "npm:^7.1.10"
     "@types/react": "npm:~19.0.10"
     expo: "npm:~53.0.8"
     expo-brightness: "npm:~13.1.4"
@@ -9705,6 +9707,7 @@ __metadata:
     react: "npm:19.0.0"
     react-native: "npm:0.79.2"
     react-native-audio-api: "npm:0.5.7"
+    react-native-device-info: "npm:^14.0.4"
     react-native-executorch: "workspace:*"
     react-native-gesture-handler: "npm:~2.24.0"
     react-native-live-audio-stream: "npm:^1.1.1"
@@ -9715,7 +9718,6 @@ __metadata:
     react-native-screens: "npm:~4.11.1"
     react-native-svg: "npm:15.11.2"
     react-native-svg-transformer: "npm:^1.5.0"
-    react-native-wheel-scrollview-picker: "npm:^2.0.6"
   peerDependencies:
     react-native: "*"
   languageName: unknown
@@ -12328,7 +12330,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"react-native-executorch@npm:0.4.2, react-native-executorch@workspace:*, react-native-executorch@workspace:packages/react-native-executorch":
+"react-native-executorch@workspace:*, react-native-executorch@workspace:packages/react-native-executorch":
   version: 0.0.0-use.local
   resolution: "react-native-executorch@workspace:packages/react-native-executorch"
   dependencies: