UNPKG

react-native-barcode-aspen

Version:
77 lines (61 loc) 1.75 kB
# react-native-barcode-builder-aspen React Native component to generate barcodes. Uses [JsBarcode](https://github.com/lindell/JsBarcode) for encoding of data. ## Getting started #### Step 1 Install `react-native-barcode-aspen`: yarn add react-native-barcode-aspen #### Step 2 Start using the component ```javascript import Barcode from 'react-native-barcode-aspen'; <Barcode value="Hello World" format="CODE128" /> ``` 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>textColor</code></td> <td>Color of the text (default: #000000)</td> </tr> <tr> <td><code>textSize</code></td> <td>Size of the text displayed with the barcode (default: 20) </td> </tr> <tr> <td><code>lineColor</code></td> <td>Color of the bars (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>