Got Cannot find native module 'ExpoSpeechRecognition' when run on Expo Go

[daduev]

When I start app on Expo Go application I get this error Cannot find native module 'ExpoSpeechRecognition'. But when I run it on simulator all is fine.

I try this commands:
npx expo prebuild --clean
npx expo run:ios

This command show me this:
npx expo-doctor

✔ Check package.json for common issues
✔ Check Expo config for common issues
✔ Check for common project setup issues
✔ Check dependencies for packages that should not be installed directly
✔ Check npm/ yarn versions
✔ Check for issues with Metro config
✖ Check for app config fields that may not be synced in a non-CNG project
✔ Check if the project meets version requirements for submission to app stores
✔ Validate packages against React Native Directory package metadata
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check that native modules do not use incompatible support packages
✔ Check for legacy global CLI installed locally
✔ Check native tooling versions
✔ Check that native modules use compatible support package versions for installed Expo SDK
✔ Check that packages match versions required by installed Expo SDK

Detailed check results:

This project contains native project folders but also has native configuration properties in app.json, indicating it is configured to use Prebuild. When the android/ios folders are present, if you don't run prebuild in your build pipeline, the following properties will not be synced: orientation, icon, userInterfaceStyle, splash, ios, android, plugins. 

App.js

import { StyleSheet, Text, View, Button, ScrollView } from "react-native";
import { useState } from "react";
import {
  ExpoSpeechRecognitionModule,
  useSpeechRecognitionEvent,
} from "expo-speech-recognition";

export default function App() {
  const [recognizing, setRecognizing] = useState(false);
  const [transcript, setTranscript] = useState("");

  useSpeechRecognitionEvent("start", () => setRecognizing(true));
  useSpeechRecognitionEvent("end", () => setRecognizing(false));
  useSpeechRecognitionEvent("result", (event) => {
    setTranscript(event.results[0]?.transcript);
  });
  useSpeechRecognitionEvent("error", (event) => {
    console.log("error code:", event.error, "error message:", event.message);
  });

  const handleStart = async () => {
    const result = await ExpoSpeechRecognitionModule.requestPermissionsAsync();
    if (!result.granted) {
      console.warn("Permissions not granted", result);
      return;
    }
    console.log(result);
    // Start speech recognition
    ExpoSpeechRecognitionModule.start({
      lang: "en-US",
      interimResults: true,
      maxAlternatives: 1,
      continuous: false,
      requiresOnDeviceRecognition: false,
      addsPunctuation: false,
      contextualStrings: ["Carlsen", "Nepomniachtchi", "Praggnanandhaa"],
    });
  };

  return (
    <View style={styles.container}>
      {!recognizing ? (
        <Button title="Start" onPress={handleStart} />
      ) : (
        <Button
          title="Stop"
          onPress={() => ExpoSpeechRecognitionModule.stop()}
        />
      )}

      <ScrollView>
        <Text>{transcript}</Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

package.json

{
  "name": "voiceapp",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~52.0.11",
    "expo-speech-recognition": "^1.1.0",
    "expo-status-bar": "~2.0.0",
    "react": "18.3.1",
    "react-native": "0.76.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

app.json

{
  "expo": {
    "name": "VoiceApp",
    "slug": "VoiceApp",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "newArchEnabled": true,
    "splash": {
      "image": "./assets/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NSSpeechRecognitionUsageDescription": "Allow $(PRODUCT_NAME) to use speech recognition.",
        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to use the microphone."
      },
      "bundleIdentifier": "org.home.VoiceApp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "permissions": [
        "android.permission.RECORD_AUDIO",
        "android.permission.RECORD_AUDIO"
      ],
      "package": "com.anonymous.VoiceApp"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      [
        "expo-speech-recognition",
        {
          "microphonePermission": "Allow $(PRODUCT_NAME) to use the microphone.",
          "speechRecognitionPermission": "Allow $(PRODUCT_NAME) to use speech recognition.",
          "androidSpeechServicePackages": [
            "com.google.android.googlequicksearchbox"
          ]
        }
      ]
    ]
  }
}

[jamsch]

Hey @daduev, this package isn't a first-class Expo SDK package meaning that the native code (swift/kotlin) isn't included in the pre-built Expo Go app. You'll need to build a development client once you use out-of-tree react native packages (like this) that include native iOS or Android code. So yeah, running it on the simulator (using npx expo run:ios) would work okay because the app is built with the native code but the Expo Go app can't be bundled with this code.

[daduev]

Thanks @jamsch for quick answer. I am new in this field, could you describe in detail what should be done to run voice recognition on Expo Go app. I read development client and what I got that some commands should be called, I am not sure but I did that, maybe i missed something.

[jamsch]

Hey @daduev, unfortunately because this package contains swift and Kotlin code, you can't actually use it at all in the Expo Go app. The Expo Go app is pre-compiled with select packages for the specific Expo version.

You can compile your app dev client by typing npx expo run:android or npx expo run:ios. You should see your app's name + icon on the launcher and not "Expo Go". Don't open Expo Go anymore and instead open your app.

Also update your "start": "expo start" command in your package.json to "start": "expo start --dev-client" so that Expo doesn't try to open the Expo Go app and instead your dev client app.

[atologistChiragRathod]

@jamsch How can I build this app to apk file?
using eas workflow or ./gradlew assembleRelease

[jamsch]

@atologistChiragRathod It depends on what kind of build you're intending, i.e. a development client build, or production APK build (for internal/external distribution).

With Expo, building the app for internal or external distribution requires EAS which you configure through eas.json. For APK builds you can use one the profiles here:
https://docs.expo.dev/build-reference/apk/

Then you should be able to run:

eas build --profile <profile-name>

You may want to append --local if you want to build it locally on your machine instead of the EAS cloud servers though.