react-native-voice-ts 1.0.0 → 1.0.2

package/src/components/VoiceMicrophone.tsx

@@ -0,0 +1,345 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import Voice from '../index';
+import type { SpeechErrorEvent, SpeechResultsEvent } from '../VoiceModuleTypes';
+
+export interface VoiceMicrophoneProps {
+  /**
+   * Callback fired when speech is recognized and converted to text
+   */
+  onSpeechResult?: (text: string) => void;
+
+  /**
+   * Callback fired when partial results are available (real-time)
+   */
+  onPartialResult?: (text: string) => void;
+
+  /**
+   * Callback fired when recording starts
+   */
+  onStart?: () => void;
+
+  /**
+   * Callback fired when recording stops
+   */
+  onStop?: () => void;
+
+  /**
+   * Callback fired when an error occurs
+   */
+  onError?: (error: string) => void;
+
+  /**
+   * Language locale for speech recognition
+   * @default 'en-US'
+   */
+  locale?: string;
+
+  /**
+   * Whether to automatically start recording on mount
+   * @default false
+   */
+  autoStart?: boolean;
+
+  /**
+   * Whether to enable partial results (real-time transcription)
+   * @default true
+   */
+  enablePartialResults?: boolean;
+
+  /**
+   * Whether to continue listening after getting results (continuous mode)
+   * When enabled, the microphone will automatically restart after getting results
+   * @default false
+   */
+  continuous?: boolean;
+
+  /**
+   * Maximum silence duration in milliseconds before stopping (continuous mode)
+   * Only applies when continuous mode is enabled
+   * @default 5000 (5 seconds)
+   */
+  maxSilenceDuration?: number;
+
+  /**
+   * Custom render function for the component
+   * Receives isRecording state and control functions
+   */
+  children?: (props: {
+    isRecording: boolean;
+    recognizedText: string;
+    partialText: string;
+    start: () => Promise<void>;
+    stop: () => Promise<void>;
+    cancel: () => Promise<void>;
+    error: string | null;
+  }) => React.ReactNode;
+}
+
+/**
+ * VoiceMicrophone Component
+ *
+ * A ready-to-use voice recognition component that handles microphone access,
+ * speech recognition, and provides real-time text results.
+ *
+ * @example
+ * ```tsx
+ * // Simple usage with callback
+ * <VoiceMicrophone
+ *   onSpeechResult={(text) => setSearchQuery(text)}
+ * />
+ *
+ * // Custom render with full control
+ * <VoiceMicrophone locale="en-US">
+ *   {({ isRecording, recognizedText, start, stop }) => (
+ *     <View>
+ *       <Text>{recognizedText}</Text>
+ *       <Button
+ *         onPress={isRecording ? stop : start}
+ *         title={isRecording ? 'Stop' : 'Start'}
+ *       />
+ *     </View>
+ *   )}
+ * </VoiceMicrophone>
+ * ```
+ */
+const VoiceMicrophone: React.FC<VoiceMicrophoneProps> = ({
+  onSpeechResult,
+  onPartialResult,
+  onStart,
+  onStop,
+  onError,
+  locale = 'en-US',
+  autoStart = false,
+  enablePartialResults = true,
+  continuous = false,
+  maxSilenceDuration = 5000,
+  children,
+}) => {
+  const [isRecording, setIsRecording] = useState(false);
+  const [recognizedText, setRecognizedText] = useState('');
+  const [partialText, setPartialText] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [shouldContinue, setShouldContinue] = useState(false);
+  const silenceTimerRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    // Clear any existing timers on cleanup
+    return () => {
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    // Set up event listeners
+    Voice.onSpeechStart = () => {
+      setIsRecording(true);
+      setError(null);
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+      }
+      onStart?.();
+    };
+
+    Voice.onSpeechEnd = async () => {
+      setIsRecording(false);
+
+      // In continuous mode, restart listening after results
+      if (continuous && shouldContinue) {
+        // Small delay before restarting
+        setTimeout(async () => {
+          if (shouldContinue) {
+            try {
+              await Voice.start(locale, {
+                EXTRA_PARTIAL_RESULTS: enablePartialResults,
+              });
+            } catch (err) {
+              console.error('Failed to restart voice recognition:', err);
+            }
+          }
+        }, 100);
+      } else {
+        onStop?.();
+      }
+    };
+
+    Voice.onSpeechError = (e: SpeechErrorEvent) => {
+      const errorMessage = e.error?.message || 'Unknown error';
+      setError(errorMessage);
+      setIsRecording(false);
+      setShouldContinue(false);
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+      }
+      onError?.(errorMessage);
+    };
+
+    Voice.onSpeechResults = (e: SpeechResultsEvent) => {
+      if (e.value && e.value.length > 0) {
+        const text = e.value[0];
+
+        // In continuous mode, append new text to existing
+        if (continuous && recognizedText) {
+          const updatedText = recognizedText + ' ' + text;
+          setRecognizedText(updatedText);
+          onSpeechResult?.(updatedText);
+        } else {
+          setRecognizedText(text);
+          onSpeechResult?.(text);
+        }
+
+        setPartialText('');
+      }
+    };
+
+    if (enablePartialResults) {
+      Voice.onSpeechPartialResults = (e: SpeechResultsEvent) => {
+        if (e.value && e.value.length > 0) {
+          const text = e.value[0];
+          setPartialText(text);
+          onPartialResult?.(text);
+
+          // Reset silence timer on partial results (user is speaking)
+          if (continuous && silenceTimerRef.current) {
+            clearTimeout(silenceTimerRef.current);
+            silenceTimerRef.current = setTimeout(() => {
+              if (shouldContinue) {
+                stop();
+              }
+            }, maxSilenceDuration);
+          }
+        }
+      };
+    }
+
+    // Cleanup
+    return () => {
+      Voice.destroy().then(Voice.removeAllListeners);
+    };
+  }, [
+    onSpeechResult,
+    onPartialResult,
+    onStart,
+    onStop,
+    onError,
+    enablePartialResults,
+    continuous,
+    shouldContinue,
+    recognizedText,
+    locale,
+    maxSilenceDuration,
+  ]);
+
+  // Auto-start if enabled
+  useEffect(() => {
+    if (autoStart) {
+      start();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoStart]);
+
+  const start = useCallback(async () => {
+    try {
+      setError(null);
+      if (!continuous) {
+        setRecognizedText('');
+        setPartialText('');
+      }
+      setShouldContinue(true);
+
+      // Check permission (Android only)
+      const hasPermission = await Voice.checkMicrophonePermission();
+      if (!hasPermission) {
+        const granted = await Voice.requestMicrophonePermission();
+        if (!granted) {
+          setError('Microphone permission denied');
+          return;
+        }
+      }
+
+      await Voice.start(locale, {
+        EXTRA_PARTIAL_RESULTS: enablePartialResults,
+      });
+
+      // Start silence timer if in continuous mode
+      if (continuous) {
+        silenceTimerRef.current = setTimeout(() => {
+          if (shouldContinue) {
+            stop();
+          }
+        }, maxSilenceDuration);
+      }
+    } catch (e) {
+      const errorMessage =
+        e instanceof Error ? e.message : 'Failed to start recording';
+      setError(errorMessage);
+      setShouldContinue(false);
+      onError?.(errorMessage);
+    }
+  }, [
+    locale,
+    enablePartialResults,
+    onError,
+    continuous,
+    maxSilenceDuration,
+    shouldContinue,
+  ]);
+
+  const stop = useCallback(async () => {
+    try {
+      setShouldContinue(false);
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+        silenceTimerRef.current = null;
+      }
+      await Voice.stop();
+      onStop?.();
+    } catch (e) {
+      const errorMessage =
+        e instanceof Error ? e.message : 'Failed to stop recording';
+      setError(errorMessage);
+      onError?.(errorMessage);
+    }
+  }, [onError, onStop]);
+
+  const cancel = useCallback(async () => {
+    try {
+      setShouldContinue(false);
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+        silenceTimerRef.current = null;
+      }
+      await Voice.cancel();
+      setRecognizedText('');
+      setPartialText('');
+    } catch (e) {
+      const errorMessage =
+        e instanceof Error ? e.message : 'Failed to cancel recording';
+      setError(errorMessage);
+      onError?.(errorMessage);
+    }
+  }, [onError]);
+
+  // If children render prop is provided, use it
+  if (children) {
+    return (
+      <>
+        {children({
+          isRecording,
+          recognizedText,
+          partialText,
+          start,
+          stop,
+          cancel,
+          error,
+        })}
+      </>
+    );
+  }
+
+  // Default: render nothing (headless component)
+  return null;
+};
+
+export default VoiceMicrophone;

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export { default as VoiceMicrophone } from './VoiceMicrophone';
+export type { VoiceMicrophoneProps } from './VoiceMicrophone';
+export { MicIcon, MicOffIcon } from './MicIcon';
+export type { MicIconProps, MicOffIconProps } from './MicIcon';

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export { useVoiceRecognition } from './useVoiceRecognition';
+export type {
+  UseVoiceRecognitionOptions,
+  UseVoiceRecognitionReturn,
+} from './useVoiceRecognition';

