diff --git a/assets/viewShotCode.jpg b/assets/viewShotCode.jpg new file mode 100644 index 0000000..6ca5522 Binary files /dev/null and b/assets/viewShotCode.jpg differ diff --git a/assets/viewShotResult.jpg b/assets/viewShotResult.jpg new file mode 100644 index 0000000..aaa18f6 Binary files /dev/null and b/assets/viewShotResult.jpg differ diff --git a/docs/interfaces/addViewShotParams.md b/docs/interfaces/addViewShotParams.md new file mode 100644 index 0000000..e6a774a --- /dev/null +++ b/docs/interfaces/addViewShotParams.md @@ -0,0 +1,13 @@ +# Interface: AddViewShotParams + +### viewNode + +*viewNode*: `View ref` + +Parent view node. + +### width (optional) + +*width*: `number` + +Width of the image in pixels. Default: `calculated using printer paper width`. diff --git a/docs/printer/Printer.md b/docs/printer/Printer.md index 81dd3c5..d67ed2a 100644 --- a/docs/printer/Printer.md +++ b/docs/printer/Printer.md @@ -263,7 +263,7 @@ await printerInstance.clearCommandBuffer(); ## Static Methods -### [Printer.addTextLine(`printerInstance: Printer, params: AddTextLineParams`): `Promose`](./addTextLine.md) +### [Printer.addTextLine(`printerInstance: Printer, params: AddTextLineParams`): `Promise`](./addTextLine.md) Prints text line with left and right parts @@ -309,3 +309,45 @@ await Printer.tryToConnectUntil( (status) => status.online.statusCode === PrinterConstants.TRUE ) ``` + +### [Printer.addViewShot(`printerInstance: Printer, params: AddViewShotParams`): `Promise`](./addViewShot.md) + +Prints image captured from React Native View + +Requires `react-native-view-shot` to be installed + +```bash +yarn add react-native-view-shot +``` + +for iOS, run + +```bash +cd ios && pod install +``` + + +#### Example + +```typescript +const ref = useRef(null); + +... + +await Printer.addViewShot(printerInstance, { + viewNode: ref.current, +}); + +... + +return ( + + Print me + +); +``` + + + + +Find detailed examples [here](../../example/src/screens/PrintFromView.tsx) diff --git a/docs/printer/addViewShot.md b/docs/printer/addViewShot.md new file mode 100644 index 0000000..3c14600 --- /dev/null +++ b/docs/printer/addViewShot.md @@ -0,0 +1,44 @@ +## static Printer.addTextLine + +Prints image captured from React Native View + +### Parameters + +#### printerInstance + +- `Printer` + +Printer instance defined by calling `new Printer(...)`. + +#### params + +- [AddViewShotParams](../interfaces/addViewShotParams.md) + +### Returns + +`Promise` + +### Errors + +| **Error status** | **Description** | +| --- | --- | +| ERR_PARAM | An invalid parameter was passed. | +| ERR_TIMEOUT | Failed to communicate with the devices within the specified time. | +| ERR_MEMORY | Necessary memory could not be allocated. | +| CODE_ERR_AUTORECOVER | Automatic recovery error occurred. | +| CODE_ERR_COVER_OPEN | Cover open error occurred. | +| CODE_ERR_CUTTER | Auto cutter error occurred. | +| CODE_ERR_MECHANICAL | Mechanical error occurred. | +| CODE_ERR_EMPTY | No paper is left in the roll paper end detector. | +| CODE_ERR_PARAM | An invalid parameter was passed. | +| CODE_ERR_MEMORY | Memory necessary for processing could not be allocated. | +| CODE_ERR_TIMEOUT | Print timeout occurred. | +| CODE_ERR_PROCESSING | Could not run the process. | +| CODE_ERR_ILLEGAL | This API was called while no communication had been started. | +| CODE_ERR_FAILURE | Error exists in the requested document syntax. | + +### Supplementary explanation + +- Uses [react-native-view-shot](https://github.com/gre/react-native-view-shot) +- Internaly uses [addImage](./addText.md) and [getPrinterSetting](./getPrinterSetting.md) commands. + diff --git a/example/ios/EscPosPrinterExample.xcodeproj/project.pbxproj b/example/ios/EscPosPrinterExample.xcodeproj/project.pbxproj index 7d28bba..22fcc25 100644 --- a/example/ios/EscPosPrinterExample.xcodeproj/project.pbxproj +++ b/example/ios/EscPosPrinterExample.xcodeproj/project.pbxproj @@ -485,7 +485,12 @@ buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; + CODE_SIGN_IDENTITY = "Apple Development"; + "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution"; + CODE_SIGN_STYLE = Manual; CURRENT_PROJECT_VERSION = 1; + DEVELOPMENT_TEAM = ""; + "DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53APD5F9YQ; ENABLE_BITCODE = NO; "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64; INFOPLIST_FILE = EscPosPrinterExample/Info.plist; @@ -500,8 +505,10 @@ "-ObjC", "-lc++", ); - PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; + PRODUCT_BUNDLE_IDENTIFIER = com.greentravel.radzima; PRODUCT_NAME = EscPosPrinterExample; + PROVISIONING_PROFILE_SPECIFIER = ""; + "PROVISIONING_PROFILE_SPECIFIER[sdk=iphoneos*]" = "EPM_SLR_In-House"; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; VERSIONING_SYSTEM = "apple-generic"; diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 6db8574..4a50bf9 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -315,7 +315,7 @@ PODS: - React-jsinspector (0.72.6) - React-logger (0.72.6): - glog - - react-native-esc-pos-printer (4.0.1): + - react-native-esc-pos-printer (4.1.4): - RCT-Folly (= 2021.07.22.00) - React-Core - react-native-image-picker (7.1.0): @@ -323,6 +323,8 @@ PODS: - React-Core - react-native-safe-area-context (4.7.4): - React-Core + - react-native-view-shot (3.8.0): + - React-Core - React-NativeModulesApple (0.72.6): - hermes-engine - React-callinvoker @@ -466,6 +468,7 @@ DEPENDENCIES: - react-native-esc-pos-printer (from `../..`) - react-native-image-picker (from `../node_modules/react-native-image-picker`) - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) + - react-native-view-shot (from `../node_modules/react-native-view-shot`) - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`) - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) @@ -542,6 +545,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-image-picker" react-native-safe-area-context: :path: "../node_modules/react-native-safe-area-context" + react-native-view-shot: + :path: "../node_modules/react-native-view-shot" React-NativeModulesApple: :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios" React-perflogger: @@ -605,9 +610,10 @@ SPEC CHECKSUMS: React-jsiexecutor: 3bf18ff7cb03cd8dfdce08fbbc0d15058c1d71ae React-jsinspector: 194e32c6aab382d88713ad3dd0025c5f5c4ee072 React-logger: cebf22b6cf43434e471dc561e5911b40ac01d289 - react-native-esc-pos-printer: 71506d7f9081fe378901ad0e685cd118831eaf6d + react-native-esc-pos-printer: 6c520b63ee4e187786026382bd3c6a79b0bd93d1 react-native-image-picker: 5e076db26cd81660cfb6db5bcf517cfa12054d45 react-native-safe-area-context: 2cd91d532de12acdb0a9cbc8d43ac72a8e4c897c + react-native-view-shot: 6b7ed61d77d88580fed10954d45fad0eb2d47688 React-NativeModulesApple: 02e35e9a51e10c6422f04f5e4076a7c02243fff2 React-perflogger: e3596db7e753f51766bceadc061936ef1472edc3 React-RCTActionSheet: 17ab132c748b4471012abbcdcf5befe860660485 diff --git a/example/package.json b/example/package.json index 668f2d7..5e4371d 100644 --- a/example/package.json +++ b/example/package.json @@ -17,7 +17,8 @@ "react-native": "0.72.6", "react-native-image-picker": "^7.1.0", "react-native-safe-area-context": "^4.7.4", - "react-native-screens": "^3.27.0" + "react-native-screens": "^3.27.0", + "react-native-view-shot": "^3.8.0" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/example/src/components/Button/Button.tsx b/example/src/components/Button/Button.tsx index 1f7c92d..25573ac 100644 --- a/example/src/components/Button/Button.tsx +++ b/example/src/components/Button/Button.tsx @@ -6,13 +6,19 @@ interface ButtonProps { onPress: () => void; title: string; loading: boolean; + topOffset?: boolean; } -export const Button = ({ onPress, title, loading }: ButtonProps) => { +export const Button = ({ + onPress, + title, + loading, + topOffset = false, +}: ButtonProps) => { return ( {title} diff --git a/example/src/components/Button/styles.ts b/example/src/components/Button/styles.ts index 22a20f7..d925edc 100644 --- a/example/src/components/Button/styles.ts +++ b/example/src/components/Button/styles.ts @@ -10,6 +10,10 @@ export const styles = StyleSheet.create({ alignItems: 'center', }, + containerSpace: { + marginTop: 10, + }, + text: { fontSize: 16, fontWeight: '600', diff --git a/example/src/navigation/RootNavigator.tsx b/example/src/navigation/RootNavigator.tsx index 41a778e..b2f215d 100644 --- a/example/src/navigation/RootNavigator.tsx +++ b/example/src/navigation/RootNavigator.tsx @@ -1,7 +1,12 @@ import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; -import { Discovery, SimplePrint } from '../screens'; +import { + Discovery, + SimplePrint, + PrintFromView, + PrinterScreen, +} from '../screens'; import type { DeviceInfo } from 'react-native-esc-pos-printer'; export type RootStackParamList = { @@ -9,6 +14,12 @@ export type RootStackParamList = { SimplePrint: { printer: DeviceInfo; }; + PrintFromView: { + printer: DeviceInfo; + }; + Printer: { + printer: DeviceInfo; + }; }; const Stack = createNativeStackNavigator(); @@ -18,6 +29,8 @@ export const RootNavigator = () => { + + diff --git a/example/src/screens/Discovery.tsx b/example/src/screens/Discovery.tsx index 0d204b2..dfa0860 100644 --- a/example/src/screens/Discovery.tsx +++ b/example/src/screens/Discovery.tsx @@ -24,7 +24,7 @@ export const Discovery = memo(() => { { if (printer) { - navigation.navigate('SimplePrint', { printer }); + navigation.navigate('Printer', { printer }); } }} printers={printers} diff --git a/example/src/screens/PrintFromView.tsx b/example/src/screens/PrintFromView.tsx new file mode 100644 index 0000000..5a68f5b --- /dev/null +++ b/example/src/screens/PrintFromView.tsx @@ -0,0 +1,151 @@ +import { useRoute, type RouteProp } from '@react-navigation/native'; +import React, { memo, useMemo, useRef, useState } from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import { Printer, PrinterConstants } from 'react-native-esc-pos-printer'; +import { Button, ScreenTitle } from '../components'; +import type { RootStackParamList } from '../navigation/RootNavigator'; + +type ImageFromViewPrintRouteProp = RouteProp< + RootStackParamList, + 'PrintFromView' +>; +export const PrintFromView = memo(() => { + const { + params: { printer }, + } = useRoute(); + + const ref = useRef(null); + + const [printing, setPrinting] = useState(false); + + const printerInstance = useMemo( + () => + new Printer({ + target: printer.target, + deviceName: printer.deviceName, + }), + [printer] + ); + + const print = async () => { + try { + setPrinting(true); + + await printerInstance.addQueueTask(async () => { + await Printer.tryToConnectUntil( + printerInstance, + (status) => status.online.statusCode === PrinterConstants.TRUE + ); + + await printerInstance.addFeedLine(); + + await Printer.addViewShot(printerInstance, { + viewNode: ref.current, + }); + + await printerInstance.addCut(); + + const result = await printerInstance.sendData(); + + await printerInstance.disconnect(); + return result; + }); + } catch (e) { + await printerInstance.disconnect(); + } finally { + setPrinting(false); + } + }; + + return ( + + + + + + + + Burger{' '} + + (without cheese) + + + 16 EUR + + + + + Fries{' '} + (medium) + + 30 EUR + + + + + Sous{' '} + (sour) + + 10 EUR + + + + + Sum + 56 EUR + + + + +