1.0.4 • Published 9 months ago
rn-barcode-renderer v1.0.4
rn-barcode-renderer
A Barcode and Qr Code renderer for React Native based on @shopify/react-native-skia.
Features
- Barcode render
- Qr code render
- Add gradient
- Optional logotype for qr code
Installation
Start by installing the peer dependency of rn-barcode-renderer:
yarn add @shopify/react-native-skiaThen install rn-barcode-renderer:
yarn add rn-barcode-rendererUsage
Barcode
import { BarcodeView } from "rn-barcode-renderer";
// Simple usage
return <BarcodeView format="CODE128" value="123456" />;
// Add background, bars color, border raidus, background blur effect, padding...
return (
<BarcodeView
format="CODE128"
value="123456"
padding={10}
borderRadius={10}
color="blue"
bgColor="lightgray"
bgBlur={5}
/>
);Barcode Props
| Prop Name | Type | Description |
|---|---|---|
| value | string (required) | The value of the barcode. |
| format | Format (required) | The format of the barcode. |
| barWidth | number | The width of each bar in the barcode. Default is 2. |
| height | number | The height of the barcode. Default is 100. |
| color | string | The color of the barcode lines. Default is "#000000". |
| bgColor | string | The background color of the barcode. Default is "#ffffff". |
| onError | () => void | Callback function to handle errors during barcode encoding. Should be wrapped in useCallback. |
| maxWidth | number | The maximum width of the barcode. If specified, the barcode will be scaled down to fit within this width. |
| padding | number | The padding around the barcode. Default is 0. |
| borderRadius | number | The border radius of the wrapper rectangle around the barcode. Default is 0. |
| bgBlur | number | The blur radius for the background of the barcode. Default is 0. |
Qr Code
import { QrCode } from "rn-barcode-renderer";
// Simple usage
return <QrCode value="Hello World!" />;
// Add background, color, border raidus, background blur effect, padding, change size...
return (
<QrCode
value="Hello World!"
color="blue"
bgColor="lightgray"
padding={10}
borderRadius={8}
size={150}
/>
);Render QR Code with logo
import { QrCode, QrLogo } from "rn-barcode-renderer";
return (
<QrCode
value="Hello World!"
renderLogo={(defaultProps) => (
<QrLogo
src={require("./assets/favicon.png")}
padding={2}
borderRadius={9999}
bgColor="white"
{...defaultProps}
/>
)}
/>
);Qr Code props
| Prop name | Type | Description |
|---|---|---|
| value | string (required) | The value of the QR code. |
| size | number | The size of the QR code. Default value: 100. |
| color | string | The color of the QR code. Default value: "black". |
| bgColor | string | The background color of the QR code. Default value: "white". |
| borderRadius | number | The border radius of the QR code. Default value: 0. |
| bgBlur | number | The blur of the background of the QR code. Default value: 0. |
| padding | number | The padding of the QR code. Default value: 0. |
| ecl | ErrorCorrectionLevel | The error correction level of the QR code. Default value: "M". |
| onError | () => void | Callback function to handle errors. Should be wrapped in useCallback. |
| renderLogo | (defaultProps: { qrSize: number }) => React.ReactNode | Function to render a logo on the QR code. Receives the default props: { qrSize: number }. |
Methods (BarcodeView and QrCode)
| Method | Description |
|---|---|
getBytes(format?: ImageFormat, quality?: number) | Returns the barcode image as a Uint8Array. |
getBase64(format?: ImageFormat, quality?: number) | Returns the barcode image as a base64-encoded string. |
getImageInfo() | Returns information about the barcode image. |
Contributing
- Fork and clone the repository
- Install the project dependencies by running yarn install.
- To develop the library in unison with the example app you can run yarn dev
- Implement your changes, as well as any documentation.
- Create a changeset for your changes by running yarn changeset.
- Open a pull request with your changes and changeset.
License
MIT