package/src/hooks/useVoiceRecognition.ts

@@ -0,0 +1,333 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import Voice from '../index';
+import type { SpeechErrorEvent, SpeechResultsEvent } from '../VoiceModuleTypes';
+
+export interface UseVoiceRecognitionOptions {
+  /**
+   * Language locale for speech recognition
+   * @default 'en-US'
+   */
+  locale?: string;
+
+  /**
+   * Whether to enable partial results (real-time transcription)
+   * @default true
+   */
+  enablePartialResults?: boolean;
+
+  /**
+   * Whether to continue listening after getting results (continuous mode)
+   * When enabled, the microphone will automatically restart after getting results
+   * @default false
+   */
+  continuous?: boolean;
+
+  /**
+   * Maximum silence duration in milliseconds before stopping (continuous mode)
+   * Only applies when continuous mode is enabled
+   * @default 5000 (5 seconds)
+   */
+  maxSilenceDuration?: number;
+
+  /**
+   * Callback fired when speech is recognized
+   */
+  onResult?: (text: string) => void;
+
+  /**
+   * Callback fired when an error occurs
+   */
+  onError?: (error: string) => void;
+}
+
+export interface UseVoiceRecognitionReturn {
+  /**
+   * Whether voice recognition is currently active
+   */
+  isRecording: boolean;
+
+  /**
+   * Final recognized text results
+   */
+  results: string[];
+
+  /**
+   * Partial results (real-time transcription)
+   */
+  partialResults: string[];
+
+  /**
+   * Error message if an error occurred
+   */
+  error: string | null;
+
+  /**
+   * Start voice recognition
+   */
+  start: () => Promise<void>;
+
+  /**
+   * Stop voice recognition and get final results
+   */
+  stop: () => Promise<void>;
+
+  /**
+   * Cancel voice recognition without getting results
+   */
+  cancel: () => Promise<void>;
+
+  /**
+   * Reset all state
+   */
+  reset: () => void;
+}
+
+/**
+ * Custom hook for voice recognition
+ *
+ * Provides a simple interface for speech-to-text functionality with automatic
+ * event listener setup and cleanup.
+ *
+ * @example
+ * ```tsx
+ * const { isRecording, results, start, stop } = useVoiceRecognition({
+ *   locale: 'en-US',
+ *   onResult: (text) => setSearchQuery(text),
+ * });
+ *
+ * // In your component
+ * <Button
+ *   onPress={isRecording ? stop : start}
+ *   title={isRecording ? 'Stop' : 'Start Recording'}
+ * />
+ * <Text>{results[0]}</Text>
+ * ```
+ */
+export const useVoiceRecognition = (
+  options: UseVoiceRecognitionOptions = {},
+): UseVoiceRecognitionReturn => {
+  const {
+    locale = 'en-US',
+    enablePartialResults = true,
+    continuous = false,
+    maxSilenceDuration = 5000,
+    onResult,
+    onError,
+  } = options;
+
+  const [isRecording, setIsRecording] = useState(false);
+  const [results, setResults] = useState<string[]>([]);
+  const [partialResults, setPartialResults] = useState<string[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [shouldContinue, setShouldContinue] = useState(false);
+  const silenceTimerRef = React.useRef<NodeJS.Timeout | null>(null);
+  const accumulatedTextRef = React.useRef<string>('');
+
+  useEffect(() => {
+    // Clear any existing timers on cleanup
+    return () => {
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    // Set up event listeners
+    Voice.onSpeechStart = () => {
+      setIsRecording(true);
+      setError(null);
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+      }
+    };
+
+    Voice.onSpeechEnd = async () => {
+      setIsRecording(false);
+
+      // In continuous mode, restart listening after results
+      if (continuous && shouldContinue) {
+        setTimeout(async () => {
+          if (shouldContinue) {
+            try {
+              await Voice.start(locale, {
+                EXTRA_PARTIAL_RESULTS: enablePartialResults,
+              });
+            } catch (err) {
+              console.error('Failed to restart voice recognition:', err);
+            }
+          }
+        }, 100);
+      }
+    };
+
+    Voice.onSpeechError = (e: SpeechErrorEvent) => {
+      const errorMessage = e.error?.message || 'Unknown error';
+      setError(errorMessage);
+      setIsRecording(false);
+      setShouldContinue(false);
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+      }
+      onError?.(errorMessage);
+    };
+
+    Voice.onSpeechResults = (e: SpeechResultsEvent) => {
+      if (e.value && e.value.length > 0) {
+        if (continuous) {
+          // Append new text to accumulated text
+          const newText = e.value[0];
+          accumulatedTextRef.current = accumulatedTextRef.current
+            ? accumulatedTextRef.current + ' ' + newText
+            : newText;
+          setResults([accumulatedTextRef.current, ...e.value.slice(1)]);
+          onResult?.(accumulatedTextRef.current);
+        } else {
+          setResults(e.value);
+          const firstResult = e.value[0];
+          if (firstResult) {
+            onResult?.(firstResult);
+          }
+        }
+      }
+    };
+
+    if (enablePartialResults) {
+      Voice.onSpeechPartialResults = (e: SpeechResultsEvent) => {
+        if (e.value && e.value.length > 0) {
+          setPartialResults(e.value);
+
+          // Reset silence timer on partial results (user is speaking)
+          if (continuous && silenceTimerRef.current) {
+            clearTimeout(silenceTimerRef.current);
+            silenceTimerRef.current = setTimeout(() => {
+              if (shouldContinue) {
+                stop();
+              }
+            }, maxSilenceDuration);
+          }
+        }
+      };
+    }
+
+    // Cleanup
+    return () => {
+      Voice.destroy().then(Voice.removeAllListeners);
+    };
+  }, [
+    enablePartialResults,
+    onResult,
+    onError,
+    continuous,
+    shouldContinue,
+    locale,
+    maxSilenceDuration,
+  ]);
+
+  const start = useCallback(async () => {
+    try {
+      setError(null);
+      if (!continuous) {
+        setResults([]);
+        setPartialResults([]);
+        accumulatedTextRef.current = '';
+      }
+      setShouldContinue(true);
+
+      // Check permission (Android only)
+      const hasPermission = await Voice.checkMicrophonePermission();
+      if (!hasPermission) {
+        const granted = await Voice.requestMicrophonePermission();
+        if (!granted) {
+          setError('Microphone permission denied');
+          return;
+        }
+      }
+
+      await Voice.start(locale, {
+        EXTRA_PARTIAL_RESULTS: enablePartialResults,
+      });
+
+      // Start silence timer if in continuous mode
+      if (continuous) {
+        silenceTimerRef.current = setTimeout(() => {
+          if (shouldContinue) {
+            stop();
+          }
+        }, maxSilenceDuration);
+      }
+    } catch (e) {
+      const errorMessage =
+        e instanceof Error ? e.message : 'Failed to start recording';
+      setError(errorMessage);
+      setShouldContinue(false);
+      onError?.(errorMessage);
+    }
+  }, [
+    locale,
+    enablePartialResults,
+    onError,
+    continuous,
+    maxSilenceDuration,
+    shouldContinue,
+  ]);
+
+  const stop = useCallback(async () => {
+    try {
+      setShouldContinue(false);
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+        silenceTimerRef.current = null;
+      }
+      await Voice.stop();
+    } catch (e) {
+      const errorMessage =
+        e instanceof Error ? e.message : 'Failed to stop recording';
+      setError(errorMessage);
+      onError?.(errorMessage);
+    }
+  }, [onError]);
+
+  const cancel = useCallback(async () => {
+    try {
+      setShouldContinue(false);
+      if (silenceTimerRef.current) {
+        clearTimeout(silenceTimerRef.current);
+        silenceTimerRef.current = null;
+      }
+      await Voice.cancel();
+      setResults([]);
+      setPartialResults([]);
+      accumulatedTextRef.current = '';
+    } catch (e) {
+      const errorMessage =
+        e instanceof Error ? e.message : 'Failed to cancel recording';
+      setError(errorMessage);
+      onError?.(errorMessage);
+    }
+  }, [onError]);
+
+  const reset = useCallback(() => {
+    setResults([]);
+    setPartialResults([]);
+    setError(null);
+    setIsRecording(false);
+    accumulatedTextRef.current = '';
+    setShouldContinue(false);
+    if (silenceTimerRef.current) {
+      clearTimeout(silenceTimerRef.current);
+      silenceTimerRef.current = null;
+    }
+  }, []);
+
+  return {
+    isRecording,
+    results,
+    partialResults,
+    error,
+    start,
+    stop,
+    cancel,
+    reset,
+  };
+};

package/src/images/mic.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-mic-icon lucide-mic"
+>
+  <path d="M12 19v3" />
+  <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+  <rect x="9" y="2" width="6" height="13" rx="3" />
+</svg>;