expo-barcode
v0.0.3
Published
Library to generate barcodes and qr codes natively using Kotlin and Swift, integrated with expo.
Downloads
45
Maintainers
Readme
expo-barcode
UNDER DEVELOPMENT
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
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.