react-native-speak

A wonderful TTS (text-to-speech) library for React Native.

TOC

• Installation
• Linking
• Usage
• API

Installation

Using npm:

npm install --save react-native-speak

or using yarn:

yarn add react-native-speak

Linking

Automatic

react-native link react-native-speak

For iOS users using Pods: You need to run pod install after running the above link command inside your ios folder.

Manual

Add the following line to your build targets in your Podfile

pod 'RNSpeak', :path => '../node_modules/react-native-speak'

Then run pod install

In XCode, in the project navigator:

• Right click Libraries
• Add Files to [your project's name]
• Go to node_modules/react-native-speak
• Add the .xcodeproj file

In XCode, in the project navigator, select your project.

• Add the libRNSpeak.a from the RNSpeak project to your project's Build Phases ➜ Link Binary With Libraries
• Click .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure All is toggled on (instead of Basic).
• Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React
• Mark both as recursive (should be OK by default).

Run your project (Cmd+R)

• optional in android/build.gradle:

...
  ext {
    // dependency versions
    googlePlayServicesVersion = "<Your play services version>" // default: "+"
    compileSdkVersion = "<Your compile SDK version>" // default: 23
    buildToolsVersion = "<Your build tools version>" // default: "25.0.2"
    targetSdkVersion = "<Your target SDK version>" // default: 22
  }
...

• in android/app/build.gradle:

dependencies {
    ...
    implementation "com.facebook.react:react-native:+"  // From node_modules
+   implementation project(':react-native-speak')
}

• in android/settings.gradle:

...
include ':app'
+ include ':react-native-speak'
+ project(':react-native-speak').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-speak/android')

• in MainApplication.java:

+ import com.truckmap.RNSpeak.RNSpeak;

  public class MainApplication extends Application implements ReactApplication {
    //......

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
+         new RNSpeak(),
          new MainReactPackage()
      );
    }

    ......
  }

NOTE: If you faced with this error: Could not resolve all files for configuration ':react-native-speak:debugCompileClasspath'., in build.gradle put google() in the first line (according to https://stackoverflow.com/a/50748249)

• in android/build.gradle:

allprojects {
    repositories {
+       google()
        ...
    }
}

Usage

import Speech from 'react-native-speak';

API

| Method | Return Type | iOS | Android | | ----------------------------------------------------------------- | ------------------- | :--: | :-----: | | speak() | Promise<any> | ✅ | ✅ |

speak()

speak(text: string)

Speaks a phrase.

Examples

Speech.speak("hello world!"); // speaks the given phrase.

Events

onSpeechStart

Fired when speech has started.

Examples

import { NativeEventEmitter, NativeModules } from 'react-native'
const speechEventEmitter = new NativeEventEmitter(NativeModules.RNSpeak)

speechEventEmitter.addListener('onSpeechStart', () => {
  // callback when finished
});

onSpeechEnd

Fired when speech has ended.

Examples

import { NativeEventEmitter, NativeModules } from 'react-native'
const speechEventEmitter = new NativeEventEmitter(NativeModules.RNSpeak)

speechEventEmitter.addListener('onSpeechEnd', () => {
  // callback when finished
});

onSpeechError

Fired when an error is found in the speech pipeline. (TBD)

Examples

import { NativeEventEmitter, NativeModules } from 'react-native'
const speechEventEmitter = new NativeEventEmitter(NativeModules.RNSpeak)

speechEventEmitter.addListener('onSpeechError', error => {
  console.error(error);
});

Release Notes

See the CHANGELOG.md.

Contributing

Please see the contributing guide.