I have a React Native app (Expo managed) in which I generate a QR code and then need to print it. I have a print button that works with Expo Print, and it seems to work fine with printers that connect through Bluetooth. However, it appears that my printer (P-touch Cube PT-P710BT) only works with its designated app, 'Design&Print 2'.
I have tried to find the printer API to attempt connecting to this printer through my app, but I've had no luck. I also attempted to find a way to connect to the 'Design&Print 2' app, but couldn't find any helpful information. I'm new to React Native, and this is the first app I've worked on. I would greatly appreciate any assistance. This is my code:
import { View, Text, TouchableOpacity } from "react-native";
import { StyleSheet } from "react-native";
import * as Print from "expo-print";
import * as MediaLibrary from "expo-media-library";
import QRCode from "react-native-qrcode-svg";
import { useRef, useState, useEffect } from "react";
import { captureRef } from "react-native-view-shot";
function QRscreen({ route }) {
const { currentDate, currentTime, longitude, latitude, qrText } =
route.params;
const qrCodeData = JSON.stringify({
Date: currentDate,
Time: currentTime,
Longitude: longitude,
Latitude: latitude,
UserText: qrText,
});
const svg = useRef(null);
const [dataUrl, setDataUrl] = useState(null);
const handlePrint = async () => {
const html = `<img src="data:image/jpeg;base64,${dataUrl}"/>`;
await Print.printAsync({ html });
};
const handleSaveImg = async () => {
const { status } = await MediaLibrary.requestPermissionsAsync();
if (status === "granted" && dataUrl) {
const qrImg = await captureRef(svg.current, {
format: "jpg",
quality: 0.8,
});
const asset = await MediaLibrary.createAssetAsync(qrImg);
await MediaLibrary.createAlbumAsync("MyQRCodeAlbum", asset, false);
} else {
console.log("Invalid dataUrl format or missing image data.");
}
};
useEffect(() => {
const getDataUrl = () => {
svg.current.toDataURL(setDataUrl);
};
if (svg.current != null) {
getDataUrl();
}
}, [svg]);
return (
<View style={styles.container}>
<View>
<Text style={styles.header}>Qr Code</Text>
<QRCode
value={qrCodeData}
size={200}
getRef={(c) => (svg.current = c)}
/>
<TouchableOpacity
style={styles.printButton}
onPress={handlePrint}
activeOpacity={0.6}
>
<Text>Print</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.saveImageButton}
onPress={handleSaveImg}
activeOpacity={0.6}
>
<Text>Save as Image</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
header: {
alignSelf: "center",
fontSize: 25,
fontWeight: "bold",
marginBottom: 16,
},
printButton: {
alignItems: "center",
backgroundColor: "#DEB887",
padding: 10,
borderRadius: 8,
marginTop: 25,
},
saveImageButton: {
alignItems: "center",
backgroundColor: "#DEB887",
padding: 10,
borderRadius: 8,
marginTop: 10,
},
});
export default QRscreen;