Connect my app to print qr code with p-touch cube brother printer (PT-P710BT)

134 Views Asked by At

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;
0

There are 0 best solutions below