Text-to-Speech (TTS) in React Native: A Comprehensive Guide for Android and iOS

Text-to-Speech (TTS) is a powerful technology that allows your applications to convert written text into spoken words. React Native, a popular cross-platform framework for building mobile apps, can leverage TTS to create more engaging and accessible user experiences. In this blog post, we will walk you through the process of implementing Text-to-Speech in a React Native application for both Android and iOS platforms.

Prerequisites

1. Node.js installed on your machine
2. React Native CLI installed globally
3. Android Studio and Xcode installed (for Android and iOS platforms respectively)
4. A basic understanding of React Native

Let’s get started!

Step 1: Create a new React Native project

First, open your terminal or command prompt and run the following command to create a new React Native project:

npx react-native init TTSApp

Step 2: Install react-native-tts library

We will use the react-native-tts library to add Text-to-Speech functionality to our application. Install the library using the following command:

cd TTSApp
npm install react-native-tts

Step 3: Link the library with your project

For React Native 0.59 and below, use the command below to link the library:

react-native link react-native-tts

For React Native 0.60 and above, the library should be auto-linked.

Step 4: Configure the library for Android

To configure the library for Android, open the android/app/src/main/AndroidManifest.xml file and add the following line inside the <application> tag:

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

Step 5: Configure the library for iOS

For iOS, navigate to the ios folder of your project in the terminal and run the following command to install the required CocoaPods:

cd ios && pod install

Step 6: Implement Text-to-Speech in your application

Now we will create a simple interface to input text and a button to trigger the TTS. Open the App.js file and replace its content with the following code:

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import Tts from 'react-native-tts';

const App = () => {
  const [text, setText] = useState('');

  const speak = () => {
    Tts.speak(text);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Text-to-Speech in React Native</Text>
      <TextInput
        style={styles.input}
        onChangeText={setText}
        value={text}
        placeholder="Enter text to be spoken"
      />
      <Button title="Speak" onPress={speak} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
});

export default App;

Step 7: Run the application

Now you’re ready to test the Text-to-Speech functionality in your React Native app. Run the application on an Android or iOS emulator or a real device using the following commands:

For Android:

npx react-native run-android

For iOS:

npx react-native run-ios

Once the application is running, enter some text in the input field and press the “Speak” button. You should hear the entered text being spoken by the device.

Conclusion

In this blog post, we have covered the process of implementing Text-to-Speech in a React Native application for both Android and iOS platforms. By following these steps, you can easily add TTS functionality to your own projects, making your applications more engaging and accessible for users. The react-native-tts library offers additional features like adjusting speech rate, pitch, and language. Explore the library documentation to learn more about these features and take your app’s TTS capabilities to the next level.