camera.takePictureAsync(options) is not a function in react native camera

Question

Hello im new in react native and i just building my first react native project with camera without expo. I installed it with npm install react-native-camera and then linked it with react-native link react-native-camera. The camera run successfuly, but when i triggered the snap button it got error like this....

{ [TypeError: camera.takePictureAsync is not a function. (In 'camera.takePictureAsync(options)', 'camera.takePictureAsync' is undefined)] │ line: 131480, │ column: 72, └ sourceURL: 'http://localhost:8081/index.bundle?platform=android&dev=true&minify=false' }

Here is my code looks like...

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 () => {
        try {
            const options = { quality: 0.5, base64: true };
            const data = await camera.takePictureAsync(options);
            console.log(data.uri, '<<<<<<<<<<<<<<<<<<<<<');
        } catch (error) {
            console.log(error, "ERROR <<<<<<<<<<<<<")
        }
    };

    return (
        <View style={styles.container}>
            <RNCamera
                ref={camera}
                style={styles.preview}
                type={RNCamera.Constants.Type.back}
                flashMode={RNCamera.Constants.FlashMode.on}
                androidCameraPermissionOptions={{
                    title: 'Permission to use camera',
                    message: 'We need your permission to use your camera',
                    buttonPositive: 'Ok',
                    buttonNegative: 'Cancel'
                }}
                androidRecordAudioPermissionOptions={{
                    title: 'Permission to use audio recording',
                    message: 'We need your permission to use your audio',
                    buttonPositive: 'Ok',
                    buttonNegative: 'Cancel',
                }}
                onGoogleVisionBarcodesDetected={({ barcodes }) => {
                    console.log(barcodes)
                }}
            />
            <View style={{ flex: 1, width: '100%', flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 0 }}>
                <TouchableOpacity style={styles.capture} onPress={takePicture}>
                    <Text style={{ fontSize: 14 }}> SNAP </Text>
                </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

UPDATE (18.48): I tried using class component like in react-native-camera documentation did, and it finally works. But i still curious how to make it works in function component?

can you explain what `const camera = useRef(null)` does. How would that make `camera` anything that has properties like `takePictureAsync` - perhaps `const camera = useRef(RNCamera)`? — Jaromanda X, Sep 22 '19 at 11:11
i tried change it to `const camera = useRef(RNCamera)` but still doesnt work — Yoga Utomo, Sep 22 '19 at 11:20
Oh, I just read the error again ... `In 'camera.takePictureAsync(options)', 'camera.takePictureAsync' is undefined)` that is odd — Jaromanda X, Sep 22 '19 at 11:22
Any solution to this? I'm still getting undefined for Camera.takePictureAsync() — riccardolardi, Mar 17 '20 at 19:44

score 12 · Accepted Answer · answered Jan 25 '20 at 17:09

12

You should use camera.current.takePictureAsync(options); rather than camera.takePictureAsync(options);.

answered Jan 25 '20 at 17:09

Conor Muldoon

142
1
5

score 4 · Answer 2 · answered Dec 09 '19 at 19:09

I got react-native-camera running with Functional Components. This is how:

function CameraComponent(props){
  let camera;
  async function takePicture(){
    if( camera ) {
      const options = {quality: 0.5};
      const data = await camera.takePictureAsync(options);
      console.log(data.uri);
    }
  }

  return(
    <View>
      <RNCamera
        ref={ref => (camera = ref)}
       />
     </View>
  );
}

score 3 · Answer 3 · answered Oct 15 '19 at 15:44

3

I was having the same problem. The solution was to go back to a Class component instead of a function one.

<Camera
   ref={ref => (this.cameraEl = ref)}
   style={{ flex: 1 }}
   type={Camera.Constants.Type.front}
/>

answered Oct 15 '19 at 15:44

Eduardo Pedroso

839
3
12
30

1

While this will work, it's a workaround and not a solution. – foxtrotuniform6969 Oct 30 '19 at 00:07

score 1 · Answer 4 · edited Dec 25 '20 at 00:26

hi the correct way in function component should be

const ref = React.createRef();

const takePicture = async () => {
    if (ref.current) {
      const options = { quality: 0.5, base64: true };
      const data = await ref.current.takePictureAsync(options);
    
      console.log(data.uri);
    }
  };


  return (
    <View style={styles.container}>
      <RNCamera
        ref={ref}
        style={styles.preview}
        type={RNCamera.Constants.Type.back}
        flashMode={RNCamera.Constants.FlashMode.on}
        androidCameraPermissionOptions={{
          title: 'Permission to use camera',
          message: 'We need your permission to use your camera',
          buttonPositive: 'Ok',
          buttonNegative: 'Cancel',
        }}
        androidRecordAudioPermissionOptions={{
          title: 'Permission to use audio recording',
          message: 'We need your permission to use your audio',
          buttonPositive: 'Ok',
          buttonNegative: 'Cancel',
        }}
        onGoogleVisionBarcodesDetected={({ barcodes }) => {
          console.log(barcodes);
        }}
      />
      <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
        <TouchableOpacity onPress={ takePicture } style={styles.capture}>
          <Text style={{ fontSize: 14 }}> SNAP </Text>
        </TouchableOpacity>
      </View>
    </View>
  );

score 0 · Answer 5 · answered Mar 28 '20 at 08:38

  const cameraEl = useRef(null);
  async function takePicture() {
    console.log('takePicture');
    if (cameraEl.current) {
      const options = { quality: 0.5, base64: true };
      const data = await cameraEl.current.takePictureAsync(options);
      console.log(data.uri);
    }
  }

    <RNCamera
      // ref={ref => {
      //   this.camera = ref;
      // }}
      ref={cameraEl}

camera.takePictureAsync(options) is not a function in react native camera

5 Answers5