use portable printer with expo managed app

Question

I've developed a React Native app using the Expo managed workflow. Currently, I'm facing challenges integrating Expo's expo-print with a Bluetooth printer, specifically the Brother P-TOUCH. Despite having a functional print button, I can't seem to locate the connected portable printer through Bluetooth. At the buttom is what it looks like when I press the print button and when I press "All Printers" I can't find the printer, even though I found it on the bluetooth list.

I'm uncertain whether the issue lies with the printer, perhaps requiring its designated app for functionality, or if there's a need for npx expo prebuild to enable compatibility with libraries designed for printing that might not work seamlessly with the managed workflow. It could also be a combination of both.

Has anyone successfully connected a React Native app (Expo managed workflow) to a portable printer, specifically the Brother P-TOUCH? If so, could you provide guidance on the steps involved and any pitfalls to avoid?

Additionally, I'm open to suggestions for alternative portable printers. I've attempted various solutions without success, and currently, my only workaround is saving to the gallery and using the Brother app for printing.

I appreciate any insights or advice on resolving this printing connectivity issue. Thanks in advance!

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, useId } from "react";
import { captureRef } from "react-native-view-shot";

function QRscreen({ route }) {
  const { currentDate, currentTime, longitude, latitude, qrText } =
    route.params;
  const qrId = useId();

  const qrCodeData = JSON.stringify({
    Id: qrId,
    Date: currentDate,
    Time: currentTime,
    Longitude: longitude,
    Latitude: latitude,
    UserText: qrText,
  });

  const svg = useRef(null);
  const imgRef = useRef();

  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(imgRef, {
        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>
        <View ref={imgRef} collapsable={false}>
          <Text style={styles.idHeadline}>
            id: {qrId.substring(2, qrId.length - 1)}
          </Text>
          <QRCode
            value={qrCodeData}
            size={200}
            getRef={(c) => (svg.current = c)}
          />
        </View>
        <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,
  },
  idHeadline: {
    color: "white",
    fontWeight: "bold",
    fontSize: 15,
  },
});

export default QRscreen;