Voice Interfaces in React: Speaking vs. Listening

Building voice-enabled applications requires solving two distinct problems: making the app speak (Text-to-Speech) and making the app listen (Speech-to-Text). react-native-tts and react-speech-recognition are the standard solutions for these tasks in the React ecosystem, but they operate on completely different platforms and solve inverse problems. Understanding their specific constraints is vital for architectural decisions.

📱 Platform Reality: Native Mobile vs. Web Browser

The most critical distinction is where these libraries run. You cannot mix them.

react-native-tts is a bridge to native code. It wraps the iOS AVSpeechSynthesizer and Android TextToSpeech classes. It only works inside a compiled React Native app (.ipa or .apk). It cannot run in a browser because browsers do not have access to these specific native mobile modules.

// react-native-tts: Works ONLY in React Native (iOS/Android)
import Tts from 'react-native-tts';

// Initialize the native module
Tts.setDefaultRate(0.5);
Tts.setDefaultPitch(1.0);

// Speak text using the device's native engine
Tts.speak('Hello, this is your mobile app speaking.');

react-speech-recognition is a wrapper around the browser's window.SpeechRecognition or window.webkitSpeechRecognition API. It only works in web browsers (Chrome, Edge, Safari). It will crash or fail immediately if imported into a React Native project because the Web Speech API does not exist in the JavaScriptCore or Hermes engines used by mobile apps.

// react-speech-recognition: Works ONLY in Web Browsers
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

const Dictation = () => {
  const { transcript, resetTranscript, browserSupportsSpeechRecognition } = useSpeechRecognition();

  if (!browserSupportsSpeechRecognition) {
    return <span>Browser doesn't support speech recognition.</span>;
  }

  return (
    <div>
      <p>{transcript}</p>
      <button onClick={SpeechRecognition.startListening}>Start Listening</button>
      <button onClick={resetTranscript}>Reset</button>
    </div>
  );
};

🗣️ Output vs. Input: The Direction of Data

These libraries handle data flow in opposite directions. One generates audio from text, while the other generates text from audio.

react-native-tts takes a string and produces sound. You control how it sounds (pitch, rate, voice gender) before it plays. This is useful for confirming actions or reading content.

// react-native-tts: Configuring output parameters
import Tts from 'react-native-tts';

const speakWithSettings = async () => {
  // Set specific voice characteristics
  await Tts.setDefaultRate(0.6); // Slower speech
  await Tts.setDefaultPitch(1.2); // Higher pitch
  
  // Get available voices and select one (e.g., female voice)
  const voices = await Tts.getInitOptions();
  // Note: Actual voice selection depends on OS capabilities
  
  Tts.speak('Transaction complete. Your balance is updated.');
};

react-speech-recognition takes sound and produces a string. You control when it listens and how it handles interim results (words appearing as you speak vs. after you stop).

// react-speech-recognition: Handling interim vs. final results
import { useSpeechRecognition } from 'react-speech-recognition';

const VoiceSearch = () => {
  const { 
    transcript, 
    listening, 
    resetTranscript, 
    browserSupportsSpeechRecognition 
  } = useSpeechRecognition();

  if (!browserSupportsSpeechRecognition) return null;

  return (
    <div>
      {/* 'transcript' updates in real-time as user speaks */}
      <input value={transcript} readOnly placeholder="Speak now..." />
      {listening ? <span>🔴 Listening</span> : <span>⚪ Idle</span>}
    </div>
  );
};

⚙️ Configuration and Lifecycle Management

Managing the lifecycle of voice engines differs significantly between the native mobile world and the web.

react-native-tts requires explicit initialization checks. Since it relies on hardware resources, you must ensure the engine is ready before speaking, especially on Android where initialization can be asynchronous.

// react-native-tts: Handling initialization state
import Tts, { TtsError } from 'react-native-tts';
import { useEffect, useState } from 'react';

const VoiceComponent = () => {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    Tts.getInitOptions().then(() => {
      setReady(true);
    }).catch((error: TtsError) => {
      console.error('TTS Init Failed', error);
    });
  }, []);

  const handlePress = () => {
    if (ready) {
      Tts.speak('System ready.');
    }
  };

  return <Button onPress={handlePress} title="Speak" />;
};

react-speech-recognition manages listening states internally via hooks but requires careful handling of permissions. Browsers will block audio capture unless the user explicitly grants permission, often requiring a user gesture (click) to start.

// react-speech-recognition: Managing listening states
import SpeechRecognition from 'react-speech-recognition';

const startListeningSecurely = () => {
  // Must be triggered by a user click to avoid browser blocking
  SpeechRecognition.startListening({ continuous: true, language: 'en-US' });
};

const stopListening = () => {
  SpeechRecognition.stopListening();
};

// Check if the browser supports the feature before rendering UI
const isSupported = SpeechRecognition.browserSupportsSpeechRecognition();

🌐 Similarities: Shared Challenges in Voice UX

Despite running on different platforms, both libraries share common architectural concerns regarding user experience and error handling.

1. 🔊 Permission and Hardware Dependencies

Both libraries depend on hardware (microphone or speaker) and OS-level permissions. If the hardware is busy or denied, both will fail silently or throw errors that must be caught.

// react-native-tts: Error handling for busy hardware
Tts.speak('Hello')
  .then(() => console.log('Success'))
  .catch(err => console.error('Speaker busy or denied', err));

// react-speech-recognition: Checking for mic access
if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
  console.error('Microphone access not supported or denied');
}

2. 🛑 Canceling Operations

Users often change their minds. Both libraries provide methods to stop ongoing processes immediately to prevent awkward overlaps or continued listening.

// react-native-tts: Stop speaking immediately
Tts.stop(); // Halts current speech queue

// react-speech-recognition: Stop listening immediately
SpeechRecognition.stopListening(); // Ends transcription session

3. 🌍 Language Support

Both rely on the underlying operating system or browser for language packs. You cannot force a language if the device doesn't support it.

// react-native-tts: Setting language
Tts.setDefaultLanguage('fr-FR'); // Requires French voice pack on device

// react-speech-recognition: Setting language
SpeechRecognition.startListening({ language: 'fr-FR' }); // Requires browser support

📊 Summary: Key Differences

💡 The Big Picture

Choosing between these two isn't about feature comparison; it's about platform strategy.

If you are building a mobile app and need the device to read alerts, guide users, or assist visually impaired users, react-native-tts is your only option. It provides deep integration with the phone's native voice engine, allowing for offline usage and system-level voice selection.

If you are building a website and want users to dictate text, search by voice, or control the UI with commands, react-speech-recognition is the standard tool. It abstracts the complexities of the Web Speech API into simple React hooks, making it easy to add "listen" buttons to your forms.

Final Thought: In a full-stack ecosystem, you might use both—but never in the same codebase. Use react-speech-recognition for your web dashboard and react-native-tts for your companion mobile app. Never attempt to polyfill one for the other; the hardware and security models are too different.