writing type or data of scanned barcode into text inputs on REACT-NATIVE

Question

Here is my App.js file

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';

export default class BarcodeScannerExample extends React.Component {
  state = {
    hasCameraPermission: null,
  }

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({hasCameraPermission: status === 'granted'});
    }

  render() {
    const { hasCameraPermission } = this.state;

    if (hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }
    return (
      <View style={{width: 500 , height:500}}>
        <BarCodeScanner
          onBarCodeScanned={this.handleBarCodeScanned}
          style={StyleSheet.absoluteFill}
        />
      </View>
    );
  }

  handleBarCodeScanned = ({ type, data }) => {

    alert(`Bar code with type ${type} and data ${data} has been scanned!`);


  }
}

it just alert the reading type and data of scanned code. I want to write this type and data to textboxes or textinputs.

Props

type (string) -- Camera facing. Use one of BarCodeScanner.Constants.Type. Use either Type.front or Type.back. Same as Camera.Constants.Type. Default: Type.back.

barCodeTypes (Array) -- An array of bar code types. Usage: BarCodeScanner.Constants.BarCodeType. where codeType is one of the listed above. Default: all supported bar code types. For example: barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}

onBarCodeScanned (function) -- A callback that is invoked when a bar code has been successfully scanned. The callback is provided with an object of the shape { type: BarCodeScanner.Constants.BarCodeType, data: string }, where the type refers to the bar code type that was scanned and the data is the information encoded in the bar code (in this case of QR codes, this is often a URL).

Answer 1

already shared answer is a proper one for this question, I am just sending a different solution which we don't need to use the constructor function.

import React from 'react';
import { Text, View } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';

export default class BarcodeScannerExample extends React.Component {
  state = {
    hasCameraPermission: null,
    barcodeType: '',
    barcodeData: ''
  };

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  }

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({
      barcodeType: type,
      barcodeData: data
    });
    /*alert(`Bar code with type ${type} and data ${data} has been scanned!`);*/
  };

  render() {
    const { hasCameraPermission } = this.state;

    if (hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          width: 500,
          height: 500,
          backgroundColor: 'white',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <BarCodeScanner
          onBarCodeScanned={this.handleBarCodeScanned}
          style={{ width: 300, height: 300 }}
        />
        <Text
          style={{
            display: 'flex',
            width: '75%',
            alignItems: 'center',
            flexWrap: 'wrap',
            padding: '2%'
          }}
        >
          Bar code with type {this.state.barcodeType} and data {this.state.barcodeData} has been
          scanned!
        </Text>
      </View>
    );
  }
}

Answer 2

First, we are going to define a constructor with super:

constructor(props){
    super(props);
    this.state = { 
            hasCameraPermission: null,
            barcodeData: "",
            barcodeType: ""
    };
}

Then the render method same :

render() {
      if (this.state.hasCameraPermission === null) {
        return <Text>Requesting for camera permission</Text>;
      } else if (this.state.hasCameraPermission === false) {
        return <Text>No access to camera</Text>;
      }
      return (
            <View style={{width: 500 , height:500}}>
              <BarCodeScanner
                onBarCodeScanned={this.handleBarCodeScanned.bind(this)}
                style={StyleSheet.absoluteFill}
              />
              <Text>Bar code with type {this.state.barcodeType} and data {this.state.barcodeData} has been scanned!</Text>
            </View>
      );
  }

handleBarCodeScanned -method:(We have to stringify our objects.)

handleBarCodeScanned(type,data){
  this.setState({
        barcodeType : JSON.stringify(type),
        barcodeData : JSON.stringify(data)
  });
}; 

There are the whole codes of write data and type of scanned barcode to text.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';

export default class BarcodeScannerExample extends React.Component {

  constructor(props){
    super(props);
    this.state = { 
            hasCameraPermission: null,
            barcodeData: "",
            barcodeType: ""
    };
}
  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({hasCameraPermission: status === 'granted'});
    }

    render() {
      if (this.state.hasCameraPermission === null) {
        return <Text>Requesting for camera permission</Text>;
      } else if (this.state.hasCameraPermission === false) {
        return <Text>No access to camera</Text>;
      }
      return (
            <View style={{width: 500 , height:500}}>
              <BarCodeScanner
                onBarCodeScanned={this.handleBarCodeScanned.bind(this)}
                style={StyleSheet.absoluteFill}
              />
              <Text>Bar code with type {this.state.barcodeType} and data {this.state.barcodeData} has been scanned!</Text>
            </View>
      );
  }

handleBarCodeScanned(type,data){
  this.setState({
        barcodeType : JSON.stringify(type),
        barcodeData : JSON.stringify(data)
  });
}; 
}

Answer 3

Ok the question was quite unclear first but I think I might get what you mean. So you want to display your data from a bar-code in some text-form. For that we have to change couple of things first:

state = {
   hasCameraPermission: null, //we don't need that.
}

Instead we are going to define the state at the constructor:

constructor(props){
    this.state = { 
            hasCameraPermission: null,
            barcodeData: "",
            barcodeType: ""
    };
}

Then the render method becomes this:

render() {
    if (this.state.hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    } else if (this.state.hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }
    return (
          <View style={{width: 500 , height:500}}>
            <BarCodeScanner
              onBarCodeScanned={this.handleBarCodeScanned.bind(this)}
             style={StyleSheet.absoluteFill}
            />
            <Text>Bar code with type {this.state.barcodeType} and data {this.state.barcodeData} has been scanned!</Text>
          </View>
    );
}

So now we go to the handleBarCodeScanned-method:

handleBarCodeScanned ( type, data )  {
    this.setState({
          barcodeType : type,
          barcodeData : data
    });
}

I think this might be it.