React Native Speech to text - GoogleCloudSpeechToText - react-native

Question

I am new to react native and am trying to develop a voice transcription function in my application.
I would like to get a string when people use the microphone.
I have found several solutions on the net but for native apps, I am using EXPO.
I am using "react-native-google-cloud-speech-to-text" but I keep getting this error:
TypeError: null is not an object (evaluating 'GoogleCloudSpeechToText.setApiKey')
Have you ever faced this problem?
export default function Notes() {
const [transcript, setResult] = useState("");
const [fileId, setId] = useState("");
const [file, setFile] = useState("");
const API_KEY = '**************************';
useEffect(() => {
PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, {
title: "Cool Photo App Camera Permission",
message:
"Cool Photo App needs access to your camera " +
"so you can take awesome pictures.",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK",
});
}, []);
useEffect(() => {
GoogleCloudSpeechToText.setApiKey(API_KEY);
GoogleCloudSpeechToText.onVoice(onVoice);
GoogleCloudSpeechToText.onVoiceStart(onVoiceStart);
GoogleCloudSpeechToText.onVoiceEnd(onVoiceEnd);
GoogleCloudSpeechToText.onSpeechError(onSpeechError);
GoogleCloudSpeechToText.onSpeechRecognized(onSpeechRecognized);
GoogleCloudSpeechToText.onSpeechRecognizing(onSpeechRecognizing);
return () => {
GoogleCloudSpeechToText.removeListeners();
};
}, []);
const onSpeechError = (_error) => {
console.log("onSpeechError: ", _error);
};
const onSpeechRecognized = (result) => {
console.log("onSpeechRecognized: ", result);
setResult(result.transcript);
};
const onSpeechRecognizing = (result) => {
console.log("onSpeechRecognizing: ", result);
setResult(result.transcript);
};
const onVoiceStart = (_event) => {
console.log("onVoiceStart", _event);
};
const onVoice = (_event) => {
console.log("onVoice", _event);
};
const onVoiceEnd = () => {
console.log("onVoiceEnd: ");
};
const startRecognizing = async () => {
const result = await GoogleCloudSpeechToText.start({
speechToFile: true,
});
console.log("startRecognizing", result);
if (result.fileId) setId(result.fileId);
};
const stopRecognizing = async () => {
await GoogleCloudSpeechToText.stop();
};
const getAudioFile = async () => {
if (fileId) {
const result = await GoogleCloudSpeechToText.getAudioFile(fileId, {
channel: 2,
bitrate: 96000,
sampleRate: 44100,
});
console.log(result);
if (result.path) {
setFile(result.path);
}
}
};
return (
<SafeAreaView style={styles.container}>
<View>
<Text style={styles.title}>{transcript}</Text>
<Button title="Start me" onPress={startRecognizing} />
</View>
<Separator />
<View>
<Text style={styles.title}>
Adjust the color in a way that looks standard on each platform. On
iOS, the color prop controls the color of the text. On Android, the
color adjusts the background color of the button.
</Text>
<Button title="Stop me" color="#f194ff" onPress={stopRecognizing} />
</View>
<Separator />
<View>
<Text style={styles.title}>{file}</Text>
<Button
disabled={transcript === ""}
title="Get file audio"
color="#f194ff"
onPress={getAudioFile}
/>
</View>
{/*{file && (*/}
{/* <>*/}
{/* <Separator />*/}
{/* <Text style={styles.title}>file</Text>*/}
{/* <View>*/}
{/* <Button*/}
{/* disabled={transcript === ''}*/}
{/* title="Play"*/}
{/* color="#f194ff"*/}
{/* onPress={playAudio}*/}
{/* />*/}
{/* </View>*/}
{/* </>*/}
{/*)}*/}
</SafeAreaView>
);
}

Answer 1

I have not faced this problem, but I see a different error when clicking 'run code snippet' in StackOverflow:
Error: {
"message": "Uncaught SyntaxError: Unexpected token 'export'",
"filename": "https://stacksnippets.net/js",
"lineno": 12,
"colno": 9
}
Perhaps a stack trace would help?