Expo-barcode-generator NPM

Expo Barcode Generator

This is a React Native component that generates barcodes using the JSBarcode library and renders them using the react-native-svg package. The component supports both Expo Web, IOS and Android .

Expo Compatibility

💡 For Expo SDK 50, use version 2
💡 For Expo SDK 49 and under, use version 1

Installation

NPM:

npm i expo-barcode-generator

YARN:

yarn add expo-barcode-generator

Usage

import React from 'react';
import { View } from 'react-native';
import { Barcode } from 'expo-barcode-generator';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Barcode
        value="123456789999"
        options={{ format: 'UPC', background: 'lightblue' }}
        rotation={-5}
      />
    </View>
  );
}

Options

The options object allows you to customize the appearance and behavior of the barcode. The available options are as follows:

Option	Description	Default Value
value	The value to be encoded into the barcode. (required)	-
width	The width of each barcode unit.	2
height	The height of the barcode.	100
displayValue	A boolean indicating whether to display the value as text below the barcode.	true
fontOptions	The font options for the displayed text.	'bold'
text	The text to be displayed below the barcode.	''
textAlign	The alignment of the displayed text. Possible values: 'left', 'center', 'right'.	'center'
textPosition	The position of the displayed text relative to the barcode. Possible values: 'top', 'bottom'.	'bottom'
textMargin	The margin between the barcode and the displayed text.	2
fontSize	The font size of the displayed text.	20
background	The background color of the barcode.	'#ffffff'
lineColor	The color of the barcode lines.	'#000000'
marginTop	The top margin of the barcode.	10
marginBottom	The bottom margin of the barcode.	10
marginLeft	The left margin of the barcode.	10
marginRight	The right margin of the barcode.	10
rotation	The rotation angle of the barcode in degrees.	-