My expo app running on SDK 51 is not working when I update in SDK 52 it shows an error that "

ERROR Warning: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

App.js

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { Camera } from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [capturedImage, setCapturedImage] = useState(null);
  const cameraRef = useRef(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const takePicture = async () => {
    if (cameraRef.current) {
      const photo = await cameraRef.current.takePictureAsync();
      setCapturedImage(photo.uri);
    }
  };

  return (
    <View style={styles.container}>
      {capturedImage ? (
        <View style={styles.imageContainer}>
          <Image source={{ uri: capturedImage }} style={styles.capturedImage} />
          {/* Add a button to re-take the picture or process the image */}
        </View>
      ) : (
        <View style={styles.cameraContainer}>
          <Camera style={styles.camera} ref={cameraRef} />
          <TouchableOpacity style={styles.button} onPress={takePicture}>
            <Text style={styles.buttonText}>Take Picture</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  camera: {
    flex: 1,
  },
  button: {
    backgroundColor: '#fff',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 10,
  },
  buttonText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  imageContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  capturedImage: {
    width: 300,
    height: 200,
  },
});

package.json

{
  "name": "cameraapp",
  "license": "0BSD",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/metro-runtime": "~4.0.0",
    "axios": "^1.7.7",
    "expo": "^52.0.7",
    "expo-camera": "~16.0.5",
    "expo-image-manipulator": "~13.0.5",
    "expo-image-picker": "~16.0.2",
    "expo-status-bar": "~2.0.0",
    "expo-web-browser": "~14.0.1",
    "firebase": "^11.0.2",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "^0.76.2",
    "react-native-web": "~0.19.13",
    "react-webcam": "^7.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@react-native-community/cli": "latest"
  },
  "private": true,
  "expo": {
  "doctor": {
    "reactNativeDirectoryCheck": {
      "exclude": ["firebase", "react-webcam", "@expo/metro-runtime"]
    }
  }
}

}

My expo camera ain't working in Expo SDK 52 but it works in SDK 51 is there any way to fix this?

My expo app running on SDK 51 is not working when I update in SDK 52 it shows an error that "

ERROR Warning: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

App.js

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { Camera } from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [capturedImage, setCapturedImage] = useState(null);
  const cameraRef = useRef(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const takePicture = async () => {
    if (cameraRef.current) {
      const photo = await cameraRef.current.takePictureAsync();
      setCapturedImage(photo.uri);
    }
  };

  return (
    <View style={styles.container}>
      {capturedImage ? (
        <View style={styles.imageContainer}>
          <Image source={{ uri: capturedImage }} style={styles.capturedImage} />
          {/* Add a button to re-take the picture or process the image */}
        </View>
      ) : (
        <View style={styles.cameraContainer}>
          <Camera style={styles.camera} ref={cameraRef} />
          <TouchableOpacity style={styles.button} onPress={takePicture}>
            <Text style={styles.buttonText}>Take Picture</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  camera: {
    flex: 1,
  },
  button: {
    backgroundColor: '#fff',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 10,
  },
  buttonText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  imageContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  capturedImage: {
    width: 300,
    height: 200,
  },
});

package.json

{
  "name": "cameraapp",
  "license": "0BSD",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/metro-runtime": "~4.0.0",
    "axios": "^1.7.7",
    "expo": "^52.0.7",
    "expo-camera": "~16.0.5",
    "expo-image-manipulator": "~13.0.5",
    "expo-image-picker": "~16.0.2",
    "expo-status-bar": "~2.0.0",
    "expo-web-browser": "~14.0.1",
    "firebase": "^11.0.2",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "^0.76.2",
    "react-native-web": "~0.19.13",
    "react-webcam": "^7.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@react-native-community/cli": "latest"
  },
  "private": true,
  "expo": {
  "doctor": {
    "reactNativeDirectoryCheck": {
      "exclude": ["firebase", "react-webcam", "@expo/metro-runtime"]
    }
  }
}

}

My expo camera ain't working in Expo SDK 52 but it works in SDK 51 is there any way to fix this?

• reactjs
• react-native
• expo
• expo-camera

Share Improve this question Follow asked Nov 19, 2024 at 6:35 geeeeengeeeeen 1544 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Hello the fix for this could be as follows With the latest changes you will have to use CameraView in order to render the camera component while Camera just contains the methods related to camera now and can no more be used as a component

Camera methods :

getCameraPermissionsAsync requestCameraPermissionsAsync
getMicrophonePermissionsAsync
requestMicrophonePermissionsAsync scanFromURLAsync

Fix : import { Camera,CameraView } from 'expo-camera';

instead of rendering Camera use the below

<CameraView style={styles.camera} ref={cameraRef} />