React-Native-Camera Amazon Kindle 7 (5.1.1) Rear Camera captures Solid Green

Question

For some reason 2 Amazon Kindles that I have for testing running the latest updates (Android 5.1.1) is producing just a solid green colour when capturing with React-Native-Camera.

I've also tested on my Xiaomi Mi6, a Mi5 and also an Asus Zen 8" Tablet, all working fine, but the Kindle produces this weired outcome... What's really strange is the viewfinder is fine, it looks as if it'll take a picture but doesn't. The Front Facing camera is fine also.

Using react-native-camera: ^1.1.4

Capture.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';
import { Avatar } from 'react-native-elements';
import { RNCamera } from 'react-native-camera';
import { inject, observer } from 'mobx-react/native';
import ImagePicker from 'react-native-image-crop-picker';

let Type = null;

const typeArr = [
  { Name: 'Front', Type: RNCamera.Constants.Type.front },
  { Name: 'Back', Type: RNCamera.Constants.Type.back },
  { Name: null, Type: RNCamera.Constants.Type.back },
];

const styles = StyleSheet.create({
  entryTitle: {
    fontSize: 22,
    fontWeight: '700',
  },
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  loading: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
  },
});

@inject('store')
@observer
export default class Capture extends Component {
  constructor(props) {
    super(props);

    this.state = { Type: RNCamera.Constants.Type.back, CaptureInProgress: false };
    Type =
      this.props.navigation.state.params.Type == null
        ? null
        : this.props.navigation.state.params.Type;
  }

  state = {
    Type: typeArr.find(element => element.Name === Type).Type,
  };

  barcodeScanned(response) {
    this.props.store.CaptureStore.captureData = response.data;
    this.props.navigation.state.params.AfterCapture();
    this.props.navigation.goBack();
  }

  takePicture = async function () {
    if (this.camera) {
      this.setState({ CaptureInProgress: true });

      const options = { quality: 0.5, base64: true, fixOrientation: true };
      const data = await this.camera.takePictureAsync(options);
      this.props.store.CaptureStore.captureData = data.base64;
      this.props.navigation.state.params.AfterCapture();
      this.setState({ CaptureInProgress: false });

      this.props.navigation.goBack();
    }
  };

  openGallery() {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
      includeBase64: true,
    }).then((image) => {
      this.props.store.CaptureStore.captureData = image.data;
      this.props.navigation.state.params.AfterCapture();
      this.props.navigation.goBack();
    });
  }

  switchCamera() {
    if (this.state.Type === RNCamera.Constants.Type.back) {
      this.setState({ Type: RNCamera.Constants.Type.front });
    } else {
      this.setState({ Type: RNCamera.Constants.Type.back });
    }
  }

  renderTakePhotoButton() {
    if (this.props.navigation.state.params.Mode === 'photo') {
      return (
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Avatar
            medium
            rounded
            icon={{ name: 'refresh', color: 'grey', type: 'font-awesome' }}
            onPress={() => this.switchCamera()}
            activeOpacity={1}
          />
          <Avatar
            large
            rounded
            icon={{ name: 'camera', color: 'grey' }}
            onPress={() => this.takePicture()}
            activeOpacity={1}
          />
          <Avatar
            medium
            rounded
            icon={{ name: 'folder-open-o', color: 'grey', type: 'font-awesome' }}
            onPress={() => this.openGallery()}
            activeOpacity={1}
          />
        </View>
      );
    }
    return null;
  }

  render() {
    return (
      <View style={styles.container}>
        <View
          style={{
            height: '10%',
            padding: 10,
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={styles.entryTitle}>{this.props.navigation.state.params.Title}</Text>
        </View>

        <View
          style={{
            height: this.props.navigation.state.params.Mode === 'photo' ? '75%' : '90%',
            flexDirection: 'column',
          }}
        >
          <RNCamera
            ref={(ref) => {
              this.camera = ref;
            }}
            style={styles.preview}
            barCodeTypes={
              this.props.navigation.state.params.Mode === 'qr'
                ? [RNCamera.Constants.BarCodeType.qr]
                : []
            }
            type={this.state.Type}
            // flashMode={RNCamera.Constants.FlashMode.on}
            permissionDialogTitle="Permission to use camera"
            permissionDialogMessage="We need your permission to use your camera phone"
            onBarCodeRead={response => this.barcodeScanned(response)}
          />
        </View>

        {this.renderTakePhotoButton()}

        {this.state.CaptureInProgress && (
          <View style={styles.loading}>
            <ActivityIndicator size="large" color="#0000ff" />
          </View>
        )}
      </View>
    );
  }
}

Specifically, it all happens in 'takePicture', the afterCapture just handles the consumption of the base64 that is temporarily in the CaptureStore...

score 0 · Accepted Answer · answered Jun 15 '18 at 08:50

0

Fixed in React-Native-Camera 1.1.5

answered Jun 15 '18 at 08:50

API

125
2
12

React-Native-Camera Amazon Kindle 7 (5.1.1) Rear Camera captures Solid Green

1 Answers1