react-native-camera onBarCodeRead not working

Question

Im having issues with onBarCodeRead using react-native.

The expected behaviour: App consoles log barcode type and data.

Actual behaviour: Apps just open the camera, and _onBarCodeRead is never called.

Any explanation would be satisfatory.

Here is the code:

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';
import Camera from 'react-native-camera';

class camera_app extends Component {

  constructor(props) {
    super(props);
    this.state = {
      showCamera: true,
    };
  }

  renderCamera = () => {
    if(this.state.showCamera) {
      return (
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.container}
          aspect={Camera.constants.Aspect.fill}
          onBarCodeRead={this._onBarCodeRead}>
        </Camera>
      );
    } else {
      return (
        <View></View>
      );
    }
  }

  render() {
    return (
      this.renderCamera()
    );
  }

  _onBarCodeRead = (e) => {
    this.setState({showCamera: false});
    alert("Barcode Found!",
          "Type: " + e.type + "\nData: " + e.data);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "transparent",
  },
});

AppRegistry.registerComponent('rn_camera', () => camera_app);

score 1 · Accepted Answer · answered Nov 25 '17 at 05:42

I tried your code and it works just fine. Just change the alert function so it will show the type and data of the barcode. Also try to check the barcode type if it's supported or not https://github.com/lwansbrough/react-native-camera

alert("Barcode Found! \nType: " + e.type + "\nData: " + e.data);

react-native-camera onBarCodeRead not working

1 Answers1