react-native-camera (android): takePictureAsync() throws error

Question

After calling takePictureAsync() from react-native-camera, i'm getting this error:

{
  "framesToPop": 1,
  "nativeStackAndroid": [],
  "userInfo": null,
  "message": "Preview is paused - resume it before taking a picture.",
  "code": "E_TAKE_PICTURE_FAILED",
  "line": 2131,
  "column": 45,
  "sourceURL": "http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false"
}

So I tried using resumePreview() method before calling takePictureAsync() and now I'm getting a different error message:

{
  "framesToPop": 1,
  "nativeStackAndroid": [],
  "userInfo": null,
  "message": "takePicture failed",
  "code": "E_TAKE_PICTURE_FAILED",
  "line": 2131,
  "column": 45,
  "sourceURL": "http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false"
}

My component and usage i identical to that of https://react-native-community.github.io/react-native-camera/docs/rncamera

    <RNCamera
      ref={ref => {
        this.camera = 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);
      }}
    />




takePicture = async () => {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      try {
        this.camera.resumePreview();
        const data = await this.camera.takePictureAsync(options);
        console.log(data.uri);
      } catch (error) {
        console.log(JSON.stringify(error, null, 2));
      }
    }
  };

versions:

"react-native": "0.61.2",
"react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera.git",

Works fine on iOS. Is this an issue with the library or my implementation?

Answer 1

Try to use component as FaCC (Function as Child Components)! This way worked for me.

const PendingView = () => (
  <View
    style={{
      flex: 1,
      backgroundColor: 'lightgreen',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
    <Text>Waiting</Text>
  </View>
);

class ExampleApp extends PureComponent {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
        >
          {({ camera, status, recordAudioPermissionStatus }) => {
            if (status !== 'READY') return <PendingView />;
            return (
              <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
                <TouchableOpacity onPress={() => this.takePicture(camera)} style={styles.capture}>
                  <Text style={{ fontSize: 14 }}> SNAP </Text>
                </TouchableOpacity>
              </View>
            );
          }}
        </RNCamera>
      </View>
    );
  }

  takePicture = async function(camera) {
    const options = { quality: 0.5, base64: true };
    const data = await camera.takePictureAsync(options);
    //  eslint-disable-next-line
    console.log(data.uri);
  };
}

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,
  },
});

Answer 2

Is this an issue with the library or my implementation?

It appears to be a problem with the example code. I noticed the same thing and my solution is similar to FredVieira but doesn't use FaCC. It appears that the camera will not resume on Android unless the RNCamera component has children. So if you change the example from

<RNCamera ... /> 
<View ...>
          <TouchableOpacity ...>
            <Text style={{ fontSize: 14 }}> SNAP </Text>
          </TouchableOpacity>
 </View>

to

<RNCamera ...>
<View ...>
          <TouchableOpacity ...>
            <Text style={{ fontSize: 14 }}> SNAP </Text>
          </TouchableOpacity>
 </View>
</RNCamera>

it should work. So you can use a function or a component, just as long as the RNCamera has a child.