feat: implement STT and TTS foundation using Expo libraries

app.json

@@ -23,6 +23,11 @@
       },
       "edgeToEdgeEnabled": true,
       "predictiveBackGestureEnabled": false,
+      "permissions": [
+        "android.permission.RECORD_AUDIO",
+        "android.permission.INTERNET",
+        "android.permission.MODIFY_AUDIO_SETTINGS"
+      ],
       "package": "com.anonymous.VisionVoice"
     },
     "web": {

package.json

@@ -6,7 +6,8 @@
     "start": "expo start",
     "android": "expo run:android",
     "ios": "expo run:ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "postinstall": "node scripts/postinstall-fixes.js"
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
@@ -17,21 +18,25 @@
     "expo-constants": "~18.0.13",
     "expo-font": "~14.0.11",
     "expo-linear-gradient": "~15.0.8",
+    "expo-speech": "~14.0.8",
+    "expo-speech-recognition": "^3.1.2",
     "expo-sqlite": "~16.0.10",
     "expo-status-bar": "~3.0.9",
     "llama.rn": "^0.12.0-rc.8",
-    "react": "^19.1.0",
+    "react": "19.1.0",
     "react-dom": "19.1.0",
-    "react-native": "^0.81.5",
+    "react-native": "0.81.5",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
-    "react-native-web": "^0.21.0"
+    "react-native-web": "^0.21.0",
+    "react-native-worklets": "0.5.1"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",
+    "expo-module-scripts": "^55.0.2",
     "typescript": "~5.9.2"
   },
   "private": true

scripts/postinstall-fixes.js

@@ -0,0 +1,42 @@
+const fs = require('fs');
+const path = require('path');
+
+const ensureExpoModuleScriptsShim = () => {
+  const shimPath = path.join('node_modules', 'expo-module-scripts', 'tsconfig.base');
+  if (!fs.existsSync(shimPath)) {
+    // Some installs may not include expo-module-scripts in node_modules, but
+    // expo-speech-recognition still expects this tsconfig path to resolve.
+    fs.mkdirSync(path.dirname(shimPath), { recursive: true });
+    fs.writeFileSync(shimPath, '{\n  "extends": "./tsconfig.base.json"\n}\n');
+  }
+};
+
+const patchExpoSpeechRecognitionTsconfig = () => {
+  const tsconfigPath = path.join('node_modules', 'expo-speech-recognition', 'tsconfig.json');
+  if (!fs.existsSync(tsconfigPath)) {
+    return;
+  }
+
+  const raw = fs.readFileSync(tsconfigPath, 'utf8');
+  const parsed = JSON.parse(raw);
+  let changed = false;
+
+  if (parsed.extends !== '../expo-module-scripts/tsconfig.base.json') {
+    parsed.extends = '../expo-module-scripts/tsconfig.base.json';
+    changed = true;
+  }
+
+  parsed.compilerOptions = parsed.compilerOptions || {};
+
+  if (parsed.compilerOptions.rootDir !== './src') {
+    parsed.compilerOptions.rootDir = './src';
+    changed = true;
+  }
+
+  if (changed) {
+    fs.writeFileSync(tsconfigPath, `${JSON.stringify(parsed, null, 2)}\n`);
+  }
+};
+
+ensureExpoModuleScriptsShim();
+patchExpoSpeechRecognitionTsconfig();

src/constants/voice.ts

@@ -0,0 +1,6 @@
+export const VOICE_CONFIG = {
+  language: 'en-US',
+  rate: 0.85,
+  pitch: 1.3,
+  volume: 1.0,
+};

src/hooks/useSTT.ts

@@ -0,0 +1,55 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { startVoice, stopVoice, destroyVoice } from '../services/speech/stt';
+
+export const useSTT = () => {
+  const [transcript, setTranscript] = useState('');
+  const [isListening, setIsListening] = useState(false);
+  const isListeningRef = useRef(false);
+
+  const startListening = useCallback(async () => {
+    console.log('[Hook] 🎯 startListening called, isListeningRef:', isListeningRef.current);
+
+    if (isListeningRef.current) {
+      console.log('[Hook] ⚠️ Already listening, skipping');
+      return;
+    }
+
+    console.log('[Hook] 📍 Setting listening state to true');
+    setTranscript('');
+    setIsListening(true);
+    isListeningRef.current = true;
+
+    await startVoice(
+      (text) => {
+        console.log('[Hook] 📨 Transcript received:', text);
+        setTranscript(text);
+      },
+      () => {
+        console.log('[Hook] 🏁 onEnd callback triggered');
+        setIsListening(false);
+        isListeningRef.current = false;
+      }
+    );
+  }, []);
+
+  const stopListening = useCallback(async () => {
+    console.log('[Hook] ⏹️ stopListening called');
+    await stopVoice();
+    setIsListening(false);
+    isListeningRef.current = false;
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      console.log('[Hook] 🧹 Cleanup: calling destroyVoice');
+      destroyVoice();
+    };
+  }, []);
+
+  return {
+    transcript,
+    isListening,
+    startListening,
+    stopListening,
+  };
+};

src/hooks/useTTS.ts

@@ -0,0 +1,25 @@
+import { useEffect, useCallback } from 'react';
+import { speakText, stopSpeech, initializeTTS } from '../services/speech/tts';
+
+export const useTTS = () => {
+  useEffect(() => {
+    console.log('[Hook] 🎯 Mounting useTTS hook');
+    const init = async () => {
+      await initializeTTS();
+      console.log('[Hook] ✅ TTS initialized on mount');
+    };
+    init();
+  }, []);
+
+  const speak = useCallback((text: string, onDone?: () => void) => {
+    console.log('[Hook] 📣 speak() called with:', text);
+    speakText(text, onDone);
+  }, []);
+
+  const stop = useCallback(async () => {
+    console.log('[Hook] ⏹️ stop() called');
+    stopSpeech();
+  }, []);
+
+  return { speak, stop };
+};