0

-App dev in React Native- Hello, I have a problem with Expo Camera. Here an error is referred when you want to take a picture.

"TypeError: undefined is not an object (evaluating '_this.camera = _ref')" / Scan.js.

If the app is freshly updated with Expo, everything works. But as soon as you continue programming and another error occurs, this error appears and doesn't go away until you refresh the app again.

I have tried a lot, but I need help here.

Scan.js

import React, { Component, useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import {Camera, Constants} from 'expo-camera';
import * as MediaLibrary from 'expo-media-library';
import * as Haptics from 'expo-haptics';


import Images from '../assets/icon/index'



const Scan = () => {
  const [hasPermission, setHasPermission] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);
  const [status, requestPermission] = MediaLibrary.usePermissions();
  


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

  if (hasPermission === null) {
    return <View/>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  
  takePicture = async () => {
    if (this.camera) {
      let photo = await this.camera.takePictureAsync();

      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);

      console.log(photo.uri);
      MediaLibrary.saveToLibraryAsync(photo.uri);
    }
  };

  
  
  
  

  
  return (
    <View style={styles.container}>
      <Camera style={styles.camera}
        type={type}
        ref={ref => {
          this.camera = ref;
        }}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              setType(
                type === Camera.Constants.Type.back
                  ? Camera.Constants.Type.front
                  : Camera.Constants.Type.back
              );
            }}
            >
            <Image source={Images.camera} style={styles.icon}></Image>
          </TouchableOpacity>
          <TouchableOpacity
          style={styles.button}
          onPress={takePicture}
          >
            <Text style={styles.text}>Take</Text>
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    backgroundColor: 'transparent',
    flexDirection: 'row',
    margin: 20,
    top: 0,
  },
  button: {
    flex: 0.1,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    color: 'white',
  },
  icon : {
    tintColor: 'white',
  },
})

export default Scan; ```
LN202
  • 3
  • 1
  • 3

2 Answers2

0

Create a new camera reference and attach it to the Camera component.

import { useRef } from 'react';
...
const cameraRef = useRef<Camera>(null);
...
<Camera ref={cameraRef} ... />

In your takePicture function replace this.camera.takePictureAsync with cameraRef.current?.takePictureAsync

Johndev247
  • 91
  • 6
KKK
  • 507
  • 3
  • 12
  • It worked for me, thank you very much. However, now comes a new message, with which I can not do anything. `Error: Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref`. – LN202 Mar 15 '22 at 14:19
  • Are you using another `ref`? If that's the case, create another reference using the `useRef` hook similar to the `cameraRef` – KKK Mar 16 '22 at 02:11
  • not that I know of – LN202 Mar 16 '22 at 16:07
0

Error: Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref.

This is because the guy who answered used TypeScript.

Simply replace

const cameraRef = useRef(null);

with

const cameraRef = useRef(null);

Bobby Joe
  • 1
  • 1