Fork of react-native-printer and add implement for auto connect printer with usb
A React Native Library to support USB/BLE/Net printer
npm i choiceqr-react-native-thermal-printer
- when install in
react-nativeversion >= 0.60, xcode show this error
duplicate symbols for architecture x86_64
that because the .a library uses CocoaAsyncSocket library and Flipper uses it too
Podfile
...
use_native_modules!
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable these next few lines.
# add_flipper_pods!
# post_install do |installer|
# flipper_post_install(installer)
# end
...and comment out code related to Flipper in ios/AppDelegate.m
| Printer | Android | IOS |
|---|---|---|
| USBPrinter | ✔️ | |
| BLEPrinter | ✔️ | ✔️ |
| NetPrinter | ✔️ | ✔️ |
| Tags | Description |
|---|---|
| C | Center |
| D | Medium font |
| B | Large font |
| M | Medium font |
| CM | Medium font, centered |
| CB | Medium font, centered |
| CD | Large font, centered |
To get started with the project, run yarn bootstrap in the root directory to install the required dependencies for
each package:
yarn bootstrapimport {
USBPrinter,
NetPrinter,
BLEPrinter,
} from "choiceqr-react-native-thermal-printer";
USBPrinter.printText("<C>sample text</C>");
USBPrinter.printBill("<C>sample bill</C>");interface IUSBPrinter {
device_name: string;
vendor_id: number;
product_id: number;
} const [printers, setPrinters] = useState([]);
const [currentPrinter, setCurrentPrinter] = useState();
useEffect = () => {
if (Platform.OS == 'android') {
USBPrinter.init().then(() => {
//list printers
USBPrinter.getDeviceList().then(setPrinters);
})
}
}
const _connectPrinter = (printer) => USBPrinter.connectPrinter(printer.vendorID, printer.productId).then(() => setCurrentPrinter(printer))
const printTextTest = () => {
currentPrinter && USBPrinter.printText("<C>sample text</C>\n");
}
const printBillTest = () => {
currentPrinter && USBPrinter.printBill("<C>sample bill</C>");
}
...
return (
<View style={styles.container}>
{
printers.map(printer => (
<TouchableOpacity key={printer.device_id} onPress={() => _connectPrinter(printer)}>
{`device_name: ${printer.device_name}, device_id: ${printer.device_id}, vendor_id: ${printer.vendor_id}, product_id: ${printer.product_id}`}
</TouchableOpacity>
))
}
<TouchableOpacity onPress={printTextTest}>
<Text>Print Text</Text>
</TouchableOpacity>
<TouchableOpacity onPress={printBillTest}>
<Text>Print Bill Text</Text>
</TouchableOpacity>
</View>
)
...interface IBLEPrinter {
device_name: string;
inner_mac_address: string;
} const [printers, setPrinters] = useState([]);
const [currentPrinter, setCurrentPrinter] = useState();
useEffect(() => {
BLEPrinter.init().then(() => {
BLEPrinter.getDeviceList().then(setPrinters);
});
}, []);
_connectPrinter => (printer) => {
//connect printer
BLEPrinter.connectPrinter(printer.inner_mac_address).then(
setCurrentPrinter,
error => console.warn(error))
}
printTextTest = () => {
currentPrinter && BLEPrinter.printText("<C>sample text</C>\n");
}
printBillTest = () => {
currentPrinter && BLEPrinter.printBill("<C>sample bill</C>");
}
...
return (
<View style={styles.container}>
{
this.state.printers.map(printer => (
<TouchableOpacity key={printer.inner_mac_address} onPress={() => _connectPrinter(printer)}>
{`device_name: ${printer.device_name}, inner_mac_address: ${printer.inner_mac_address}`}
</TouchableOpacity>
))
}
<TouchableOpacity onPress={printTextTest}>
<Text>Print Text</Text>
</TouchableOpacity>
<TouchableOpacity onPress={printBillTest}>
<Text>Print Bill Text</Text>
</TouchableOpacity>
</View>
)
...interface INetPrinter {
device_name: string;
host: string;
port: number;
}Note: get list device for net printers is support scanning in local ip but not recommended
componentDidMount = () => {
NetPrinter.init().then(() => {
this.setState(Object.assign({}, this.state, { printers: [{ host: '192.168.10.241', port: 9100 }] }))
})
}
_connectPrinter => (host, port) => {
//connect printer
NetPrinter.connectPrinter(host, port).then(
(printer) => this.setState(Object.assign({}, this.state, { currentPrinter: printer })),
error => console.warn(error))
}
printTextTest = () => {
if (this.state.currentPrinter) {
NetPrinter.printText("<C>sample text</C>\n");
}
}
printBillTest = () => {
if (this.state.currentPrinter) {
NetPrinter.printBill("<C>sample bill</C>");
}
}
...
render()
{
return (
<View style={styles.container}>
{
this.state.printers.map(printer => (
<TouchableOpacity key={printer.device_id}
onPress={(printer) => this._connectPrinter(printer.host, printer.port)}>
{`device_name: ${printer.device_name}, host: ${printer.host}, port: ${printer.port}`}
</TouchableOpacity>
))
}
<TouchableOpacity onPress={() => this.printTextTest()}>
<Text>Print Text</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.printBillTest()}>
<Text>Print Bill Text</Text>
</TouchableOpacity>
</View>
)
} import EscPosEncoder from 'esc-pos-encoder';
import { errors } from '@sideway/address';
const encoder = new EscPosEncoder();
const printBillTest = () => {
const encoderResult = encoder
.codepage('windows1251')
.text('Iñtërnâtiônàlizætiøn')
.codepage('cp737')
.text('ξεσκεπάζω την ψυχοφθόρα βδελυγμία')
.encode();
BLEPrinter.printRawData(encoderResult, (error: Error) => console.log('error callback: ', error));
};