Quick start
Speak your first utterance with @mhpdev/react-native-speech.
Import the default Speech class and call Speech.speak:
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 = async () => {
const id = await Speech.speak('Hello World!');
console.log('Speech queued with id:', id);
};
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',
},
});speak() resolves with a unique utterance ID as soon as the utterance is queued. Keep the ID if you want to track events for that specific speech operation — see Events.
What's next?
- Set global voice options with Configuration.
- Explore voices and engines in Engines and voices.
- Control playback in Playback controls.