# @adrianso/react-native-barcode-builder

> React Native component to generate barcodes.

Latest version **1.0.13** (published 2024-12-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @adrianso/react-native-barcode-builder
pnpm add @adrianso/react-native-barcode-builder
yarn add @adrianso/react-native-barcode-builder
bun add @adrianso/react-native-barcode-builder
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.13 |
| Published | 2024-12-20 |
| First published | 2020-02-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Adrian So |
| Maintainers | adrianso |
| Keywords | react-native, barcode |

## Links

- npm: https://www.npmjs.com/package/@adrianso/react-native-barcode-builder
- Repository: https://github.com/adrianso/react-native-barcode-builder
- Homepage: https://github.com/adrianso/react-native-barcode-builder#readme
- Issues: https://github.com/adrianso/react-native-barcode-builder/issues
- npm.io page: https://npm.io/package/@adrianso/react-native-barcode-builder

## Dependencies (1)

- [jsbarcode](https://npm.io/package/jsbarcode.md) ^3.11.6

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.0.13 (latest) — 2024-12-20
- 1.0.13-beta.1 (beta) — 2024-12-20
- 1.0.12 — 2023-06-27
- 1.0.11 — 2022-10-04
- 1.0.10 — 2022-10-04
- 1.0.9 — 2020-04-13
- 1.0.8 — 2020-02-16
- 1.0.7 — 2020-02-16

## README

# @adrianso/react-native-barcode-builder

React Native component to generate barcodes.

Uses [JsBarcode](https://github.com/lindell/JsBarcode) for encoding of data.

Uses [@react-native-community/react-native-svg](https://github.com/react-native-community/react-native-svg) instead of [@react-native-community/art](https://github.com/react-native-community/art).

## Getting started

### Step 1

Install `@adrianso/react-native-barcode-builder` and dependencies:

    npm install @adrianso/react-native-barcode-builder react-native-svg

or

    yarn add @adrianso/react-native-barcode-builder react-native-svg

### Step 2

Start using the component

```javascript
import Barcode from '@adrianso/react-native-barcode-builder';

<Barcode value="Hello World" format="CODE128" />;
```

or you can invoke the barcodeToSvg function to convert any barcode to and SVG string

```javascript
import { barcodeToSvg } from '@adrianso/react-native-barcode-builder';

const svg = barcodeToSvg({
  value: 'Hello world!',
});

/* svg will now have the following value
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 167 100" preserveAspectRatio="xMinYMin slice">
        <path d="M0,0h2v100h-2z M3,0h1v100h-1z M6,0h1v100h-1z M11,0h2v100h-2z M16,0h1v100h-1z M18,0h1v100h-1z M22,0h1v100h-1z M24,0h2v100h-2z M28,0h1v100h-1z M33,0h2v100h-2z M37,0h1v100h-1z M39,0h1v100h-1z M44,0h2v100h-2z M48,0h1v100h-1z M50,0h1v100h-1z M55,0h1v100h-1z M59,0h4v100h-4z M64,0h1v100h-1z M66,0h2v100h-2z M69,0h2v100h-2z M73,0h2v100h-2z M77,0h3v100h-3z M81,0h1v100h-1z M85,0h2v100h-2z M88,0h1v100h-1z M92,0h4v100h-4z M97,0h1v100h-1z M99,0h1v100h-1z M102,0h1v100h-1z M105,0h4v100h-4z M110,0h2v100h-2z M114,0h1v100h-1z M116,0h1v100h-1z M121,0h1v100h-1z M126,0h1v100h-1z M129,0h2v100h-2z M132,0h2v100h-2z M136,0h2v100h-2z M139,0h2v100h-2z M143,0h3v100h-3z M147,0h1v100h-1z M151,0h2v100h-2z M154,0h2v100h-2z M159,0h3v100h-3z M163,0h1v100h-1z M165,0h2v100h-2z" fill="#000000"/>
      </svg>
*/
```

You can find more info about the supported barcodes in the [JsBarcode README](https://github.com/lindell/JsBarcode#supported-barcodes).

![](./images/example.png)

## Properties

<table style="width:80%">
  <tr>
    <th>Property</th>
    <th>Description</th>
  </tr>
  <tr>
    <td><code>value</code></td>
    <td>What the barcode stands for (required).</td>
  </tr>
  <tr>
    <td><code>format</code></td>
    <td>Which barcode type to use (default: CODE128).</td>
  </tr>
  <tr>
    <td><code>width</code></td>
    <td>Width of a single bar (default: 2)</td>
  </tr>
  <tr>
    <td><code>height</code></td>
    <td>Height of the barcode (default: 100)</td>
  </tr>
  <tr>
    <td><code>text</code></td>
    <td>Override text that is displayed.</td>
  </tr>
  <tr>
    <td><code>lineColor</code></td>
    <td>Color of the bars and text (default: #000000)</td>
  </tr>
  <tr>
    <td><code>background</code></td>
    <td>Background color of the barcode (default: #ffffff)</td>
  </tr>
  <tr>
    <td><code>onError</code></td>
    <td>Handler for invalid barcode of selected format</td>
  </tr>
</table>

---
_Source: https://npm.io/package/@adrianso/react-native-barcode-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._