iOS React Wrapper
-
We will be using XCode version 13.3 in this guide. Setup the React Native development environment based on the development and target OS by following the steps here,
Setting up the development environment Github Repository -
Install cocoapods-user-defined-build-types plugin. Do not use system Ruby installation to install the plugin.
Cocoapods Plugin Ruby Instructions -
We will be integrating iOS Identity SDK version 9.3.10.2.26. Download and unzip the ReactNativeSDK2iOSResources archive, it consists of the react-native, ios_code_1, ios_code_2, ios_framework directories and a Podfile. Please enter the credentials(URL, initialize URL, Login ID, Password, Merchant ID) in Home.js.
ReactNativeSDK2iOSResources -
Create an empty React Native application
npx react-native init IDMTest
-
Add Javascript code. Copy and paste the contents of react-native folder to the main project folder. Overwrite files if required.
-
Add React Native dependencies. In package.json change the dependencies node and add resolutions node below it.
"dependencies": {
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"native-base": "^2.15.0",
"react": "17.0.2",
"react-native": "0.67.3",
"react-native-gesture-handler": "^1.9.0",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-navigation": "^4.4.4"
},
- Delete node_modules folder. Build React Native application
npm install
- Setup pods. Navigate to the iOS directory. Uninstall pods.
pod deintegrate
- Delete Podfile.lock and IDMExpo.xcworkspace files. Replace the Podfile with the Podfile from ReactNativeSDK2iOSResources archive. Install pods.
pod install
- Add iOS code. Copy and paste the AppDelegate.m file from ios_code_1 folder in IDMTest folder inside the ios folder. Overwrite files if required. Please check the permissions mentioned in the Info.plist file. Please add the permissions which are not present in your project’s Info.plist file.
- Launch IDMTest.xcworkspace.
- In the ios_code_2 folder, please rename YourProjectName-Bridging-Header.h file based on your project’s name. Drag and drop all the files in the ios_code_2 folder in IDMTest in XCode. In the popup “Copy items if needed”, “Create groups” and “IDMTest” target should be selected. Select Create Bridging Header in the popup that opens after this.
- Add iOS dependencies. Drag and drop the IDCapture_Swift.framework, IDentitySDK_Swift.framework, SelfieCapture_Swift.framework present in the ios_framework directory into the Frameworks directory in XCode. In the popup, “Copy items if needed”, “Create groups” and “IDMTest” target should be selected. Select the Target, then select General, Framework, Libraries and Embedded Content, and select the Embed & Sign option for IDCapture_Swift.framework, IDentitySDK_Swift.framework, SelfieCapture_Swift.framework.
- Code signing. Select the Target, then select Signing & Capabilities. Add Team and Provisioning Profile
- Build and run the application from XCode. For the Project's Build Settings, 'Enable Bitcode' set to 'YES'
- On the iPhone, Settings -> General -> VPN & Device Management and choose to trust your company
- React sample app TestFlight link
- Here is a brief description of the sample app functionality,
- The initialize API call is executed when the app is launched.
- Keyboard - The keyboard on top is used to type the Unique Customer Number which is required for Service ID 50, 175, 105 flows.
- ID Validation - Initiates ID Validation(Service ID 20) flow.
- ID Validation and Match Face - Initiates ID Validation and Match Face(Service ID 10) flow.
- ID Validation and Customer Enroll - Initiates ID Validation and Customer Enroll(Service ID 50) flow.
- Customer Enroll Biometrics - Initiates Customer Enroll Biometrics(Service ID 175) flow.
- Customer Verification - Initiates Customer Verification(Service ID 105) flow.
- Identify Customer - Initiates Identify Customer(Service ID 185) flow.
- Live Face Check - Initiates Live Face Check(Service ID 660) flow.
- Submit - Submits the form.