React Native - useRef is giving null value on RNCamera

Question

I am using react-native-camera for the first time and I am using functional component for that. I want to open the camera on button click but using the ref is not working. Here is my code :

const camContainer = () => {
  const cameraRef = useRef(null);

  useEffect(() => {
    console.log(cameraRef);
  }, [cameraRef]);

  const openCamera = () => {
    const options = {quality: 0.5, base64: true};
    // cameraRef.current.takePictureAsync(options);
    console.log(cameraRef);
  };

  return (
    <TouchableOpacity onPress={() => openCamera()}>
      <Text>Open Camera</Text>
      {!cameraRef && (
        <View>
          <RNCamera ref={cameraRef} style={{flex: 1, alignItems: 'center'}} />
        </View>
      )}
    </TouchableOpacity>
  );
};

I logged cameraRef using useEffect but the cameraRef.current was still null, I cannot understand how do I open the camera then ?

do you even need the ref? i think removing !cameraRef should show the camera for your case. — Gene Sy, Mar 14 '20 at 08:24
I removed cameraRef, but using the cameraRef I cannot open the camera, help me @GeneSy — suvodipMondal, Mar 15 '20 at 15:36

score -2 · Answer 1 · answered Jul 27 '20 at 20:17

-2

in docs of RNCamera, it should be like this

<Camera
  ref={ref => {
    this.camera = ref;
  }}
/>;
// ...
snap = async () => {
  if (this.camera) {
    let photo = await this.camera.takePictureAsync();
  }
};

answered Jul 27 '20 at 20:17

M. Koch

27
3

React Native - useRef is giving null value on RNCamera

1 Answers1