feat: add apple's vision framework

howljs · Jun 5, 2022 · 635c023 · 635c023
1 parent d2f63e4
commit 635c023
Show file tree

Hide file tree

Showing 31 changed files with 1,311 additions and 279 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # Credit Card Scanner
+
 ![npm](https://img.shields.io/npm/dm/rn-card-scanner?logo=npm)
 
 This library provides payment card scanning functionality for your react-native app
@@ -9,6 +10,7 @@ This library provides payment card scanning functionality for your react-native
 - [Usage](#usage)
 - [Run example project](#run-example-project)
 - [Available props](#available-props)
+- [Available methods](#available-methods)
 - [Contributing](#contributing)
 - [License](#license)
 - [Original SDK](#original-sdk)
@@ -146,16 +148,38 @@ Running the example project:
 
 ## Available props
 
-| Prop                              | Description                                                                                                    | Default     | Type                   |
-| --------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------- | ---------------------- |
-| **`didCardScan`**                 | This function will be called when the scan is completed and returns the [CreditCard](#creditcard) information. | `undefined` | `Object`               |
-| **`frameColor`**                  | Recognizer frame color.                                                                                        | `undefined` | `number or ColorValue` |
-| **`PermissionCheckingComponent`** | Show when permission is checking.                                                                              | `undefined` | `ReactElement`         |
-| **`NotAuthorizedComponent`**      | Show when permission is not authorized.                                                                        | `undefined` | `ReactElement`         |
-| **`disabled`**                    | Disable scanner.                                                                                               | `false` | `boolean`         |
+| Prop                              | Description                                                                                                                 | Default     | Type                   |
+| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ----------- | ---------------------- |
+| **`didCardScan`**                 | This function will be called when the scan is completed and returns the [CreditCard](#creditcard) information.              | `undefined` | `Object`               |
+| **`frameColor`**                  | Recognizer frame color.                                                                                                     | `undefined` | `number or ColorValue` |
+| **`PermissionCheckingComponent`** | Show when permission is checking.                                                                                           | `undefined` | `ReactElement`         |
+| **`NotAuthorizedComponent`**      | Show when permission is not authorized.                                                                                     | `undefined` | `ReactElement`         |
+| **`disabled`**                    | Disable scanner.                                                                                                            | `undefined` | `boolean`              |
+| **`useAppleVision`**              | Use [Apple's Vision Framework](https://developer.apple.com/documentation/vision) to scan credit card when iOS version >= 13 | `undefined` | `boolean`              |
 
 - Includes all React Native [View](https://reactnative.dev/docs/view#props) props.
 
+## Available methods
+
+```js
+const cardScannerRef = useRef(null)
+
+<CardScanner
+  //Other props
+  ref={cardScannerRef}
+/>
+
+//Ex: Toggle flash on and off
+onPress={() => cardScannerRef.current.toggleFlash()}
+```
+
+| Method            | Description              |
+| ----------------- | ------------------------ |
+| **`toggleFlash`** | Toggle flash on and off  |
+| **`resetResult`** | Reset recognizer result. |
+| **`startCamera`** | Start recognizer         |
+| **`stopCamera`**  | Stop recognizer.         |
+
 ### CreditCard
 
 An object with the following keys:
@@ -165,6 +189,23 @@ An object with the following keys:
 - `expiryYear` - Expiry year.
 - `holderName` - Card holder name.
 
+## Troubleshooting
+
+### `Undefined symbols for architecture x86_64` on iOS
+
+While building your iOS project, you may see a `Undefined symbols for architecture x86_64` error. This is caused by `react-native init` template configuration that is not fully compatible with Swift.
+
+```
+Undefined symbols for architecture x86_64:
+    "_swift_FORCE_LOAD...
+    ld: symbol(s) not found for architecture x86_64
+```
+
+Follow these steps to resolve this:
+- Open your project via Xcode.
+- Create a new Swift file to the project (File > New > File > Swift), give it any name (e.g. `File.swift`) and answer "yes" when Xcode asks you if you want to "Create Bridging Header"
+- Clean build and run app
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

diff --git a/RNCardScanner.podspec b/RNCardScanner.podspec
@@ -14,9 +14,11 @@ Pod::Spec.new do |s|
   s.source       = { :git => "https://github.com/howljs/rn-card-scanner.git", :tag => "#{s.version}" }
 
   s.vendored_frameworks = 'ios/CardScanner/PayCardsRecognizer.xcframework'
-  s.source_files = "ios/CardScanner/*.{h,m,mm,swift}"
+  s.source_files = ["ios/CardScanner/*.{h,m,mm,swift}", "ios/CardScanner/AppleVision/*.{h,m,mm,swift}"]
   s.requires_arc = true
   s.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES' }
-
+  s.resource_bundles = {
+    'PortraitFrame' => ['ios/CardScanner/AppleVision/Resources/*.png'],
+  }
   s.dependency "React-Core"
 end
diff --git a/example/ios/CardScannerExample.xcodeproj/project.pbxproj b/example/ios/CardScannerExample.xcodeproj/project.pbxproj
@@ -301,7 +301,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = com.howl.cardscaner;
+				PRODUCT_BUNDLE_IDENTIFIER = com.howl.cardscanner;
 				PRODUCT_NAME = CardScannerExample;
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OBJC_BRIDGING_HEADER = "CardScannerExample-Bridging-Header.h";
@@ -332,7 +332,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = com.howl.cardscaner;
+				PRODUCT_BUNDLE_IDENTIFIER = com.howl.cardscanner;
 				PRODUCT_NAME = CardScannerExample;
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OBJC_BRIDGING_HEADER = "CardScannerExample-Bridging-Header.h";

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -353,7 +353,7 @@ PODS:
     - React-jsi (= 0.68.2)
     - React-logger (= 0.68.2)
     - React-perflogger (= 0.68.2)
-  - RNCardScanner (1.0.7):
+  - RNCardScanner (1.0.8):
     - React-Core
   - RNScreens (3.13.1):
     - React-Core
@@ -556,7 +556,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 79040b92bfa9c3c2d2cb4f57e981164ec7ab9374
   React-runtimeexecutor: b960b687d2dfef0d3761fbb187e01812ebab8b23
   ReactCommon: 095366164a276d91ea704ce53cb03825c487a3f2
-  RNCardScanner: b1c393b9730d0bbe057ac6a3fdb427f505fb3d9f
+  RNCardScanner: 96a9cb903996a92b4dc6f3aa10a0395f76bcd825
   RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 99652481fcd320aefa4a7ef90095b95acd181952

diff --git a/example/src/screens/RecognizerScreen.tsx b/example/src/screens/RecognizerScreen.tsx
@@ -1,8 +1,8 @@
-import CardScanner, { CardScannerResponse } from 'rn-card-scanner';
 import { NavigationProp, useIsFocused } from '@react-navigation/native';
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import CardScanner, { CardScannerResponse } from 'rn-card-scanner';
 import type { RootStackRoutes } from '../App';
 
 interface RecognizerScreenProps {