🎤 React Native Voice (TypeScript)

Advanced Speech-to-Text Library for React Native

A powerful, production-ready speech-to-text library for React Native applications with full TypeScript support, built-in performance optimizations, and comprehensive features.

Features • Installation • Quick Start • Component Usage • API Reference • Examples • Contributing

✨ Features

Core Capabilities

🎯 Real-time Speech Recognition - Live speech-to-text conversion
🔄 Partial Results - Get intermediate results as the user speaks
📊 Volume Monitoring - Track audio input levels in real-time
🌍 Multi-language Support - Support for 100+ languages
⚡ Performance Optimized - Built with performance best practices
📱 Cross-platform - Works on both iOS and Android
🔒 Type-safe - Full TypeScript support with comprehensive types

Enhanced Features (2025 Update)

✅ Permission Management - Easy microphone permission handling
📈 Performance Tracking - Monitor recognition duration and state
💾 Result Caching - Access last results without re-recognition
🎨 Modern API - Clean, intuitive API design
🛡️ Error Handling - Comprehensive error management
🔧 Fully Customizable - Extensive configuration options
🎪 Ready-to-use Components - VoiceMicrophone component & useVoiceRecognition hook
🔌 Plug & Play - Import and use instantly in any React Native app
🎯 SVG Icons Included - Beautiful Lucide-based mic icons (MicIcon, MicOffIcon)

Platform Support

Feature	iOS	Android
Speech Recognition	✅	✅
Partial Results	✅	✅
Volume Events	✅	✅
Permission Management	N/A	✅
Audio Transcription	✅	❌
Recognition Services	❌	✅

📦 Installation

Using npm

npm install react-native-voice-ts --save

Using yarn

yarn add react-native-voice-ts

Using pnpm

pnpm add react-native-voice-ts

iOS Setup

cd ios && pod install && cd ..

Permissions

iOS (Info.plist)

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

Android (AndroidManifest.xml)

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

📱 Compatibility

React Native Versions: 0.71.0 and above

React Native	iOS	Android	Status
0.76.x	✅ 13.4+	✅ API 24+	Full Support
0.75.x	✅ 13.4+	✅ API 24+	Full Support
0.74.x	✅ 13.4+	✅ API 24+	Full Support
0.73.x	✅ 13.4+	✅ API 24+	Full Support
0.72.x	✅ 13.4+	✅ API 24+	Full Support
0.71.x	✅ 13.4+	✅ API 24+	Full Support
< 0.71	❌	❌	Not Supported

Architecture Support:

✅ Old Architecture (Bridge) - Fully Supported
✅ New Architecture (Turbo Modules & Fabric) - Fully Supported
✅ Expo Projects (48.0.0+) - Supported with config plugin

Platform Requirements:

iOS: 13.4 or higher
Android: API Level 24 (Android 7.0) or higher
Node.js: 18.0.0 or higher

For detailed compatibility information and migration guides, see COMPATIBILITY.md.

🚀 Quick Start

Three Ways to Use

// 1. Ready-to-use Component (Easiest - New in 2025)
import { VoiceMicrophone } from 'react-native-voice-ts';

// 2. Custom Hook (More control - New in 2025)
import { useVoiceRecognition } from 'react-native-voice-ts';

// 3. Core API (Advanced - Fully backward compatible)
import Voice from 'react-native-voice-ts';

// 4. Import SVG Icons (Optional - for custom UI)
import { MicIcon, MicOffIcon } from 'react-native-voice-ts';

Note: To use SVG icons, install react-native-svg:

npm install react-native-svg
# or
yarn add react-native-svg

⚡ Super Simple - Just Import and Use!

Example 1: Voice Search (Minimal Code)

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { VoiceMicrophone } from 'react-native-voice-ts';

export default function App() {
  const [searchText, setSearchText] = useState('');

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        value={searchText}
        onChangeText={setSearchText}
        placeholder="Type or speak..."
      />

      <VoiceMicrophone onSpeechResult={setSearchText}>
        {({ isRecording, start, stop }) => (
          <Button
            onPress={isRecording ? stop : start}
            title={isRecording ? '⏹ Stop' : '🎤 Speak'}
          />
        )}
      </VoiceMicrophone>
    </View>
  );
}

Example 2: With Custom Styling & SVG Icons

import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import { VoiceMicrophone, MicIcon, MicOffIcon } from 'react-native-voice-ts';

