A React Native ESC/POS module to help you connect to your ESC/POS printer easily. It also has provide an intuitive way to design your layout, check below example to see how easy to get your layout ready!
PS: iOS IS NOT IMPLEMENTED YET
$ yarn add @leesiongchan/react-native-esc-pos
PS: Skip below installation guide if you are using React Native >= 0.60
$ react-native link @leesiongchan/react-native-esc-pos
- In XCode, in the project navigator, right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜@leesiongchan➜react-native-esc-posand addEscPos.xcodeproj - In XCode, in the project navigator, select your project. Add
libEscPos.ato your project'sBuild Phases➜Link Binary With Libraries - Run your project (
Cmd+R)
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import leesiongchan.reactnativeescpos.EscPosPackage;to the imports at the top of the file - Add
new EscPosPackage()to the list returned by thegetPackages()method
- Append the following lines to
android/settings.gradle:include ':react-native-esc-pos' project(':react-native-esc-pos').projectDir = new File(rootProject.projectDir, '../node_modules/@leesiongchan/react-native-esc-pos/android') - Insert the following lines inside the dependencies block in
android/app/build.gradle:compile project(':react-native-esc-pos')
Add following permissions into AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
import EscPos from "@leesiongchan/react-native-esc-pos";
const design = `
D0004 {<>} Table #: A1
------------------------------------------
[ ] Espresso
- No sugar, Regular 9oz, Hot
{H3} {R} x 1
------------------------------------------
[ ] Blueberry Cheesecake
- Slice
{H3} {R} x 1
{QR[Where are the aliens?]}
{BC[Your barcode here]}
{IMG[file://image/path/file.png]}
`;
async function testPrinter() {
try {
// Can be `network` or `bluetooth`
EscPos.setConfig({ type: "network" });
// Connects to your printer
// If you use `bluetooth`, second parameter is not required.
await EscPos.connect("10.10.10.10", 9100);
// Once connected, you can setup your printing size, either `PRINTING_SIZE_58_MM`, `PRINTING_SIZE_76_MM` or `PRINTING_SIZE_80_MM`
EscPos.setPrintingSize(EscPos.PRINTING_SIZE_80_MM);
// 0 to 8 (0-3 = smaller, 4 = default, 5-8 = larger)
EscPos.setTextDensity(8);
// Test Print
await EscPos.printSample();
// Cut half!
await EscPos.cutPart();
// You can also print image! eg. "file:///longpath/xxx.jpg"
await EscPos.printImage(file.uri);
// You can also print image with a specific width offset (scale down image by offset pixels)! eg. "file:///longpath/xxx.jpg"
await EscPos.printImageWithOffset(file.uri, offset);
// Print your design!
await EscPos.printDesign(design);
// Print QR Code, you can specify the size
await EscPos.printQRCode("Proxima b is the answer!", 200);
// Print Barcode
// printBarCode({code}, {type}, {width}, {height}, {font}, {fontPosition})
// type: 65=UPC-A; 66=UPC-E; 67=EAN13; 68=EAN8; 69=CODE39; 70=ITF; 71=CODABAR; 72=CODE93; 73=CODE128}
// width: 2-6
// height: 0-255
// font: 0=FontA; 1=FontB
// fontPosition: 0=none; 1=top; 2=bottom; 3=top-bottom
await EscPos.printBarcode("Your barcode here", 73, 3, 100, 0, 2);
// Cut full!
await EscPos.cutFull();
// Beep!
await EscPos.beep();
// Kick the drawer! Can be either `kickCashDrawerPin2` or `kickCashDrawerPin5`
await EscPos.kickCashDrawerPin2();
// Disconnect
await EscPos.disconnect();
} catch (error) {
console.error(error);
}
}EscPos.scanDevices();EscPos.stopScan();EscPos.addListener("bluetoothDeviceFound", (event) => {
if (event.state === EscPos.BLUETOOTH_DEVICE_FOUND) {
console.log("Device Found!");
console.log("Device Name : " + event.deviceInfo.name);
console.log("Device MAC Address : " + event.deviceInfo.macAddress);
}
});To listen to bluetooth state changes:
EscPos.addListener("bluetoothStateChanged", (event) => {
if (event.state === EscPos.BLUETOOTH_CONNECTED) {
console.log("Device Connected!");
console.log("Device Name : " + event.deviceInfo.name);
console.log("Device MAC Address : " + event.deviceInfo.macAddress);
}
});- EscPos.PRINTING_SIZE_58_MM
- EscPos.PRINTING_SIZE_78_MM
- EscPos.PRINTING_SIZE_80_MM
- EscPos.BLUETOOTH_CONNECTED
- EscPos.BLUETOOTH_DISCONNECTED
| Tag | Description |
|---|---|
| {B} | Bold. |
| {U} | Underline. |
| {H1} | Font Size. 2x2 / char |
| {H2} | Font Size. 1x2 / char |
| {H3} | Font Size. 2x1 / char |
| {LS:?} | Linespace. M = 24LS, L = 30LS |
| {C} | Align text to center. |
| {R} | Align text to right. |
| {RP:?:?} | Repeat text. Eg. {RP:5:a} will output "aaaaa". |
| {BC[?]} | Print barcode. |
| {QR[?]} | Print QR code. |
| {IMG[?]} | Print image from a path. |
| {IMG[?]:?} | Print image scaled down to make space for a width offset. Eg. {IMG[]:32} |
| {<>} | Left-right text separation. |
| {---} | Create a "---" separator. |
| {===} | Create a "===" separator. |
- Android support
- iOS support
- Print barcode
- Add TypeScript support
- Bluetooth support
- Serial port support
- Add test
- Listen to the connection status
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent