expo-barcode

expo-barcode

Library to generate barcodes and qr codes natively using Kotlin and Swift, integrated with expo.

Supported Frameworks

• React Native - ❌ - See RN Version
• Expo - ✅

Supported Architectures

• Android - ✅
• Ios - ❌
• Windows - ❌
• Mac - ❌
• Linux - ❌

Add the package to your npm dependencies

npm install expo-barcode

yarn add expo-barcode

Configure for iOS

Run npx pod-install after installing the npm package.

Configure for Android

Usage

Available methods

import {
	BarcodeView,
	QRCodeView,
	generateBarcode,
	generateQRCode,
} from "expo-barcode";

Using the components

Simple example

import { QRCodeView } from "expo-barcode";

export default function App() {
	return (
		<View style={styles.container}>
			<QRCodeView value={"Hello World!"} width={250} height={250} />
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: "center",
		justifyContent: "center",
	},
});

import { BarcodeView, QRCodeView } from "expo-barcode";
import { useState } from "react";
import { StyleSheet, View, Text, TextInput, Button } from "react-native";

export default function App() {
	const [value, setValue] = useState("");
	const [barcodeValue, setBarcodeValue] = useState("");
	const [toggleGenCode, setToggleGenCode] = useState("QR");

	return (
		<View style={styles.container}>
			<Text>Result: </Text>
			{barcodeValue &&
				(toggleGenCode === "QR" ? (
					<QRCodeView value={barcodeValue} width={250} height={250} />
				) : (
					<BarcodeView value={barcodeValue} width={300} height={100} />
				))}
			<TextInput
				value={value}
				onChangeText={setValue}
				placeholder="Type Here"
			/>
			<Button title="Generate QR Code" onPress={() => setBarcodeValue(value)} />
			<Button
				title="Toggle QR/Barcode"
				onPress={() =>
					setToggleGenCode(toggleGenCode === "QR" ? "Barcode" : "QR")
				}
			/>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: "center",
		justifyContent: "center",
	},
});

Using generating functions

import { generateBarcode, generateQRCode } from "expo-barcode";

async function waitForIt() {
    const qrCodeGenerated = await generateQRCode("Hello", 200, 200);

    console.log(qrCodeGenerated);

    const barCodeGenerated = await generateBarcode("Hello", 300, 200);

    console.log(barCodeGenerated);
}

waitForIt();

Contributors

• Gabriel Logan - Creator

License

MIT

API documentation

• Documentation for the main branch
• Documentation for the latest stable release

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release. If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.