React Native Speech: Text from You, Speech from It!

Let’s start with this: React Native is a fantastic framework for developing cross-platform applications, and it has evolved considerably over the years. One of the most significant changes is the new architecture. The React Native core team has been rewriting the entire framework’s architecture over the past three years. The first version to officially support the new architecture was 0.68, and by version 0.76, it became the default.

But why mention this first? With significant React Native updates, third-party libraries need to remain compatible while also leveraging the latest framework capabilities to build modern, high-performance utilities for the community.

Let’s skip the introduction and get to the main point. Today, I want to announce a new, high-performance, feature-rich library that brings text-to-speech capabilities to both Android and iOS.

React Native Speech Repository: https://github.com/mhpdev-com/react-native-speech

Preview

Android	iOS

What is React Native Speech?

The library is a high-performance TTS solution built for bare React Native and Expo, and it is compatible with both Android and iOS (requires the new architecture). It enables seamless speech management and provides events for detailed synthesis control.

In designing the library aimed to both Android and iOS have the same functionality, such as pause and resume features. (If you have prior experience with text-to-speech, particularly on Android, you’ll notice that unlike iOS, it doesn’t natively support these features, this library handles them for you)

Quick Access

To learn how to use the library and explore all its capabilities, check out the usage documentation. Below is quick access to it:

• Installation
  • Bare React Native
  • Expo
• API Overview
  • Getting Available Voices
  • Initializing Global Speech Options
  • Resetting Speech Options
  • Speaking Text
  • Speaking Text with Custom Options
  • Controlling Speech
  • Stop Speech
  • Pause Speech
  • Resume Speech
  • Check if Speaking
  • Event Callbacks
  • onError
  • onStart
  • onFinish
  • onPause
  • onResume
  • onStopped
  • onProgress
• Example Application

Installation

Bare React Native

Install the package using either npm or Yarn:

npm install @mhpdev/react-native-speech

Or with Yarn:

yarn add @mhpdev/react-native-speech

Expo

For Expo projects, follow these steps:

1 - Install the package:

npx expo install @mhpdev/react-native-speech

2 - Since it is not supported on Expo Go, run:

npx expo prebuild

Quick Start

import React from 'react';
import Speech from '@mhpdev/react-native-speech';
import {SafeAreaView, StyleSheet, Text, TouchableOpacity} from 'react-native';

const App: React.FC = () => {
  const onSpeakPress = () => {
    Speech.speak('Hello World!');
  };

  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={onSpeakPress}>
        <Text style={styles.buttonText}>Speak</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    padding: 12.5,
    borderRadius: 5,
    backgroundColor: 'skyblue',
  },
  buttonText: {
    fontSize: 22,
    fontWeight: '600',
  },
});

React Native Speech Repository: https://github.com/mhpdev-com/react-native-speech

I hope this article has been helpful and that the library assists you in your project.

Good Luck!