The native module 'ExpoCamera' could not be located

Currently, I am in the process of developing a react-native application for Android using TypeScript and Expo. My goal is to incorporate camera functionality into the app. To achieve this, I referred to the code provided in the Expo documentation:

import { CameraView, CameraType, useCameraPermissions } from 'expo-camera';
import { useState } from 'react';
import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function App() {
  const [facing, setFacing] = useState<CameraType>('back');
  const [permission, requestPermission] = useCameraPermissions();

  if (!permission) {
    // Camera permissions are still loading.
    return <View />;
  }

  if (!permission.granted) {
    // Camera permissions are not granted yet.
    return (
      <View style={styles.container}>
        <Text style={styles.message}>We need your permission to show the camera</Text>
        <Button onPress={requestPermission} title="grant permission" />
      </View>
    );
  }

  function toggleCameraFacing() {
    setFacing(current => (current === 'back' ? 'front' : 'back'));
  }

  return (
    <View style={styles.container}>
      <CameraView style={styles.camera} facing={facing}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity style={styles.button} onPress={toggleCameraFacing}>
            <Text style={styles.text}>Flip Camera</Text>
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  message: {
    textAlign: 'center',
    paddingBottom: 10,
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'transparent',
    margin: 64,
  },
  button: {
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
});

Upon running the application, an error occurred:


Logs for your project will appear below. Press Ctrl+C to exit.
Android Bundled 52499ms D:\practice_codes\react-native\expo-docu\purnendu-prabhat\node_modules\expo-router\entry.js (1155 modules)
 WARN  [Reanimated] Reduced motion setting is enabled on this device. This warning is visible only in the development mode. Some animations will be disabled by default. You can override the behavior for individual animations, see https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#reduced-motion-setting-is-enabled-on-this-device.
    at ContextNavigator (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:146208:24)
    at ExpoRoot (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:146164:28)
    at App
    at ErrorToastContainer (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:189391:24)
    at ErrorOverlay
    at withDevTools(ErrorOverlay) (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:189110:27)
    at RCTView
    at View (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:41374:43)
    at RCTView
    at View (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:41374:43)
    at AppContainer (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:41217:25)
    at main(RootComponent) (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:120269:28)
 ERROR  Error: Cannot find native module 'ExpoCamera', js engine: hermes
    at ContextNavigator (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:146208:24)
    at ExpoRoot (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:146164:28)
    at App
    at ErrorToastContainer (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:189391:24)
    at ErrorOverlay
    at withDevTools(ErrorOverlay) (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:189110:27)
    at RCTView
    at View (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:41374:43)
    at RCTView
    at View (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:41374:43)
    at AppContainer (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:41217:25)
    at main(RootComponent) (http://192.168.1.11:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:120269:28)

I anticipated a smooth implementation and the ability to capture images from the mobile camera. Despite upgrading Expo to version 51, the issue persists.

typescriptreact-nativeexpoexpo-cameraexpocameraissue

Answer №1

Adding the mode parameter in your code:

Include 

<CameraView style={styles.camera} ref={cameraRef} mode="video">
or mode="picture"

My functional code snippet:

import { CameraView, useCameraPermissions } from "expo-camera";
import * as MediaLibrary from "expo-media-library";
import { useState, useRef, Children } from "react";
import {
  Button,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Image,
} from "react-native";

export default function CameraComponent() {
  const [permission, requestPermission] = useCameraPermissions();
  const [mediaLibraryPermission, requestMediaLibraryPermission] =
    MediaLibrary.usePermissions();

  const cameraRef = useRef<CameraView>(null);
  const [recording, setRecording] = useState(false);

  if (!permission) {
    // Still loading camera permissions.
    return <View />;
  }

  const takeVideo = async () => {
    console.log("taking video");

    if (cameraRef.current) {
      try {
        setRecording(true);

        const video = await cameraRef.current.recordAsync();
        console.log("video", video);

        if (video) {
          console.log("video.uri", video.uri);
          const asset = await MediaLibrary.createAssetAsync(video.uri);
          console.log(asset);
        }
      } catch (error) {
        console.log("error", error);
      }
    }
  };

  const stopVideo = async () => {
    if (cameraRef.current) {
      try {
        const stoppingVideo = await cameraRef.current.stopRecording();
        console.log("stopping video", stoppingVideo);
        setRecording(false);
      } catch (error) {
        console.log("error", error);
      }
    }
  };

  if (!permission.granted || !mediaLibraryPermission?.granted) {
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: "center" }}>
          Permission needed to access camera
        </Text>
        <Button onPress={requestPermission} title="grant permission" />
        <Button onPress={requestPermission} title="Grant Camera Permission" />
        <Button
          onPress={requestMediaLibraryPermission}
          title="Grant Media Library Permission"
        />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <CameraView style={styles.camera} ref={cameraRef} mode="picture">
        <View className="h-full flex-row items-end justify-center">
          <TouchableOpacity
            className="bg-red-500 p-4 rounded-lg m-2 "
            onPress={takeVideo}
            disabled={recording}
          >
            <Text className="text-white text-center text-2xl font-bold">
              {recording ? "Recording" : "Record"}
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            className="bg-red-500 p-4 rounded-lg m-2 "
            onPress={stopVideo}
          >
            <Text className="text-white text-center text-2xl font-bold">
              Stop
            </Text>
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  camera: {
    flex: 1,
  },
  button: {
    flex: 1,
    alignSelf: "flex-end",
    alignItems: "center",
  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
    color: "white",
  },
});