export default function App() {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={setText}
        placeholder="Search..."
      />

      <VoiceMicrophone onSpeechResult={setText}>
        {({ isRecording, start, stop }) => (
          <TouchableOpacity
            style={[styles.mic, isRecording && styles.recording]}
            onPress={isRecording ? stop : start}
          >
            {isRecording ? (
              <MicOffIcon size={24} color="#fff" />
            ) : (
              <MicIcon size={24} color="#fff" />
            )}
          </TouchableOpacity>
        )}
      </VoiceMicrophone>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flexDirection: 'row', padding: 20 },
  input: { flex: 1, borderWidth: 1, padding: 10, marginRight: 10 },
  mic: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#007AFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  recording: { backgroundColor: '#FF3B30' },
});

🎨 Built-in Icon Variants

The library includes 3 microphone icon variants, each with on/off states (6 icons total):

Variant 1: Standard Outline (Default)

Classic microphone with clean outline design.

import { MicIcon, MicOffIcon } from 'react-native-voice-ts';

// Active state
<MicIcon size={24} color="#007AFF" strokeWidth={2} />

// Muted/Off state
<MicOffIcon size={24} color="#FF3B30" strokeWidth={2} />

SVG Preview:

Active

Muted

Variant 2: Filled Microphone

Bold filled microphone for emphasis and better visibility.

import { MicIconFilled, MicOffIconFilled } from 'react-native-voice-ts';

// Active filled state
<MicIconFilled size={24} color="#007AFF" strokeWidth={2} />

// Muted filled state
<MicOffIconFilled size={24} color="#FF3B30" strokeWidth={2} />

SVG Preview:

Active:  ⎪█⎥  (Solid filled microphone)
Muted:   ⎪/█⎥ (Filled microphone with mute indicator)

Active

Muted

Variant 3: Microphone with Sound Waves

Dynamic microphone with sound wave indicators - perfect for showing active recording.

import { MicIconWave, MicOffIconWave } from 'react-native-voice-ts';

// Active with waves
<MicIconWave size={24} color="#007AFF" strokeWidth={2} />

// Muted with disabled waves
<MicOffIconWave size={24} color="#999" strokeWidth={2} />

SVG Preview:

Active:  ⎟⎪ ⎥⎟  (Microphone with animated sound waves)
Muted:   ⎟⎪/⎥⎟ (Microphone with muted/dashed waves)

Complete Icon Usage Example

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import {
  VoiceMicrophone,
  MicIcon,
  MicOffIcon,
  MicIconFilled,
  MicOffIconFilled,
  MicIconWave,
  MicOffIconWave,
} from 'react-native-voice-ts';

export default function IconVariantsDemo() {
  const [variant, setVariant] = useState<'standard' | 'filled' | 'wave'>(
    'standard',
  );

  const getIcons = () => {
    switch (variant) {
      case 'filled':
        return { ActiveIcon: MicIconFilled, MutedIcon: MicOffIconFilled };
      case 'wave':
        return { ActiveIcon: MicIconWave, MutedIcon: MicOffIconWave };
      default:
        return { ActiveIcon: MicIcon, MutedIcon: MicOffIcon };
    }
  };

  const { ActiveIcon, MutedIcon } = getIcons();

  return (
    <View style={styles.container}>
      {/* Icon Variant Selector */}
      <View style={styles.selector}>
        <TouchableOpacity onPress={() => setVariant('standard')}>
          <Text style={variant === 'standard' && styles.active}>Standard</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setVariant('filled')}>
          <Text style={variant === 'filled' && styles.active}>Filled</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setVariant('wave')}>
          <Text style={variant === 'wave' && styles.active}>Wave</Text>
        </TouchableOpacity>
      </View>

      {/* Voice Input with Selected Icon */}
      <VoiceMicrophone>
        {({ isRecording, start, stop }) => (
          <TouchableOpacity
            style={[styles.micButton, isRecording && styles.recording]}
            onPress={isRecording ? stop : start}
          >
            {isRecording ? (
              <MutedIcon size={32} color="#fff" strokeWidth={2} />
            ) : (
              <ActiveIcon size={32} color="#fff" strokeWidth={2} />
            )}
          </TouchableOpacity>
        )}
      </VoiceMicrophone>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, alignItems: 'center' },
  selector: { flexDirection: 'row', gap: 15, marginBottom: 20 },
  active: { fontWeight: 'bold', color: '#007AFF' },
  micButton: {
    width: 70,
    height: 70,
    borderRadius: 35,
    backgroundColor: '#007AFF',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  recording: { backgroundColor: '#FF3B30' },
});

