Have ideas to improve npm?Join in the discussion! »

    rn-thermal-printer
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.9 • Public • Published

    rn-thermal-printer

    Fork of react-native-printer and add implement for auto connect printer with usb A React Native Library to support USB/BLE/Net printer

    Node.js Package

    Installation

    yarn add react-native-thermal-receipt-printer
    

    Troubleshoot

    • when install in react-native version >= 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

    Support

    Printer Android IOS
    USBPrinter ✔️
    BLEPrinter ✔️ ✔️
    NetPrinter ✔️ ✔️

    Predefined tag

    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

    Development workflow

    To get started with the project, run yarn bootstrap in the root directory to install the required dependencies for each package:

    yarn bootstrap

    While developing, you can run the example app to test your changes.

    To start the packager:

    yarn example start

    To run the example app on Android:

    yarn example dev-android

    To run the example app on iOS:

    yarn example ios

    Usage

    import {
      USBPrinter,
      NetPrinter,
      BLEPrinter,
    } from "react-native-thermal-receipt-printer";
    
    USBPrinter.printText("<C>sample text</C>");
    USBPrinter.printBill("<C>sample bill</C>");

    Example

    USBPrinter (only support android)

    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>
      )
    
      ...

    BLEPrinter

    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 && USBPrinter.printText("<C>sample text</C>\n");
      }
    
      printBillTest = () => {
        currentPrinter && USBPrinter.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>
      )
    
      ...

    NetPrinter

    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>
        )
      }
    
      ...

    rn-thermal-printer

    Install

    npm i rn-thermal-printer

    DownloadsWeekly Downloads

    2

    Version

    1.1.9

    License

    ISC

    Unpacked Size

    6.19 MB

    Total Files

    47

    Last publish

    Collaborators

    • avatar