react-native-barcode-rnsvg

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'`
textPosition	`'top' \	'bottom'`	'bottom'
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