Fork of react-native-printer and add implement for auto connect printer with usb A React Native Library to support USB/BLE/Net printer
yarn add react-native-thermal-receipt-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 bootstrapWhile developing, you can run the example app to test your changes.
To start the packager:
yarn example startTo run the example app on Android:
yarn example dev-androidTo run the example app on iOS:
yarn example iosimport { USBPrinter, NetPrinter, BLEPrinter, } from "react-native-thermal-receipt-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> ) } ...