Icon Props

All icons accept the same props:

Prop	Type	Default	Description
`size`	`number`	`24`	Icon size in pixels
`color`	`string`	`'currentColor'`	Icon color (any valid color)
`strokeWidth`	`number`	`2`	Stroke width for outlines

🎯 Using Hook (For More Control)

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useVoiceRecognition } from 'react-native-voice-ts';

export default function App() {
  const { isRecording, results, start, stop } = useVoiceRecognition({
    onResult: (text) => console.log('You said:', text),
  });

  return (
    <View style={{ padding: 20 }}>
      <Text>{results[0] || 'Press to speak'}</Text>
      <Button
        onPress={isRecording ? stop : start}
        title={isRecording ? 'Stop' : 'Start'}
      />
    </View>
  );
}

🔧 Advanced (Core API)

For users who want full control or are migrating from previous versions:

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import Voice from 'react-native-voice-ts';

export default function App() {
  const [text, setText] = useState('');

  useEffect(() => {
    Voice.onSpeechResults = (e) => setText(e.value[0]);
    return () => Voice.destroy().then(Voice.removeAllListeners);
  }, []);

  return (
    <View style={{ padding: 20 }}>
      <Text>{text}</Text>
      <Button onPress={() => Voice.start('en-US')} title="Start" />
      <Button onPress={() => Voice.stop()} title="Stop" />
    </View>
  );
}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 24,
    marginBottom: 40,
    textAlign: 'center',
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 20,
    borderRadius: 50,
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
  },
  recording: {
    backgroundColor: '#FF3B30',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default App;

📚 API Reference

Components

VoiceMicrophone

A ready-to-use React component that handles all voice recognition logic.

Props:

Prop	Type	Default	Description
`onSpeechResult`	`(text: string) => void`	-	Callback when final speech result is available
`onPartialResult`	`(text: string) => void`	-	Callback when partial (real-time) result is available
`onStart`	`() => void`	-	Callback when recording starts
`onStop`	`() => void`	-	Callback when recording stops
`onError`	`(error: string) => void`	-	Callback when an error occurs
`locale`	`string`	`'en-US'`	Language locale for recognition
`autoStart`	`boolean`	`false`	Auto-start recording on mount
`enablePartialResults`	`boolean`	`true`	Enable real-time partial results
`children`	`function`	-	Render prop function

Children Render Props:

{
  isRecording: boolean; // Whether recording is active
  recognizedText: string; // Final recognized text
  partialText: string; // Real-time partial text
  start: () => Promise<void>; // Start recording
  stop: () => Promise<void>; // Stop recording
  cancel: () => Promise<void>; // Cancel recording
  error: string | null; // Error message if any
}

Example:

<VoiceMicrophone
  locale="en-US"
  onSpeechResult={(text) => console.log(text)}
>
  {({ isRecording, start, stop }) => (
    <Button onPress={isRecording ? stop : start} />
  )}
</VoiceMicrophone>

Hooks

useVoiceRecognition

A custom hook that provides voice recognition functionality.

Options:

Option	Type	Default	Description
`locale`	`string`	`'en-US'`	Language locale
`enablePartialResults`	`boolean`	`true`	Enable partial results
`onResult`	`(text: string) => void`	-	Result callback
`onError`	`(error: string) => void`	-	Error callback

Returns:

{
  isRecording: boolean;
  results: string[];
  partialResults: string[];
  error: string | null;
  start: () => Promise<void>;
  stop: () => Promise<void>;
  cancel: () => Promise<void>;
  reset: () => void;
}

Example:

const { isRecording, results, start, stop } = useVoiceRecognition({
  locale: 'en-US',
  onResult: (text) => setSearchQuery(text),
});

Core API Methods

Core Methods

`start(locale: string, options?: VoiceOptions): Promise<void>`

Start voice recognition.

// Basic usage
await Voice.start('en-US');

// With options (Android)
await Voice.start('en-US', {
  EXTRA_LANGUAGE_MODEL: 'LANGUAGE_MODEL_FREE_FORM',
  EXTRA_MAX_RESULTS: 5,
  EXTRA_PARTIAL_RESULTS: true,
  REQUEST_PERMISSIONS_AUTO: true,
});

Supported Languages: en-US, es-ES, fr-FR, de-DE, it-IT, ja-JP, ko-KR, pt-BR, ru-RU, zh-CN, and 100+ more.

`stop(): Promise<void>`

Stop voice recognition and get final results.

await Voice.stop();

`cancel(): Promise<void>`

Cancel voice recognition without getting results.

await Voice.cancel();

`destroy(): Promise<void>`

Destroy the voice recognition instance and cleanup.

await Voice.destroy();

`removeAllListeners(): void`

Remove all event listeners.

Voice.removeAllListeners();

Status Methods

`isAvailable(): Promise<0 | 1>`

Check if speech recognition is available on the device.

const available = await Voice.isAvailable();
if (available) {
  console.log('Speech recognition is available');
}

`isRecognizing(): Promise<0 | 1>`

Check if currently recognizing (async).

const recognizing = await Voice.isRecognizing();

`recognizing: boolean` (getter)

Check if currently recognizing (synchronous).

if (Voice.recognizing) {
  console.log('Currently recording');
}

New Features (2025)

`requestMicrophonePermission(): Promise<boolean>`

Request microphone permission (Android only).

const granted = await Voice.requestMicrophonePermission();
if (granted) {
  await Voice.start('en-US');
}

`checkMicrophonePermission(): Promise<boolean>`

Check microphone permission status (Android only).

const hasPermission = await Voice.checkMicrophonePermission();

`getRecognitionDuration(): number`

Get the duration of current recognition session in milliseconds.

const duration = Voice.getRecognitionDuration();
console.log(`Recording for ${duration}ms`);

`getLastResults(): string[]`

Get the last recognized results without triggering new recognition.

const lastResults = Voice.getLastResults();
console.log('Last results:', lastResults);

Android-Only Methods

`getSpeechRecognitionServices(): Promise<string[]>`

Get available speech recognition engines on Android.

if (Platform.OS === 'android') {
  const services = await Voice.getSpeechRecognitionServices();
  console.log('Available services:', services);
}

Events

Set up event listeners to handle voice recognition events:

`onSpeechStart`

Triggered when speech recognition starts.

Voice.onSpeechStart = (e: SpeechStartEvent) => {
  console.log('Speech recognition started');
};

`onSpeechRecognized`

Triggered when speech is recognized.

Voice.onSpeechRecognized = (e: SpeechRecognizedEvent) => {
  console.log('Speech recognized');
};

`onSpeechEnd`

Triggered when speech recognition ends.

Voice.onSpeechEnd = (e: SpeechEndEvent) => {
  console.log('Speech recognition ended');
};

`onSpeechError`

Triggered when an error occurs.

Voice.onSpeechError = (e: SpeechErrorEvent) => {
  console.error('Error:', e.error?.message);
};

`onSpeechResults`

Triggered when final results are available.

Voice.onSpeechResults = (e: SpeechResultsEvent) => {
  console.log('Results:', e.value);
  // e.value is an array of strings, sorted by confidence
};

`onSpeechPartialResults`

Triggered when partial results are available (real-time).

Voice.onSpeechPartialResults = (e: SpeechResultsEvent) => {
  console.log('Partial results:', e.value);
};

`onSpeechVolumeChanged`

Triggered when the audio volume changes.

Voice.onSpeechVolumeChanged = (e: SpeechVolumeChangeEvent) => {
  console.log('Volume:', e.value); // 0-10
};

Types

import type {
  SpeechEvents,
  SpeechStartEvent,
  SpeechEndEvent,
  SpeechResultsEvent,
  SpeechErrorEvent,
  SpeechRecognizedEvent,
  SpeechVolumeChangeEvent,
  VoiceOptions,
  RecognitionStats,
  PermissionResult,
  Language,
} from 'react-native-voice-ts';

💡 More Examples

Example 1: Simple Voice Search

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { VoiceMicrophone } from 'react-native-voice-ts';

function VoiceSearch() {
  const [query, setQuery] = useState('');

  return (
    <View>
      <TextInput
        value={query}
        onChangeText={setQuery}
        placeholder="Search..."
      />
      <VoiceMicrophone onSpeechResult={setQuery}>
        {({ isRecording, start, stop }) => (
          <Button onPress={isRecording ? stop : start} title="🎤" />
        )}
      </VoiceMicrophone>
    </View>
  );
}

Example 2: Real-time Transcription

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { VoiceMicrophone } from 'react-native-voice-ts';

function LiveTranscription() {
  const [text, setText] = useState('');

  return (
    <View>
      <VoiceMicrophone
        enablePartialResults
        onSpeechResult={setText}
        onPartialResult={(live) => console.log('Live:', live)}
      >
        {({ isRecording, partialText, start, stop }) => (
          <>
            <Text>{isRecording ? partialText : text}</Text>
            <Button
              onPress={isRecording ? stop : start}
              title={isRecording ? 'Stop' : 'Start'}
            />
          </>
        )}
      </VoiceMicrophone>
    </View>
  );
}

Example 3: Multi-Language

import React, { useState } from 'react';
import { View, Text, Button, Picker } from 'react-native';
import { VoiceMicrophone } from 'react-native-voice-ts';

function MultiLanguage() {
  const [lang, setLang] = useState('en-US');
  const [text, setText] = useState('');

  return (
    <View>
      <Picker selectedValue={lang} onValueChange={setLang}>
        <Picker.Item label="English" value="en-US" />
        <Picker.Item label="Spanish" value="es-ES" />
        <Picker.Item label="French" value="fr-FR" />
      </Picker>

      <Text>{text}</Text>

      <VoiceMicrophone locale={lang} onSpeechResult={setText}>
        {({ isRecording, start, stop }) => (
          <Button onPress={isRecording ? stop : start} title="Speak" />
        )}
      </VoiceMicrophone>
    </View>
  );
}

Example 4: Voice Form

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { VoiceMicrophone } from 'react-native-voice-ts';

function VoiceForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [active, setActive] = useState(null);

  return (
    <View>
      <TextInput value={name} onChangeText={setName} placeholder="Name" />
      <VoiceMicrophone onSpeechResult={setName}>
        {({ isRecording, start, stop }) => (
          <Button onPress={isRecording ? stop : start} title="🎤" />
        )}
      </VoiceMicrophone>

      <TextInput value={email} onChangeText={setEmail} placeholder="Email" />
      <VoiceMicrophone onSpeechResult={setEmail}>
        {({ isRecording, start, stop }) => (
          <Button onPress={isRecording ? stop : start} title="🎤" />
        )}
      </VoiceMicrophone>
    </View>
  );
}

