react-native-barcode

Getting started

$ npm install react-native-barcode-zxing --save

Mostly automatic installation

$ react-native link react-native-barcode-zxing

Manual installation

iOS

1. please update rn to 0.60.* and use autolink

Android

1. please update rn to 0.60.* and use autolink

Windows

Read it! :D

1. In Visual Studio add the RNBarcode.sln in node_modules/react-native-barcode/windows/RNBarcode.sln folder to their solution, reference from their app.
2. Open up your MainPage.cs app

• Add using Barcode.RNBarcode; to the usings at the top of the file
• Add new RNBarcodePackage() to the List<IReactPackage> returned by the Packages method

Usage Encode

import React, { Component } from 'react';
import { StyleSheet, View, Picker, Button, Image } from 'react-native';
import RNBarcode from 'react-native-barcode-zxing';

export default class EncodeApp extends Component {

  constructor(props) {
    super(props);
    
    this.onEncodePress = this.onEncodePress.bind(this);

    this.state = {
      imagesrc: ""
    }
  }

  onEncodePress() {
    const self = this;
    const options = {
      'type' : 'pdf417', // types
      'code' : '12345',
      'width' : 200,
      'height' : 200
    } 
    RNBarcode.encode(options, (error, blob) => {
      if (error) {
        console.error(error);
      } else {
        let baseImg = `data:image/png;base64,${blob}`;
        self.setState({
          imagesrc: baseImg
        })
      }
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Button
          title="Encode"
          onPress={this.onEncodePress}
          color="#841584"></Button>
        <Image style={styles.barcode} ref='barcode' source={{ uri: this.state.imagesrc }}></Image>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  barcode: {
    width: 200,
    height: 200,
    backgroundColor: '#FF0000',
  }
});

Usage BarcodeView

import { BarcodeView } from 'react-native-barcode-zxing';

export default class BarcodeComponent extends Component {

    render() {
        return (
            <View>
                <BarcodeView text="This is a Data Matrix by TEC-IT"
                    format="DATA_MATRIX"
                    style={{ height: 200, width: 200 }} />
            </View>
        )
    }
}

Support Types

• qrcode
• code39
• isbn10
• code128
• upca
• upce
• ean13
• ean8
• itf
• databar
• databarexp
• isbn13
• pdf417
• codabar
• aztec