Can this package be used with expo ?
0xPierre opened this issue · comments
Hello,
Is it possible to use this package with expo without ejecting my application ?
Thank you.
Has anyone tried this? I really have no idea :(
@0xPierre can you try to use it on your expo project and tell us if you succeed ?
If not, can you provide us the error message ? Thanks
@AllInOneYT @0xPierre I used it with Expo managed workflow. Here is how to do it:
- install the package
- build the app with eas:
eas build --profile development --platform android - download the apk build to your device
- run your dev client with
expo start --dev-client - play with the app in your device
But I did not succeed to print well formatted receipts yet, so I am switching to another package.
I met this error
@AllInOneYT @0xPierre I used it with Expo managed workflow. Here is how to do it:
- install the package
- build the app with eas:
eas build --profile development --platform android- download the apk build to your device
- run your dev client with
expo start --dev-client- play with the app in your device
But I did not succeed to print well formatted receipts yet, so I am switching to another package.
So basically you used the code provided in the example and were able to produce a receipt via the apk? Its ok if it isn't well-formatted Im currently in a lot of trouble as Ive developed my whole app using Expo React Native and now I cant find a suitable package that I can use to test printers on using RN.
Please also let me know if you've had any luck in this case too.
Hello,
Is it possible to use this package with expo without ejecting my application ?
Thank you.
What did you end up doing?
@ZYBORX I ended up using react-native-thermal-receipt-printer package. But react-native-thermal-printer worked as well with expo eas.
I switched in hope to improve receipt formatting but it was unsuccessful.
At least, thermal printing worked well with any printer when using in production.
As you said, I just used the example given in the doc. With eas, you can use native packages without ejecting from Expo. You just have to build a dev app to install in your device to run your app instead of running it inside Expo Go.
@Marcados Yes Im more than willing to build dev app for testing purposes because Im really stuck on this right now.
Could you just confirm a few things:
- Did you alter the config's IP and port, or did you leave the default config untouched?
- Did you have to take any extra steps to implement it? (other than the following: install the package, use the example code,
build the app, install apk, connect both devices via Bluetooth, opened the app and pressed button to print)
No other step. Here you can see my custom hook to use the printer :
import { BLEPrinter, IBLEPrinter } from "react-native-thermal-receipt-printer";
export default function usePrint() {
useEffect(() => {
async function initPrinter() {
await BLEPrinter.init();
const printers = await BLEPrinter.getDeviceList();
setPrintersList(printers);
// here I auto-select the first printer
await onLinkPrinterPress(printers[0]);
}
initPrinter();
}, []);
const onLinkPrinterPress = async (printer: IBLEPrinter) => {
setLinkedPrinter(printer);
await BLEPrinter.connectPrinter(printer.inner_mac_address);
};
const onPrintPress = () => {
try {
BLEPrinter.printText("Receipt content");
} catch ({ message }) {
console.log("Erreur:", message);
}
};
return {
onLinkPrinterPress,
onPrintPress
}
}
@Marcados but the code you provided is implementing another package. Could you share the link for its documentation? and also could you share the code you used to implement this package (react-native-thermal-printer) the one you said didn't have good formatting options.
I dont have the old code for the current package. This is mainly the same for this one.
@Marcados Oh ok. This is better too in the sense that it detects the printer automatically. But still do you remember if you had to manually set IP and port for each printer in the old package (react-native-thermal-printer)?
Also is this the package being used in the code you have provided https://www.npmjs.com/package/react-native-thermal-receipt-printer ?
@Marcados what did you do for this step of implementing the package:
because expo projects don't have a folder called android.
@Marcados The code you provided is giving this error
@Marcados Tried implementing the code you provided but I'm facing a lot of issues. Could you kindly provide a drive link to a zip file of your project? Just want to check with a printer and see how the whole thing works.
@ZYBORX sorry buddy, I can copy paste the part of the code you are looking for, as I did, but I do not give a protected source code.
@Marcados could you then kindly spare a few minutes and take a look at my code that I've written for testing a printer?
Screen code:
import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, TextInput, Button } from 'react-native';
import usePrint from "./usePrint";
const usePrintScreen = () => {
const { onPrintPress, onPrintPress2 } = usePrint();
return (
Get Print
<Button
onPress={() => {
onPrintPress()
}}
title={print}
/>
<Button
onPress={() => {
onPrintPress2()
}}
title={print 2}
/>
)
}
export default usePrintScreen;
Component code:
import { BLEPrinter, IBLEPrinter } from "react-native-thermal-receipt-printer";
import { useEffect } from "react";
export default function usePrint() {
useEffect(() => {
async function initPrinter() {
console.log("printer connected")
await BLEPrinter.init();
const printers = await BLEPrinter.getDeviceList();
setPrintersList(printers);
// here I auto-select the first printer
await onLinkPrinterPress(printers[0]);
}
initPrinter();
}, []);
const onLinkPrinterPress = async (printer: IBLEPrinter) => {
setLinkedPrinter(printer);
await BLEPrinter.connectPrinter(printer.inner_mac_address);
};
const onPrintPress = () => {
try {
console.log("print command sent")
BLEPrinter.printText("Receipt content");
} catch ({ message }) {
console.log("Erreur:", message);
}
};
const onPrintPress2 = async () => {
try {
console.log("printer connected")
await BLEPrinter.init();
const printers = await BLEPrinter.getDeviceList();
setPrintersList(printers);
setLinkedPrinter(printers[0]);
await BLEPrinter.connectPrinter(printer.inner_mac_address);
console.log("print command sent")
BLEPrinter.printText("Receipt content");
} catch ({ message }) {
console.log("Erreur:", message);
}
};
return {
onLinkPrinterPress,
onPrintPress,
onPrintPress2
}
}
I am unable to test it with a physical printer right now so if you could just tell me which button would work correctly and if there are any issues in the code.
@AllInOneYT @0xPierre I used it with Expo managed workflow. Here is how to do it:
- install the package
- build the app with eas:
eas build --profile development --platform android- download the apk build to your device
- run your dev client with
expo start --dev-client- play with the app in your device
But I did not succeed to print well formatted receipts yet, so I am switching to another package.
@Marcados I got my hands on a printer (Black Copper BC-105). I changed the ip address in the example code of this package to match my printers ip but the rest of it is same. I followed your instructions and build apk and used the app on my phone but was unable to generate a print. I have provided my code for reference. Please let me know what I am doing wrong or if you could tell me what you did right it would be of immense help as I am stuck really bad.
@AllInOneYT @raajnadar please let me know if you guys can help too.
Code:
import React, { useState } from 'react';
import { SafeAreaView, useColorScheme, Button, TextInput } from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import ThermalPrinterModule from 'react-native-thermal-printer';
ThermalPrinterModule.defaultConfig = {
...ThermalPrinterModule.defaultConfig,
ip: '192.168.1.87',
port: 9100,
timeout: 30000,
};
const App = () => {
const isDarkMode = useColorScheme() === 'dark';
const [err2, setErr] = useState("")
const [state, setState] = useState({
text:
'[C]https://via.placeholder.com/300.jpg\n' +
'[L]\n' +
"[C]ORDER N°045\n" +
'[L]\n' +
'[C]================================\n' +
'[L]\n' +
'[L]BEAUTIFUL SHIRT[R]9.99e\n' +
'[L] + Size : S\n' +
'[L]\n' +
'[L]AWESOME HAT[R]24.99e\n' +
'[L] + Size : 57/58\n' +
'[L]\n' +
'[C]--------------------------------\n' +
'[R]TOTAL PRICE :[R]34.98e\n' +
'[R]TAX :[R]4.23e\n' +
'[L]\n' +
'[C]================================\n' +
'[L]\n' +
"[L]Customer :\n" +
'[L]Raymond DUPONT\n' +
'[L]5 rue des girafes\n' +
'[L]31547 PERPETES\n' +
'[L]Tel : +33801201456\n' +
'[L]\n' +
"[C]831254784551\n" +
"[C]http://www.developpeur-web.dantsu.com/",
});
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
const onPress = async () => {
try {
console.log('We will invoke the native module here!');
await ThermalPrinterModule.printTcp({ payload: state.text });
//
// bluetooth
// await ThermalPrinterModule.printBluetooth({ payload: state.text });
//
console.log('done printing');
setErr("done")
} catch (err) {
//error handling
setErr(err.message)
console.log(err.message);
}
};
return (
<TextInput
value={state.text}
onChangeText={(text) => setState((prev) => ({ ...prev, text }))}
/>
<Button
title="react-native-thermal-receipt-printer"
onPress={() => navigation.navigate('print')}
/>
Error: {err2}
);
};
export default App;