Question 33501 in React native Question posted in
The official React Native documentation can be found here.

react-native-voice and config-plugin – React native

I am working on a mobile application with React Native with expo, I need to implement a function to record and transcribe what is said into the microphone.
I have tried many solutions but none really work, the only one that seems to come close is @react-native-voice/voice.

I install @react-native-voice/voice:
npm i @react-native-voice/voice

my code:

import { View, StyleSheet, Image, Text, Button } from "react-native";
import { NativeBaseProvider } from "native-base";
import { useState, useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import Voice from "@react-native-voice/voice";

const App = () => {
  let [started, setStarted] = useState(false);
  let [results, setResults] = useState([]);

  useEffect(() => {
    Voice.onSpeechError = onSpeechError;
    Voice.onSpeechResults = onSpeechResults;

    return () => {
      Voice.destroy().then(Voice.removeAllListeners);
    };
  }, []);

  const startSpeechToText = async () => {
    await Voice.start("en-NZ");
    setStarted(true);
  };

  const stopSpeechToText = async () => {
    await Voice.stop();
    setStarted(false);
  };

  const onSpeechResults = (result) => {
    setResults(result.value);
  };

  const onSpeechError = (error) => {
    console.log(error);
  };

  return (
    <NativeBaseProvider>
      <View style={styles.container}>
        {!started ? (
          <Button title="Start Speech to Text" onPress={startSpeechToText} />
        ) : undefined}
        {started ? (
          <Button title="Stop Speech to Text" onPress={stopSpeechToText} />
        ) : undefined}
        {results.map((result, index) => (
          <Text key={index}>{result}</Text>
        ))}
        <StatusBar style="auto" />
      </View>
    </NativeBaseProvider>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
export default App;

I start my application and when I press the register button it returns this error:

[Unhandled promise rejection: TypeError: null is not an object (evaluating ‘Voice.startSpeech’)]

I then launch expo doctor it returns:

Expected package @expo/config-plugins@^5.0.2
Found invalid:
@expo/[email protected]

I’ve never seen this and don’t know it, has anyone solved a similar problem yet?
all versions of @react-native-voice/voice have @expo/[email protected]

Tags:

2

Answers


  1. 0

    I run through the same problem on android, we are still waiting to fix this problem

    Login or Signup to reply.
  2. 0

    This will seem like to much effort but believe me it is very straight forward, so bare with me:

    react-native-voice does not work with expo out of the box, you have to use EAS build system to be able use this library.

    First install the library

    expo install @react-native-voice/voice expo-dev-client

    Add the plugins value to app.json

    "plugins": [
      [
        "@react-native-voice/voice",
        {
          "microphonePermission": "Allow Voice to App_Name to access the microphone",
          "speechRecognitionPermission": "Allow Voice to App_Name to securely recognize user speech"
        }
      ]
    ],

    If you don’t have eas go ahead and install

    npm install -g eas-cli

    then login to your expo account

    eas login then eas build:configure

    Once you eas.json file is created, add simulator:true value to build>development>ios in the eas.json file like so:

     "build": {
    "development": {
      "ios": {
        "simulator": true
      }

    Then you can run eas build -p ios --profile development --local to create a development build that you can use on your Simulator.

    Once this build finishes it will create a .tar file on the project root, simply double click on the tar file and drag and drop the exported file into your simulator.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search