react-native-1d-barcodes

A React Native component to generate one-dimensional (1D) barcodes.

Supported 1D barcode types:

• [x] UPC-A
• [ ] UPC-E (in progress)
• additional types will be added in future minor versions

Installation

npm i react-native-1d-barcodes --save
 # or
yarn add react-native-1d-barcodes

import React, { Component } from 'react'
import { View } from 'react-native';
import { Barcode, Formats } from 'react-native-1d-barcodes';

export default class DisplayBarcode extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Barcode
            bgColor={'#FFFFFF'}
            fgColor={'#000000'}
            format={Formats.UPC_A}
            value={'01234567890'}
            width={250}
        />
      </View>
    );
  }
}

Usage

UPC-A

• Provide an 11-digit numeric string as value and the module will calculate the check digit and render the UPC barcode in a WebView canvas.
• Module will accept 12-digit strings if your data already includes a valid check digit. (Note: check digit is not validated in this instance)

Available Props:

prop | type | default value ----------|----------------------|-------------- value | string (numeric) | 012345678905 format | string | Formats.UPC_A width | number | 250 bgColor | string (CSS color) | "#FFFFFF" fgColor | string (CSS color) | "#000000"

Note: height is calculated based on provided width.

References

• https://www.gs1.org/standards/barcodes/ean-upc
• https://en.wikipedia.org/wiki/Universal_Product_Code#Encoding
• https://www.gtin.info/upc/
• https://github.com/cssivision/react-native-qrcode