React-native-camera: takePictureAsync() does not return data (android)

[grkemtneri]

Question

To Do First

• [ +] Take a look in the README
• [ +] Take a look in the docs
• [+ ] Take a look in the QA

Ask your Question
I'm using

"react": "16.9.0",
"react-native": "0.61.2",
"react-native-camera": "^3.7.1",
"react-native-fs": "^2.14.1"

when ı use takePictureAsync. it did not return anything. I press button and emilator is petrify

my code is here:

import React, {PureComponent} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {RNCamera} from 'react-native-camera';
var RNFS = require('react-native-fs');

import {dirPicutures} from './src/utils/dirStorage';

const moveAttachment = async (filePath, newFilepath) => {
  return new Promise((resolve, reject) => {
    RNFS.mkdir(dirPicutures)
      .then(() => {
        RNFS.moveFile(filePath, newFilepath)
          .then(() => resolve(true))
          .catch(error => reject(error));
      })
      .catch(err => reject(err));
  });
};

export default class App extends PureComponent {
  saveImage = async filePath => {
    try {
      // set new image name and filepath
      const newImageName = `merhabalar.jpg`;
      const newFilepath = `${dirPicutures}/${newImageName}`;
      const imageMoved = await moveAttachment(filePath, newFilepath);
      console.log('image moved', imageMoved);
    } catch (error) {
      console.log(error);
    }
  };

  takePicture = async () => {
    if (this.camera) {
      const options = {
        quality: 0.5,
        base64: true,
        forceUpOrientation: true,
        fixOrientation: true,
      };
      this.camera.takePictureAsync(options).then(photo =>{
        console.log(photo)
        console.log('merhabalar')
      });

    }
  };

  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          captureAudio={false}
          style={styles.preview}
          androidCameraPermissionOptions={{
            title: 'Permission to use camera',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
        />
        <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center'}}>
          <TouchableOpacity
            onPress={this.takePicture.bind(this)}
            style={styles.capture}></TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    position: 'absolute',
    bottom: 10,
    width: 60,
    height: 60,
    borderRadius: 100,
    borderWidth: 4,
    borderColor: 'black',
  },
});

[cristianoccazinsp]

I don't think the camera works on an Android emulator, only on iOS' (although it returns black pictures).

[grkemtneri]

Yes, I tried on my android device.it's work . it doesn work on Android Emulator

[chenliwu]

solution

1. Try adding props：autoFocus = {RNCamera.Constants.AutoFocus.off}
2. Run again, the front camera can take pictures and return data normally.