Examples
Practical examples for @mhpdev/react-native-speech, taken from the example project.
Example application
The example project in the repository demonstrates the full flow: configuring options, speaking text, tracking progress, highlighting the current range, and controlling playback.
Speak with progress highlighting
This is the pattern used by the example project: keep the utterance ID, subscribe to the lifecycle events, and turn every onProgress event into a highlight for the HighlightedText component.
import React from 'react';
import Speech, {
HighlightedText,
type HighlightedSegmentProps,
} from '@mhpdev/react-native-speech';
const TEXT =
'This high-performance text-to-speech library enables seamless speech management with start, pause, resume, and stop controls.';
const Example: React.FC = () => {
const [highlights, setHighlights] = React.useState<
Array<HighlightedSegmentProps>
>([]);
const currentId = React.useRef<string>('');
React.useEffect(() => {
const startSubscription = Speech.onStart(({id}) => {
if (id === currentId.current) {
console.log(`Speech ${id} started`);
}
});
const finishSubscription = Speech.onFinish(({id}) => {
if (id === currentId.current) {
setHighlights([]);
currentId.current = '';
}
});
const progressSubscription = Speech.onProgress(({id, location, length}) => {
setHighlights([
{
start: location,
end: location + length,
},
]);
});
return () => {
startSubscription.remove();
finishSubscription.remove();
progressSubscription.remove();
};
}, []);
const onStartPress = async () => {
const id = await Speech.speak(TEXT);
currentId.current = id;
};
return (
<HighlightedText
text={TEXT}
highlights={highlights}
highlightedStyle={{fontWeight: '600', backgroundColor: '#ffff00'}}
/>
);
};Configure a voice and language
Select a voice from the available voices and apply it through the global configuration:
const enVoices = await Speech.getAvailableVoices('en-US');
Speech.configure({
rate: 0.5,
volume: 1,
voice: enVoices[3]?.identifier,
});Select an engine (Android)
List the installed engines and switch to one of them:
const engines = await Speech.getEngines();
if (engines?.[0]) {
await Speech.setEngine(engines[0].name);
}The library's example project guards pause / resume buttons behind
Platform.Version >= 26 on Android, because those controls require API 26+.
More examples
- Quick start — the minimal speak button.
- HighlightedText — segment styling and press handling.
- Events — every lifecycle event with cleanup.