Using versions:

  "expo": "~51.0.14",
  "expo-camera": "~15.0.14",

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered an import failure with fs in Typescript @types/node

In my Typescript project, I am attempting to read a file using @types/node instead of typings. Although there are no compile errors, the debugger indicates that fs is undefined. What could I have overlooked? test.ts import * as fs from 'fs'; f ...

node.jsangulartypescript

Choose the appropriate data type for the class variable (for example, fArr = Uint32Array)

const functionArray: Function = Uint32Array; new fArr(5); The code snippet above is functioning properly. However, TypeScript is throwing a TS2351 error: "This expression is not constructable. Type 'Function' has no construct signatures". I wo ...

javascriptnode.jstypescript

Icon that can be clicked in a div container

Is there a way to prevent the div click event from being triggered when clicking on ion-icon? <div(click)="goNext()"> <ion-icon name="close-circle-outline" size="large" (click)="dissmiss()"></io ...

htmlangulartypescriptionic-framework

The useQueries function is unable to simultaneously query data as Next.js mandates that the server component must be asynchronous

The Next.js-powered app is up and running smoothly. Within my code, I utilize a useQueries hook: const userQueries = useQueries({ queries: user.contacts.map((contactId: string) => ({ queryKey: ['contact', contactId], ...

reactjstypescriptnext.jsreact-query

Tips on creating a union of tuple types in a way that maintains the association of variable types even after destructuring

Is it possible to specify the data types of tuples in a way that allows for type inference as illustrated in the comments within the code snippet below? declare const tuples: [number, null] | [null, number]; const [a, b] = tuples; const fun = () => ...

typescript

Advanced Typescript Interface Incorporating Objects

I'm facing an issue with my address interface setup. Here is how it's defined: export interface Address { addressType: { house?: { streetAddress: string, city: string, zip: string, }, ...

angulartypescript

Is there an alternative method to incorporate the 'environment.ts' file into a JSON file?

In my Angular application, I need to import assets based on the env configuration. I am attempting to extract the patch information from environment.ts and save it into my assets as a json file. However, I am unsure of the proper method to accomplish this. ...

jsonangulartypescriptangular9

What is causing me to not receive a 404 error when dealing with an unhandled state?

Currently, I am utilizing $stateProvider to configure my states in the following manner: constructor($stateProvider, $urlRouterProvider, $locationProvider) { $stateProvider. state("something", { url: "/index.html" }) ...

angularjstypescriptroute-provider

Having trouble getting Lodash find to work properly with TypeScript overload signatures

I have been attempting to utilize _.find in TypeScript on an Object in order to retrieve a value from this object. The original code snippet looked like this: const iconDict = { dashboard: <DataVisualizer />, settings: <SettingsApp /> ...

javascripttypescriptlodash

In the production build, the RegEx validation is lacking and fails to accept certain characters like 0, 2, 7, a, c, u, x, and occasionally z

Incorporating Angular 15.2.10 and Typescript 4.9.5, the RegEx utilized in one of my libraries and exposed via a service is outlined as follows: private readonly _DISALLOWED_CHARS_REGEX_GENERAL = new RegExp(/^[^\\/\?\!\&\: ...

angularregextypescriptangular-forms

What is the best way to extract data from a proxy in VUE3?

Currently, I am utilizing the ref() function to store data retrieved from Firebase. However, when attempting to filter and retrieve a single record, the outcome is not as expected. Instead of returning a single object, something different is being displaye ...

javascripttypescriptvue.jsvuejs3vite

Issue with Angular 4: Radio button defaults not being set

After hardcoding the value in component.ts, I am able to see the pre-selected radio button. However, when attempting to retrieve the value from sessionStorage, it does not work as expected. The value is visible in the console though. Could someone please ...

angulartypescript

Explaining the ValueAccessor for the columns in the Syncfusion grid

I have implemented a valueAccessor for a specific column in my SyncFusion Grid as shown below: export interface GridColumn<idT> { ... valueAccessor?: ( field: string, data: GridData<idT>, column: Column ) => ValueAccessor | ...

typescriptsyncfusionej2-syncfusion

Exploring matching routes with Next.js + Jest

Issue with Unit Testing MenuItem Component Despite my efforts to achieve 100% coverage in my component unit tests, I have encountered an uncovered branch specifically within the MenuItem component. To offer more insight, here is the parent component that ...

reactjstypescriptunit-testingnext.jsts-jest

The preflight request in Angular2 is being rejected due to failing the access control check: The requested resource does not have the 'Access-Control-Allow-Origin' header

I encountered an issue while attempting to execute a basic POST request to establish an account using an API in .NET. The process fails with the mentioned warning title. Interestingly, performing the same request in Postman (an API testing tool) yields a s ...

angularhttptypescriptpostpostman

Typescript compiler still processing lib files despite setting 'skipLibCheck' to true

Currently, I am working on a project that involves a monorepo with two workspaces (api and frontEnd). Recently, there was an upgrade from Node V10 to V16, and the migration process is almost complete. While I am able to run it locally, I am facing issues w ...

node.jstypescriptnode-modulestsc

Requires the refreshing of an Angular component without altering any @Input properties

Currently delving into the world of Angular (along with Typescript). I've put together a small application consisting of two components. This app is designed to help track work hours (yes, I am aware there are commercial products available for this pu ...

angulartypescript

After transitioning to TypeScript, the CRA app is encountering issues loading CSS files compiled by SASS

My React application was originally created using create-react-app and I had been successfully loading scss files with the node-sass package. However, after deciding to switch to TypeScript following the steps outlined in , my css files are no longer being ...

cssreactjstypescriptsass

Unsuccessful try to retrieve data from database using Angular 8 and PHP

UPDATE! The retrieved data is visible in preview, but nothing appears on the HTML page. https://i.sstatic.net/qXuZV.png UPDATE2! for Acuaohttps://i.sstatic.net/Pq772.png I am trying to display OS Categories from my DB https://i.sstatic.net/PoBvg.png but ...

phpangulartypescript

Radio buttons with multiple levels

Looking to implement a unique two-level radio button feature for a specific option only. Currently, I have written a logic that will display additional radio buttons under the 'Spring' option. However, the issue is that when it's selected, t ...

javascripthtmlangulartypescriptangular6