Example 5: Using the Hook

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useVoiceRecognition } from 'react-native-voice-ts';

function HookExample() {
  const { isRecording, results, partialResults, start, stop, reset } =
    useVoiceRecognition({
      locale: 'en-US',
      onResult: (text) => console.log(text),
    });

  return (
    <View>
      <Text>{isRecording ? partialResults[0] : results[0]}</Text>
      <Button
        onPress={isRecording ? stop : start}
        title={isRecording ? 'Stop' : 'Start'}
      />
      <Button onPress={reset} title="Clear" />
    </View>
  );
}

More examples in the repo:

VoiceSearchExample.tsx - Full search bar implementation
VoiceHookExample.tsx - Hook usage with advanced features
COMPONENT_USAGE.md - Comprehensive component guide

💡 More Examples

Example 1: Simple Voice Search

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
import { VoiceMicrophone } from 'react-native-voice-ts';

const MultiLanguageVoice = () => {
  const [selectedLanguage, setSelectedLanguage] = useState('en-US');
  const [text, setText] = useState('');

  const languages = [
    { code: 'en-US', name: 'English (US)', flag: '🇺🇸' },
    { code: 'es-ES', name: 'Spanish', flag: '🇪🇸' },
    { code: 'fr-FR', name: 'French', flag: '🇫🇷' },
    { code: 'de-DE', name: 'German', flag: '🇩🇪' },
    { code: 'zh-CN', name: 'Chinese', flag: '🇨🇳' },
    { code: 'ja-JP', name: 'Japanese', flag: '🇯🇵' },
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Multi-language Voice Input</Text>

      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.langScroll}>
        {languages.map((lang) => (
          <TouchableOpacity
            key={lang.code}
            style={[
              styles.langButton,
              selectedLanguage === lang.code && styles.selectedLang,
            ]}
            onPress={() => setSelectedLanguage(lang.code)}
          >
            <Text style={styles.flag}>{lang.flag}</Text>
            <Text style={styles.langName}>{lang.name}</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      <View style={styles.resultContainer}>
        <Text style={styles.resultText}>{text || 'Select language and speak...'}</Text>
      </View>

      <VoiceMicrophone
        locale={selectedLanguage}
        onSpeechResult={setText}
      >
        {({ isRecording, start, stop }) => (
          <TouchableOpacity
            style={[styles.micButton, isRecording && styles.recording]}
            onPress={isRecording ? stop : start}
          >
            <Text style={styles.micIcon}>{isRecording ? '⏹' : '🎤'}</Text>
            <Text style={styles.micText}>
              {isRecording ? 'Stop' : 'Start Recording'}
            </Text>
          </TouchableOpacity>
        )}
      </VoiceMicrophone>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  langScroll: {
    marginBottom: 20,
  },
  langButton: {
    padding: 10,
    marginRight: 10,
    borderRadius: 10,
    backgroundColor: '#f0f0f0',
    alignItems: 'center',
    minWidth: 100,
  },
  selectedLang: {
    backgroundColor: '#007AFF',
  },
  flag: {
    fontSize: 30,
    marginBottom: 5,
  },
  langName: {
    fontSize: 12,
  },
  resultContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f9f9f9',
    borderRadius: 10,
    padding: 20,
    marginBottom: 20,
  },
  resultText: {
    fontSize: 18,
    textAlign: 'center',
  },
  micButton: {
    backgroundColor: '#007AFF',
    padding: 20,
    borderRadius: 50,
    alignItems: 'center',
  },
  recording: {
    backgroundColor: '#FF3B30',
  },
  micIcon: {
    fontSize: 40,
  },
  micText: {
    color: '#fff',
    marginTop: 10,
    fontSize: 16,
    fontWeight: 'bold',
  },
});

Example 4: Using Custom Hook with Form Input

import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { useVoiceRecognition } from 'react-native-voice-ts';

const VoiceForm = () => {
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');
  const [activeField, setActiveField] = useState<'name' | 'message' | null>(null);

  const { isRecording, results, start, stop } = useVoiceRecognition({
    locale: 'en-US',
    onResult: (text) => {
      if (activeField === 'name') {
        setName(text);
      } else if (activeField === 'message') {
        setMessage(text);
      }
      setActiveField(null);
    },
  });

  const startRecordingForField = (field: 'name' | 'message') => {
    setActiveField(field);
    start();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Voice Form</Text>

      <View style={styles.inputGroup}>
        <Text style={styles.label}>Name:</Text>
        <View style={styles.inputRow}>
          <TextInput
            style={styles.input}
            value={name}
            onChangeText={setName}
            placeholder="Your name"
          />
          <TouchableOpacity
            style={[
              styles.micBtn,
              isRecording && activeField === 'name' && styles.recording,
            ]}
            onPress={() =>
              isRecording ? stop() : startRecordingForField('name')
            }
          >
            <Text>🎤</Text>
          </TouchableOpacity>
        </View>
      </View>

      <View style={styles.inputGroup}>
        <Text style={styles.label}>Message:</Text>
        <View style={styles.inputRow}>
          <TextInput
            style={[styles.input, styles.textArea]}
            value={message}
            onChangeText={setMessage}
            placeholder="Your message"
            multiline
          />
          <TouchableOpacity
            style={[
              styles.micBtn,
              isRecording && activeField === 'message' && styles.recording,
            ]}
            onPress={() =>
              isRecording ? stop() : startRecordingForField('message')
            }
          >
            <Text>🎤</Text>
          </TouchableOpacity>
        </View>
      </View>

      <TouchableOpacity
        style={styles.submitButton}
        onPress={() => console.log({ name, message })}
      >
        <Text style={styles.submitText}>Submit</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    textAlign: 'center',
  },
  inputGroup: {
    marginBottom: 20,
  },
  label: {
    fontSize: 16,
    marginBottom: 8,
    fontWeight: '600',
  },
  inputRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 12,
    borderRadius: 8,
    marginRight: 10,
  },
  textArea: {
    height: 100,
    textAlignVertical: 'top',
  },
  micBtn: {
    width: 45,
    height: 45,
    borderRadius: 22.5,
    backgroundColor: '#007AFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  recording: {
    backgroundColor: '#FF3B30',
  },
  submitButton: {
    backgroundColor: '#34C759',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 20,
  },
  submitText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

Example 5: Voice Commands (Advanced)

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import { VoiceMicrophone } from 'react-native-voice-ts';
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import { VoiceMicrophone } from 'react-native-voice-ts';

const VoiceCommands = () => {
  const [command, setCommand] = useState('');
  const [history, setHistory] = useState<string[]>([]);

  useEffect(() => {
    if (command) {
      handleCommand(command);
    }
  }, [command]);

  const handleCommand = (text: string) => {
    const lowerText = text.toLowerCase();

    if (lowerText.includes('hello') || lowerText.includes('hi')) {
      addToHistory('👋 Hello there!');
    } else if (lowerText.includes('time')) {
      addToHistory(`🕒 Current time: ${new Date().toLocaleTimeString()}`);
    } else if (lowerText.includes('date')) {
      addToHistory(`📅 Today's date: ${new Date().toLocaleDateString()}`);
    } else if (lowerText.includes('clear')) {
      setHistory([]);
    } else {
      addToHistory(`❓ Unknown command: "${text}"`);
    }
  };

  const addToHistory = (message: string) => {
    setHistory((prev) => [message, ...prev]);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Voice Commands</Text>
      <Text style={styles.subtitle}>
        Try: "Hello", "What time is it?", "What's the date?", "Clear"
      </Text>

      <VoiceMicrophone
        onSpeechResult={setCommand}
        autoStart={false}
      >
        {({ isRecording, recognizedText, start, stop }) => (
          <View style={styles.controlPanel}>
            <TouchableOpacity
              style={[styles.button, isRecording && styles.recording]}
              onPress={isRecording ? stop : start}
            >
              <Text style={styles.buttonText}>
                {isRecording ? '🔴 Listening...' : '🎤 Speak Command'}
              </Text>
            </TouchableOpacity>
            {recognizedText && (
              <Text style={styles.recognizedText}>"{recognizedText}"</Text>
            )}
          </View>
        )}
      </VoiceMicrophone>

      <FlatList
        data={history}
        style={styles.list}
        keyExtractor={(_, index) => index.toString()}
        renderItem={({ item }) => (
          <View style={styles.historyItem}>
            <Text style={styles.historyText}>{item}</Text>
          </View>
        )}
        ListEmptyComponent={
          <Text style={styles.emptyText}>No commands yet...</Text>
        }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
    marginBottom: 20,
  },
  controlPanel: {
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
  },
  recording: {
    backgroundColor: '#FF3B30',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  recognizedText: {
    textAlign: 'center',
    marginTop: 10,
    fontSize: 14,
    color: '#666',
    fontStyle: 'italic',
  },
  list: {
    flex: 1,
  },
  historyItem: {
    backgroundColor: '#f0f0f0',
    padding: 15,
    borderRadius: 8,
    marginBottom: 10,
  },
  historyText: {
    fontSize: 16,
  },
  emptyText: {
    textAlign: 'center',
    color: '#999',
    marginTop: 50,
    fontSize: 16,
  },
});

More examples in the repo:

VoiceSearchExample.tsx - Full search bar implementation
VoiceHookExample.tsx - Hook usage with advanced features
COMPONENT_USAGE.md - Comprehensive component guide

📦 Component & Hook Usage

Quick Links

Complete Component Usage Guide - Comprehensive guide with real-world examples
VoiceSearchExample - Working search bar example
VoiceHookExample - Working hook usage example

Component Benefits

✅ No boilerplate - Works out of the box
✅ Automatic cleanup - Handles all event listeners
✅ Permission handling - Built-in permission checks
✅ Type-safe - Full TypeScript support
✅ Customizable - Use your own UI with render props

🔄 Backward Compatibility

This library is fully backward compatible! If you're upgrading from a previous version or the original @react-native-voice/voice, all your existing code will continue to work without any changes.

Core API (Always Supported)

The core Voice API remains unchanged and fully supported:

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

// All these work exactly as before
Voice.start('en-US');
Voice.stop();
Voice.cancel();
Voice.destroy();
Voice.isAvailable();
Voice.onSpeechResults = (e) => console.log(e.value);

What's New in v1.0+

The new features are additions that don't break existing code:

// ✅ NEW: Component (optional to use)
import { VoiceMicrophone } from 'react-native-voice-ts';

// ✅ NEW: Hook (optional to use)
import { useVoiceRecognition } from 'react-native-voice-ts';

// ✅ NEW: Icons (optional to use)
import { MicIcon, MicOffIcon } from 'react-native-voice-ts';

// ✅ Still works: Original API
import Voice from 'react-native-voice-ts';

Migration Guide

No migration needed! But if you want to use the new features:

// Before (still works)
import Voice from 'react-native-voice-ts';
Voice.onSpeechResults = (e) => setText(e.value[0]);
Voice.start('en-US');

// After (optional upgrade)
import { useVoiceRecognition } from 'react-native-voice-ts';
const { isRecording, results, start } = useVoiceRecognition({
  onResult: setText,
});

⚠️ Common Issues & Solutions

Issue: No speech detected

Solution: Check microphone permissions and ensure the device is not muted.

Issue: Error on iOS Simulator

Solution: Speech recognition doesn't work on iOS Simulator. Use a real device.

Issue: Partial results not working

Solution: Ensure EXTRA_PARTIAL_RESULTS: true is set on Android.

Issue: App crashes on Android

Solution: Make sure RECORD_AUDIO permission is declared in AndroidManifest.xml.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Development Setup

# Clone the repository
git clone https://github.com/noorjsdivs/react-native-voice-ts.git
cd react-native-voice-ts

# Install dependencies
yarn install

# Build
yarn build

# Run example
cd example
yarn install
yarn ios # or yarn android

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Noor Mohammad

GitHub: @noorjsdivs
Email: noor.jsdivs@gmail.com

🙏 Acknowledgments

Thanks to all contributors who have helped improve this library
Inspired by the need for better voice recognition in React Native apps
Built with ❤️ for the React Native community

📊 Stats

⭐ Star this repo if you find it helpful! ⭐

Made with ❤️ by Noor Mohammad

Name		Name	Last commit message	Last commit date
Latest commit History 12 Commits
android		android
example		example
ios		ios
plugin		plugin
scripts		scripts
src		src
.eslintignore		.eslintignore
.gitignore		.gitignore
.npmignore		.npmignore
.nvmrc		.nvmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.prettierrc.js		.prettierrc.js
.releaserc		.releaserc
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
app.plugin.js		app.plugin.js
eslint.config.js		eslint.config.js
package.json		package.json
react-native-voice-ts.podspec		react-native-voice-ts.podspec
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Folders and files

Latest commit

History

Repository files navigation

🎤 React Native Voice (TypeScript)

Advanced Speech-to-Text Library for React Native

✨ Features

Core Capabilities

Enhanced Features (2025 Update)

Platform Support

📦 Installation

Using npm

Using yarn

Using pnpm

iOS Setup

Permissions

iOS (Info.plist)

Android (AndroidManifest.xml)

📱 Compatibility

🚀 Quick Start

Three Ways to Use

⚡ Super Simple - Just Import and Use!

🎨 Built-in Icon Variants

Variant 1: Standard Outline (Default)

Variant 2: Filled Microphone

Variant 3: Microphone with Sound Waves

Complete Icon Usage Example

Icon Props

🎯 Using Hook (For More Control)

🔧 Advanced (Core API)

📚 API Reference

Components

VoiceMicrophone

Hooks

useVoiceRecognition

Core API Methods

Core Methods

start(locale: string, options?: VoiceOptions): Promise<void>

stop(): Promise<void>

cancel(): Promise<void>

destroy(): Promise<void>

removeAllListeners(): void

Status Methods

isAvailable(): Promise<0 | 1>

isRecognizing(): Promise<0 | 1>

recognizing: boolean (getter)

New Features (2025)

requestMicrophonePermission(): Promise<boolean>

checkMicrophonePermission(): Promise<boolean>

getRecognitionDuration(): number

getLastResults(): string[]

Android-Only Methods

getSpeechRecognitionServices(): Promise<string[]>

Events

onSpeechStart

onSpeechRecognized

onSpeechEnd

onSpeechError

onSpeechResults

onSpeechPartialResults

onSpeechVolumeChanged

Types

💡 More Examples

Example 1: Simple Voice Search

Example 2: Real-time Transcription

Example 3: Multi-Language

Example 4: Voice Form

Example 5: Using the Hook

💡 More Examples

Example 1: Simple Voice Search

Example 4: Using Custom Hook with Form Input

Example 5: Voice Commands (Advanced)

📦 Component & Hook Usage

Quick Links

Component Benefits

🔄 Backward Compatibility

Core API (Always Supported)

What's New in v1.0+

Migration Guide

⚠️ Common Issues & Solutions

`start(locale: string, options?: VoiceOptions): Promise<void>`

`stop(): Promise<void>`

`cancel(): Promise<void>`

`destroy(): Promise<void>`

`removeAllListeners(): void`

`isAvailable(): Promise<0 | 1>`

`isRecognizing(): Promise<0 | 1>`

`recognizing: boolean` (getter)

`requestMicrophonePermission(): Promise<boolean>`

`checkMicrophonePermission(): Promise<boolean>`

`getRecognitionDuration(): number`

`getLastResults(): string[]`

`getSpeechRecognitionServices(): Promise<string[]>`

`onSpeechStart`

`onSpeechRecognized`

`onSpeechEnd`

`onSpeechError`

`onSpeechResults`

`onSpeechPartialResults`

`onSpeechVolumeChanged`

Packages