react-native-voice-enhanced

react-native-voice-enhanced

A production-ready, React Native 0.76+ compatible voice recognition package with enhanced features and stability.

✨ Features

• ✅ React Native 0.76+ New Architecture compatible
• ✅ Hold-to-speak functionality (Android optimized)
• ✅ Enhanced useVoice hook with TypeScript support
• ✅ Ready-to-use VoiceButton component
• ✅ Intelligent error handling with recovery suggestions
• ✅ Real-time partial results
• ✅ Platform-specific optimizations
• ✅ Memory-efficient event management

🚀 Installation

npm install react-native-voice-enhanced
# or
yarn add react-native-voice-enhanced

📱 Quick Start

Option 1: Using the VoiceButton Component (Easiest)

import React from 'react';
import { View } from 'react-native';
import { VoiceButton } from 'react-native-voice-enhanced';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <VoiceButton
        onResult={(transcript) => {
          console.log('Transcribed:', transcript);
        }}
        onError={(error) => {
          console.error('Error:', error);
        }}
        language="en-US"
        holdToSpeak={true}
      />
    </View>
  );
}

Option 2: Using the useVoice Hook

import React from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
import { useVoice } from 'react-native-voice-enhanced';

export default function VoiceExample() {
  const {
    transcript,
    partialTranscript,
    isListening,
    error,
    startHold,
    stopHold,
  } = useVoice({
    language: 'en-US',
    partialResults: true,
    debug: true,
    onResult: (result) => console.log('Final:', result),
    onPartialResult: (partial) => console.log('Partial:', partial),
  });

  return (
    <View style={styles.container}>
      <Text style={styles.transcript}>
        {transcript || 'No transcript yet...'}
      </Text>
      
      {partialTranscript && (
        <Text style={styles.partial}>
          Live: {partialTranscript}
        </Text>
      )}
      
      <Pressable
        style={[styles.button, isListening && styles.listening]}
        onPressIn={startHold}
        onPressOut={stopHold}
      >
        <Text style={styles.buttonText}>
          {isListening ? '🎤 Recording...' : '🎤 Hold to Speak'}
        </Text>
      </Pressable>
      
      {error && (
        <Text style={styles.error}>
          Error: {error.message}
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, justifyContent: 'center' },
  transcript: { fontSize: 18, marginBottom: 20, textAlign: 'center' },
  partial: { fontSize: 14, color: '#666', fontStyle: 'italic', textAlign: 'center' },
  button: { padding: 20, backgroundColor: '#2196f3', borderRadius: 25, marginTop: 20 },
  listening: { backgroundColor: '#f44336' },
  buttonText: { color: 'white', textAlign: 'center', fontSize: 16, fontWeight: '600' },
  error: { color: 'red', textAlign: 'center', marginTop: 10 },
});

Option 3: Using the Original Voice Module

import Voice from 'react-native-voice-enhanced';

// Traditional usage (still works)
Voice.onSpeechResults = (event) => {
  console.log('Results:', event.value);
};

Voice.start('en-US');

🎯 API Reference

useVoice Hook

const {
  // State
  state,
  transcript,
  partialTranscript,
  confidence,
  error,
  isListening,
  isAvailable,
  volume,

  // Actions
  start,
  stop,
  cancel,
  startHold,
  stopHold,
  reset,

  // Utils
  checkAvailability,
  requestPermissions,
} = useVoice(config);

VoiceButton Component

<VoiceButton
  onResult={(transcript: string) => void}
  onError={(error: string) => void}
  language="en-US"
  holdToSpeak={true}
  disabled={false}
  activeColor="#f44336"
  inactiveColor="#2196f3"
  textColor="#ffffff"
  style={{ /* custom styles */ }}
  config={{ /* VoiceConfig options */ }}
/>

Configuration Options

interface VoiceConfig {
  language?: string;                    // Default: 'en-US'
  partialResults?: boolean;             // Default: true
  silenceTimeout?: number;              // Default: 2000
  autoStart?: boolean;                  // Default: false
  continuous?: boolean;                 // Default: false
  lowLatency?: boolean;                 // Default: false
  confidenceThreshold?: number;         // Default: 0.3
  debug?: boolean;                      // Default: false
  
  // Callbacks
  onResult?: (result: string, confidence?: number) => void;
  onPartialResult?: (result: string) => void;
  onError?: (error: VoiceError) => void;
  onStart?: () => void;
  onEnd?: () => void;
  onVolumeChange?: (volume: number) => void;
}

🔧 Platform-Specific Features

Android

• ✅ Hold recording support (startHoldRecording / stopHoldRecording)
• ✅ Silence timeout customization
• ✅ Advanced recognition options

iOS

• ✅ Automatic fallback to standard recording
• ✅ Native speech recognition integration

🐛 Troubleshooting

React Native 0.76+ Issues

If you encounter event listener issues with React Native 0.76+, this package automatically handles the New Architecture compatibility using DeviceEventEmitter.

Permissions

Make sure to add microphone permissions:

Android (android/app/src/main/AndroidManifest.xml):

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />

iOS (ios/YourApp/Info.plist):

<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to microphone for voice recognition</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>This app needs access to speech recognition</string>

📝 Migration from @react-native-voice/voice

• Install the package:

npm uninstall @react-native-voice/voice
npm install react-native-voice-enhanced

• Update imports:

// Before
import Voice from '@react-native-voice/voice';

// After - Enhanced hook (recommended)
import { useVoice, VoiceButton } from 'react-native-voice-enhanced';

// Or traditional usage
import Voice from 'react-native-voice-enhanced';

• Use the enhanced features:

• Replace manual event management with the useVoice hook
• Use VoiceButton for quick implementation
• Enable debug: true for troubleshooting

🏗️ Advanced Usage

Error Handling with Recovery

const { error } = useVoice({
  onError: (error) => {
    console.log('Error code:', error.code);
    console.log('Recoverable:', error.recoverable);
    console.log('Suggestions:', error.suggestions);
  }
});

Custom Voice Configuration

const { startHold } = useVoice({
  language: 'es-ES',
  silenceTimeout: 5000,
  confidenceThreshold: 0.7,
  debug: true,
});

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests.