Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'camera.takePictureAsync') React-Native expo-camera

Question

I am trying to create a function that will access my device's camera, and will allow me to take a picture, but I get the above error. I modeled this similar to requesting access to the camera roll and it works fine, but I cannot get it to work for the camera.

What may be causing this? Below is some of my code:

import * as ImagePicker from 'expo-image-picker' //I am using expo
import {Camera} from 'expo-camera'  

export default function Photo(){

// Image Picker function start

useEffect(() => {
(async ()=> {
   if (Platform.OS != 'web'){
      const ( status !== 'granted') {
      if(status !== 'granted) {
      alert('Camera roll required to upload photo from your library');
   }
 }
})();
},[]);

//Image Picker function end

const camera = useRef(null) //added this
const takePicture = async () => { // added this



useEffect(() => {
    (async () => {
        if (Platform.OS !== 'web'){
        const { status1 } = await Camera.requestPermissionsAsync();
            if (status1 !== 'granted'){
            alert('Camera required to take a photo');
            }
} //added this
        },
    })();
}, [])


}

<Camera //added this
  ref = { camera }
  onGoogleVisionBarcodesDetected = {({barcodes}) => {
       console.log(barcodes)
   }}
 /> //added this

<View style = {[ styles.button, {justifyContent: 'center',  borderRadius: 20, backgroundColor: '#fff', paddingTop: 10, width: width*0.5, alignItems: 'center' } ]}>                 
                <TouchableOpacity 
                    color='#fff'
                    onPress = { ()=> takePicture () }
                    >

                <Text style = {[ styles.button, {}]}>Take Photo </Text>
                </TouchableOpacity>


            </View>

First thing I noticed is you are using camera.takePictureAsync(). In expo we have an example which goes like this { this.camera = ref; }} />; // ... snap = async () => { if (this.camera) { let photo = await this.camera.takePictureAsync(); } }; https://docs.expo.io/versions/latest/sdk/camera/ I think you will have to create a ref for camera and use this.camera. takePictureAsync() as mentioned in the example in the link. — Rigorous implementation, Dec 13 '20 at 03:27
I have seen this module before. It accesses my camera but it doesn't do quite what I need it to do. I have a button that I am going to push that I want to prompt my camera, and then will be able to take a picture. With the module given in expo-camera, it just constantly renders a camera, if that makes sense? — MK_Pierce, Dec 13 '20 at 03:40
Sure that makes sense. Somebody else might have asked a similar question here https://stackoverflow.com/questions/52707002/how-to-snap-pictures-using-expo-react-native-camera — Rigorous implementation, Dec 13 '20 at 04:01
They use a class system, I'm using hooks. I believe their question is with respect to being able to take photos in general. I believe this camera component also just creates a camera in the app; I'm trying to navigate to my device's camera — MK_Pierce, Dec 13 '20 at 04:16

Nooruddin Lakhani · Answer 1 · 2020-12-14T05:21:09.887

0

This might help

import React, { useRef } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import { RNCamera } from 'react-native-camera'


function PlayWithCamera() {

    const camera = useRef(null);

    const takePicture = async () => {
        const result1 = await camera.takePictureAsync();
        ....
    };

    return (
        <View style={styles.container}>
            <RNCamera
                ref={camera}
                .....
                onGoogleVisionBarcodesDetected={({ barcodes }) => {
                    console.log(barcodes)
                }}
            />
            <View ... >                 
                <TouchableOpacity 
                    onPress={() => takePicture() } // change here
                >

                ......
                </TouchableOpacity>


            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'black',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 15,
        paddingHorizontal: 20,
        alignSelf: 'center',
        margin: 20,
    },
})

export default PlayWithCamera

edited Dec 14 '20 at 05:21

answered Dec 13 '20 at 04:38

Nooruddin Lakhani

7,507
2
19
39

I will try this in the morning and get back to you, thank you – MK_Pierce Dec 13 '20 at 05:56
This did not access the devices camera, rather make a camera inside the app. It is also only as large as I make it – MK_Pierce Dec 13 '20 at 15:31
@MK_Pierce So all you want is on press of a button you want to open the device's camera and take a picture and use the picture in your app? – Rigorous implementation Dec 13 '20 at 19:05
@MK_Pierce I have updated my answer onPress method calling please check – Nooruddin Lakhani Dec 14 '20 at 05:21
@Rigorousimplementation yes, that is exactly what I need! – MK_Pierce Dec 14 '20 at 14:19
@NooruddinLakhani "can't find variable, result1" – MK_Pierce Dec 14 '20 at 19:49
@NooruddinLakhani actually, I forgot something, so it I no longer get that error, but it is now telling me that it is not a function. I have updated my code above – MK_Pierce Dec 14 '20 at 20:07

Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'camera.takePictureAsync') React-Native expo-camera

1 Answers1