- Unofficial Speech To Text module for Expo which supported iOS and Android
- Forked anhtuank7c/expo-stt
- Migrated react-native-voice functionality on crossplatformkorea/expo-stt, which is forked from anhtuank7c/expo-stt
- Currently, anhtuank7c/expo-stt has a separate Google voice recognition modal. Instead, I migrated the react-native-voice code onto crossplatformkorea/expo-stt, which was created with the expo module, to use the built-in microphone like react-native-voice.
Below is a sequence diagram explaining how each module, including SpeechRecognizer, works.
And below is the mermaid code to create the above diagram.
sequenceDiagram
participant User
participant ExpoSttModule
participant SpeechRecognizer
participant ReactNative as React Native Module
User->>ExpoSttModule: startSpeech()
ExpoSttModule->>SpeechRecognizer: createSpeechRecognizer()
ExpoSttModule->>SpeechRecognizer: startListening()
SpeechRecognizer-->>ExpoSttModule: onReadyForSpeech
User->>SpeechRecognizer: User starts speaking
SpeechRecognizer-->>ExpoSttModule: onBeginningOfSpeech
ExpoSttModule->>ReactNative: sendEvent(onSpeechStart)
User->>SpeechRecognizer: User finishes speaking
SpeechRecognizer-->>ExpoSttModule: onEndOfSpeech
ExpoSttModule->>ReactNative: sendEvent(onSpeechEnd)
SpeechRecognizer-->>ExpoSttModule: onResults
ExpoSttModule->>ReactNative: sendEvent(onSpeechResult)
alt SpeechRecognizer encounters an error
SpeechRecognizer-->>ExpoSttModule: onError
ExpoSttModule->>ReactNative: sendEvent(onSpeechError)
end
npm install expo-stt
or
yarn add expo-stt
Remember, this module doesn't support Expo Go. So for Expo project, you will need to generates native code (Bare React Native project can skip this step)
npx expo prebuild --clean
Run npx pod-install after installing the npm package.
Add following key to plugins of app.json in Expo project
This is an optional, just use in case you want to customize the permission string
"plugins": [
[
"expo-stt",
{
"microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
"speechRecognitionPermission": "Allow $(PRODUCT_NAME) to access your speech recognition"
}
]
]
For Bare React Native project, you need to add these key to Info.plist in ios directory
<key>NSMicrophoneUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your microphone</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your speech recognition</string>
Register some listeners
import * as ExpoStt from 'expo-stt';
useEffect(() => {
const onSpeechStart = ExpoStt.addOnSpeechStartListener(() => {
setSpokenText("");
setError(undefined);
setRecognizing(true);
});
const onSpeechResult = ExpoStt.addOnSpeechResultListener(({ value }) => {
setSpokenText(value.join());
});
const onSpeechError = ExpoStt.addOnSpeechErrorListener(({ cause }) => {
setError(cause);
setRecognizing(false);
});
const onSpeechEnd = ExpoStt.addOnSpeechEndListener(() => {
setRecognizing(false);
});
return () => {
onSpeechStart.remove();
onSpeechResult.remove();
onSpeechError.remove();
onSpeechEnd.remove();
};
}, []);
There are some functions available to call such as:
- ExpoStt.startSpeech()
- ExpoStt.stopSpeech()
- ExpoStt.destroySpeech()
- ExpoStt.requestRecognitionPermission()
- ExpoStt.checkRecognitionPermission()
Take a look into example/App.tsx for completed example
Contributions are very welcome! Please refer to guidelines described in the contributing guide.