react-native-barcode-rnsvg

A React Native barcode generator component using react-native-svg.

Features

• 🎯 SVG-based rendering - Uses react-native-svg for better performance and compatibility
• 📊 Multiple barcode formats - Supports CODE128, EAN, UPC, CODE39, ITF, MSI, and more
• 🎨 Highly customizable - Colors, dimensions, text positioning, margins
• 📱 React Native optimized - Works on both iOS and Android
• 💪 TypeScript support - Fully typed for better development experience

Installation

npm install react-native-barcode-rnsvg
# or
yarn add react-native-barcode-rnsvg

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install react-native-svg
# For iOS, you'll also need to run:
cd ios && pod install

Usage

Basic Example

import React from 'react';
import { View } from 'react-native';
import { Barcode } from 'react-native-barcode-rnsvg';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Barcode value="123456789012" format="CODE128" />
    </View>
  );
}

Advanced Example

<Barcode
  value="1234567890128"
  format="EAN13"
  width={3}
  height={100}
  displayValue={true}
  fontSize={18}
  lineColor="#000000"
  background="#FFFFFF"
  margin={20}
  onError={(error) => console.log('Barcode error:', error)}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | Required | The value to encode in the barcode | | format | BarcodeFormat | 'CODE128' | Barcode format to use | | width | number | 2 | Width of individual bars | | height | number | 100 | Height of the barcode | | displayValue | boolean | true | Whether to display the value below/above the barcode | | text | string | value | Custom text to display (if different from value) | | fontSize | number | 20 | Font size for the displayed text | | textAlign | 'left' \\| 'center' \\| 'right' | 'center' | Text alignment | | textPosition | 'top' \\| 'bottom' | 'bottom' | Position of the text relative to barcode | | textMargin | number | 2 | Margin between barcode and text | | background | string | '#FFFFFF' | Background color | | lineColor | string | '#000000' | Color of the barcode bars | | margin | number | 10 | Margin around the entire barcode | | marginTop | number | margin | Top margin (overrides margin) | | marginBottom | number | margin | Bottom margin (overrides margin) | | marginLeft | number | margin | Left margin (overrides margin) | | marginRight | number | margin | Right margin (overrides margin) | | flat | boolean | false | Flatten the barcode (remove start/end characters) | | onError | (error: Error) => void | undefined | Error callback function |

Supported Formats

• CODE128 - CODE128 (default)
• EAN13 - EAN-13
• EAN8 - EAN-8
• EAN5 - EAN-5 (supplemental)
• EAN2 - EAN-2 (supplemental)
• UPC - UPC-A
• CODE39 - CODE39
• ITF14 - ITF-14
• ITF - Interleaved 2 of 5
• MSI - MSI Plessey
• MSI10 - MSI Plessey with mod 10 check digit
• MSI11 - MSI Plessey with mod 11 check digit
• MSI1010 - MSI Plessey with mod 1010 check digits
• MSI1110 - MSI Plessey with mod 1110 check digits
• pharmacode - Pharmaceutical Binary Code
• codabar - Codabar

Migration from react-native-barcode-builder

This library provides a drop-in replacement for react-native-barcode-builder:

// Before (react-native-barcode-builder)
import { BarCodeBuilder } from 'react-native-barcode-builder';

<BarCodeBuilder
  value="123456789012"
  format="CODE128"
  width={2}
  height={100}
  lineColor="#000000"
  background="#FFFFFF"
/>

// After (react-native-barcode-rnsvg)
import { Barcode } from 'react-native-barcode-rnsvg';

<Barcode
  value="123456789012"
  format="CODE128"
  width={2}
  height={100}
  lineColor="#000000"
  background="#FFFFFF"
/>

Why react-native-svg?

• Modern and maintained - react-native-svg is actively maintained
• Better performance - SVG rendering is more efficient
• Cross-platform consistency - Same rendering on iOS and Android
• No deprecated dependencies - Doesn't rely on @react-native-community/art

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT