Creating a Voice-controlled App with React Native and Speech Recognition Api

by

Creating a voice-controlled app can significantly enhance user experience by enabling hands-free interaction. React Native, a popular framework for building mobile applications, combined with the Speech Recognition API, provides a powerful way to implement voice commands. In this article, we will explore the steps to develop a simple voice-controlled app using these technologies.

Prerequisites

  • Basic knowledge of React Native
  • Node.js and npm installed on your machine
  • React Native development environment set up (Android Studio or Xcode)
  • Speech Recognition API access (e.g., react-native-voice library)

Setting Up the Project

Start by creating a new React Native project:

npx react-native init VoiceControlledApp

Navigate into your project directory:

cd VoiceControlledApp

Install the react-native-voice library:

npm install react-native-voice

Link the library (for React Native versions below 0.60):

npx react-native link react-native-voice

Implementing Voice Recognition

Import the library and set up voice recognition handlers in your main component:

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

const App = () => {
  const [recognizedText, setRecognizedText] = useState('');
  const [isListening, setIsListening] = useState(false);

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

  const onSpeechResults = (e) => {
    if (e.value && e.value.length > 0) {
      setRecognizedText(e.value[0]);
    }
  };

  const startListening = () => {
    setRecognizedText('');
    Voice.start('en-US');
    setIsListening(true);
  };

  const stopListening = () => {
    Voice.stop();
    setIsListening(false);
  };

  return (
    
      Voice Recognition Demo
      Recognized Text: {recognizedText}

Handling Voice Commands

Once you have the recognized speech, you can implement command handling logic. For example, to perform actions based on specific commands:

const handleCommands = () => {
  const command = recognizedText.toLowerCase();
  if (command.includes('open settings')) {
    // Navigate to settings screen
  } else if (command.includes('go back')) {
    // Go back to previous screen
  } else {
    // Handle other commands
  }
};

Call this function after each recognition to trigger actions:

useEffect(() => {
  if (recognizedText) {
    handleCommands();
  }
}, [recognizedText]);

Conclusion

Integrating speech recognition into a React Native app allows for innovative voice-controlled features. By using libraries like react-native-voice, developers can quickly add voice command capabilities. Remember to test thoroughly on real devices, as emulators may not support speech recognition properly. With practice, you can create intuitive, hands-free mobile applications that enhance user engagement.