Speech to Text in React Native with react-native-community/voice - react-native

Question

I want to convert voice to text and get the texts as a result with the help of voice recognition.
I'm using react-native-community/voice (Example)
After building the project and install apk on my phone and press record button, I get the following error :
Error: {"message":"5/Client side error"}
NOTE: I added the following permission in AndroidManifest:
<uses-permission android:name="android.permission.RECORD_AUDIO" />
this is my code ():
import React, { Component, useState, useEffect } from 'react';
import { StyleSheet, Text, View, Image, TouchableHighlight } from 'react-native';
import Voice from '#react-native-community/voice';
const App = (props) => {
const [voiceState, setVoiceState] = useState({
recognized: '',
pitch: '',
error: '',
end: '',
started: '',
results: [],
partialResults: [],
})
useEffect(() => {
Voice.onSpeechStart = onSpeechStart;
Voice.onSpeechRecognized = onSpeechRecognized;
Voice.onSpeechEnd = onSpeechEnd;
Voice.onSpeechError = onSpeechError;
Voice.onSpeechResults = onSpeechResults;
Voice.onSpeechPartialResults = onSpeechPartialResults;
Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
Voice.destroy().then(Voice.removeAllListeners);
}, [])
const onSpeechStart = (e) => {
console.log('onSpeechStart: ', e);
setVoiceState({ ...voiceState, started: '√', })
};
const onSpeechRecognized = (e) => {
console.log('onSpeechRecognized: ', e);
setVoiceState({
...voiceState, recognized: '√',
})
};
const onSpeechEnd = (e) => {
console.log('onSpeechEnd: ', e);
setVoiceState({
...voiceState, end: '√',
})
};
const onSpeechError = (e) => {
console.log('onSpeechError: ', e);
setVoiceState({
...voiceState, error: JSON.stringify(e.error)
})
};
const onSpeechResults = (e) => {
console.log('onSpeechResults: ', e);
setVoiceState({
...voiceState, results: e.value,
})
};
const onSpeechPartialResults = (e) => {
console.log('onSpeechPartialResults: ', e);
setVoiceState({
...voiceState, partialResults: e.value,
})
};
const onSpeechVolumeChanged = (e) => {
console.log('onSpeechVolumeChanged: ', e);
setVoiceState({
...voiceState, pitch: e.value,
})
};
const _startRecognizing = async () => {
setVoiceState({
...voiceState,
recognized: '',
pitch: '',
error: '',
started: '',
results: [],
partialResults: [],
end: '',
})
try {
await Voice.start('en-US');
} catch (e) {
console.error(e);
}
};
const _stopRecognizing = async () => {
try {
await Voice.stop();
} catch (e) {
console.error(e);
}
};
const _cancelRecognizing = async () => {
try {
await Voice.cancel();
} catch (e) {
console.error(e);
}
};
const _destroyRecognizer = async () => {
try {
await Voice.destroy();
} catch (e) {
console.error(e);
}
setVoiceState({
...voiceState,
recognized: '',
pitch: '',
error: '',
started: '',
results: [],
partialResults: [],
end: '',
})
};
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native Voice!</Text>
<Text style={styles.instructions}>
Press the button and start speaking.
</Text>
<Text style={styles.stat}>{`Started: ${voiceState.started}`}</Text>
<Text style={styles.stat}>{`Recognized: ${
voiceState.recognized
}`}</Text>
<Text style={styles.stat}>{`Pitch: ${voiceState.pitch}`}</Text>
<Text style={styles.stat}>{`Error: ${voiceState.error}`}</Text>
<Text style={styles.stat}>Results</Text>
{voiceState.results.map((result, index) => {
return (
<Text key={`result-${index}`} style={styles.stat}>
{result}
</Text>
);
})}
<Text style={styles.stat}>Partial Results</Text>
{voiceState.partialResults.map((result, index) => {
return (
<Text key={`partial-result-${index}`} style={styles.stat}>
{result}
</Text>
);
})}
<Text style={styles.stat}>{`End: ${voiceState.end}`}</Text>
<TouchableHighlight onPress={_startRecognizing}>
<Image style={styles.button} source={require('../assets/voice-recording.png')} />
</TouchableHighlight>
<TouchableHighlight onPress={_stopRecognizing}>
<Text style={styles.action}>Stop Recognizing</Text>
</TouchableHighlight>
<TouchableHighlight onPress={_cancelRecognizing}>
<Text style={styles.action}>Cancel</Text>
</TouchableHighlight>
<TouchableHighlight onPress={_destroyRecognizer}>
<Text style={styles.action}>Destroy</Text>
</TouchableHighlight>
</View>
);
}

Answer 1

I've seen this happen on an android emulator before, however it didn't happen on a real device. It could be that the emulator/device you're using doesn't have speech recognition support.
Before starting the listener, you should use the isAvailable method from the library to make sure the device is able to handle speech recognition.