reactjs - Expo Camera live fee in SDK 51 aint working in SDK 52 but - Stack Overflow

admin管理员组

文章数量:1023758

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} />

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} />

本文标签： reactjsExpo Camera live fee in SDK 51 aint working in SDK 52 butStack Overflow