react-native-barcoder v1.0.0

npm install react-native-barcoder

A minimal package for displaying a barcode on react-native.

import Barcode from 'react-native-barcoder';

const options = { /* add your options here*/ }

<Barcode value="barcoder" options={options}/>

features

• Support for all types of barcodes including EAN/UPC
• No external dependencies required for running the code
• Easy customization taking jsbarcode as an example

options

set up the options parameter

interface Options = {
  // barcode display
  format: Format;
  width: number;
  height: number;
  background: string;
  color: string;
  displayValue: boolean;
  // EAN settings
  flat: boolean;
  lastChar: boolean;
  // text display
  font: string;
  fontSize: number;
  fontStyle: 'normal' | 'italic';
  fontWeight: 'normal' | 'bold' | '100' ~ '900';
  textAlign: 'left' | 'center' | 'right';
  textMargin: number;
  textColor?: string;
};

regarding each value inside options:

formats

Here is a list of supported formats

CODE39 | CODE128 | CODE128A | CODE128B | CODE128C
EAN13 | EAN8 | EAN5 | EAN2
UPC | UPCE
ITF14 | ITF
MSI | MSI10 | MSI11 | MSI1010 | MSI1110
pharmacode | codabar | GenericBarcode

margins

you can set the margins directly on the element:

<Barcode value="barcoder" options={options} marginLeft={40}/>

development

You can try out the code locally using expo after cloning!
Change the main directory in the package.json to 'index.js'

{
    "name": "react-native-barcoder",
    "main": "dist/index.js", <-- change this to "index.js"
    ...
}

Then customize the App.tsx file as you like and run

npm run build
npm run dev

aknowledgements

This code relies on jsbarcode's math files to transform the value into a binary.

contributions

Any contributions are welcome!