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

``bash
npm install react-native-barcode-rnsvg


or


yarn add react-native-barcode-rnsvg
`

$3

Make sure you have these peer dependencies installed:

`bash
npm install react-native-svg


For iOS, you'll also need to run:


cd ios && pod install
`

Usage

$3

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

export default function App() {
return (



);
}
`

$3

`tsx
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:

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

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

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

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