feat(added): add addViewShot method to allow print from React Native …

…View (#176)
tr3v3r · Aug 19, 2024 · 8df2b9d · 8df2b9d
1 parent acd7543
commit 8df2b9d
Show file tree

Hide file tree

Showing 23 changed files with 483 additions and 11 deletions.
diff --git a/assets/viewShotCode.jpg b/assets/viewShotCode.jpg
diff --git a/assets/viewShotResult.jpg b/assets/viewShotResult.jpg
diff --git a/docs/interfaces/addViewShotParams.md 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
@@ -263,7 +263,7 @@ await printerInstance.clearCommandBuffer();
 
 ## Static Methods
 
-### [Printer.addTextLine(`printerInstance: Printer, params: AddTextLineParams`): `Promose<void>`](./addTextLine.md)
+### [Printer.addTextLine(`printerInstance: Printer, params: AddTextLineParams`): `Promise<void>`](./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<void>`](./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<View>(null);
+
+...
+
+await Printer.addViewShot(printerInstance, {
+ viewNode: ref.current,
+});
+
+...
+
+return (
+  <View ref={ref}>
+    <Text>Print me</Text>
+  </View>
+);
+```
+
+<img src="../../assets/viewShotCode.jpg" width="200">
+<img src="../../assets/viewShotResult.jpg" width="200">
+
+Find detailed examples [here](../../example/src/screens/PrintFromView.tsx)
diff --git a/docs/printer/addViewShot.md 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<void>`
+
+### 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
@@ -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
@@ -315,14 +315,16 @@ 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):
     - RCT-Folly (= 2021.07.22.00)
     - 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
@@ -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
@@ -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 (
     <TouchableOpacity
       onPress={onPress}
       activeOpacity={0.6}
-      style={styles.container}
+      style={[styles.container, topOffset && styles.containerSpace]}
       disabled={loading}
     >
       <Text style={[styles.text, loading && styles.hidden]}>{title}</Text>

diff --git 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
@@ -1,14 +1,25 @@
 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 = {
   Discovery: undefined;
   SimplePrint: {
     printer: DeviceInfo;
   };
+  PrintFromView: {
+    printer: DeviceInfo;
+  };
+  Printer: {
+    printer: DeviceInfo;
+  };
 };
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -18,6 +29,8 @@ export const RootNavigator = () => {
     <NavigationContainer>
       <Stack.Navigator>
         <Stack.Screen name="Discovery" component={Discovery} />
+        <Stack.Screen name="Printer" component={PrinterScreen} />
+        <Stack.Screen name="PrintFromView" component={PrintFromView} />
         <Stack.Screen name="SimplePrint" component={SimplePrint} />
       </Stack.Navigator>
     </NavigationContainer>

diff --git a/example/src/screens/Discovery.tsx b/example/src/screens/Discovery.tsx
@@ -24,7 +24,7 @@ export const Discovery = memo(() => {
       <PrintersList
         onPress={(printer) => {
           if (printer) {
-            navigation.navigate('SimplePrint', { printer });
+            navigation.navigate('Printer', { printer });
           }
         }}
         printers={printers}