Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mhpdev/react-native-speech) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-speech
A high-performance text-to-speech library built for bare React Native and Expo, compatible with Android and iOS. It enables seamless speech management and provides events for detailed synthesis management.
Only New Architecture: This library is currently compatible with the new architecture. If you're using React Native 0.76 or higher, it is already enabled. However, if your React Native version is between 0.68 and 0.75, you need to enable it first. Click here if you need help enabling the new architecture
Preview
Features
π High-performance library created with Turbo Modules for both Android and iOS
ποΈ Provides essential and useful methods for full control over synthesis
π Support for
pauseandresume, along withonResumeandonPauseevents, for Android too. (If you have prior experience using text-to-speech, particularly on Android, note that unlike iOS, it doesnβt natively support these features, and this library handles them itself)π‘ Offers useful events for more precise control over synthesis
β Completely type-safe and written in TypeScript (on the React Native side)
Installation
Bare React Native
Install the package using either npm or Yarn:
npm install @mhpdev/react-native-speechOr with Yarn:
yarn add @mhpdev/react-native-speechExpo
For Expo projects, follow these steps:
Install the package:
npx expo install @mhpdev/react-native-speechSince it is not supported on Expo Go, run:
npx expo prebuild
Usage
To learn how to use the library, check out the usage section.
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',
},
});To become more familiar with the usage of the library, check out the example project.
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT