Skip to content

Commit 95ed115

Browse files
Update readme
1 parent 1f24111 commit 95ed115

File tree

1 file changed

+209
-32
lines changed

1 file changed

+209
-32
lines changed

README.md

Lines changed: 209 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,35 @@
1111
- [2. Creating an Applicant](#2-creating-an-applicant)
1212
- [3. Configuring SDK with Tokens](#3-configuring-sdk-with-tokens)
1313
- [4. Adding the Onfido React Native SDK to your project](#4-adding-the-onfido-react-native-sdk-to-your-project)
14-
- [This SDK supports React Native versions 0.68.2 and later](#this-sdk-supports-react-native-versions-0600-and-later)
14+
- [This SDK supports React Native versions 0.68.2 and later](#this-sdk-supports-react-native-versions-0682-and-later)
1515
- [4.1 Adding SDK dependency through npm](#41-adding-sdk-dependency-through-npm)
1616
- [4.2 Update your Android build.gradle files](#42-update-your-android-buildgradle-files)
17-
- [4.3 Update your iOS configuration files](#43-update-your-ios-configuration-files)
17+
- [4.3 Custom Android Application Class](#43--custom-android-application-class)
18+
- [Kotlin](#kotlin)
19+
- [4.4 Update your iOS configuration files](#44-update-your-ios-configuration-files)
20+
- [Enabling NFC extraction](#enabling-nfc-extraction)
21+
- [Pre-requisites](#pre-requisites)
1822
- [Usage](#usage)
23+
- [User data](#user-data)
1924
- [1. Creating the SDK configuration](#1-creating-the-sdk-configuration)
2025
- [2. Parameter details](#2-parameter-details)
2126
- [3. Success Response](#3-success-response)
2227
- [4. Failure Response](#4-failure-response)
2328
- [5. Localization](#5-localization)
29+
- [Android](#android)
30+
- [iOS](#ios)
2431
- [Creating checks](#creating-checks)
2532
- [1. Obtaining an API token](#1-obtaining-an-api-token-1)
2633
- [2. Creating a check](#2-creating-a-check)
2734
- [Theme Customization](#theme-customization)
35+
- [Android](#android-1)
36+
- [Customizing Dimensions](#customizing-dimensions)
37+
- [iOS](#ios-1)
2838
- [Going live](#going-live)
2939
- [More Information](#more-information)
30-
- [Support](#support)
3140
- [Troubleshooting](#troubleshooting)
41+
- [Discrepancies between underlying Onfido native SDKs](#discrepancies-between-underlying-onfido-native-sdks)
42+
- [Support](#support)
3243
- [How is the Onfido React Native SDK licensed?](#how-is-the-onfido-react-native-sdk-licensed)
3344

3445

@@ -189,7 +200,7 @@ You also need to add the following Proguard rules to your `proguard-rules.pro` f
189200
#### 4.3 Custom Android Application Class
190201
**Note**: You can skip this step if you don't have any custom application class.
191202

192-
⚠️ After the release of version 9.0.0, Onfido RN SDK runs in a separate process. This means that when the Onfido SDK started, a new application instance will be created. To prevent reinitializing you have in the Android application class, you can use the `isOnfidoProcess` extension function and return from `onCreate` as shown below:
203+
⚠️ As of version 9.0.0, Onfido SDK runs in a separate process on Android. This means that when the Onfido SDK is started, a new application instance will be created. To prevent re-running any initialization code that you have in your custom Application class, you can use the following `isOnfidoProcess` function and return from the `onCreate` method as shown below:
193204

194205
This will prevent initialization-related crashes such as: [`FirebaseApp is not initialized in this process`](https://github.com/firebase/firebase-android-sdk/issues/4693)
195206

@@ -206,20 +217,18 @@ class YourCustomApplication : MultiDexApplication() {
206217
// Your custom initialization calls ...
207218
}
208219

209-
private fun isOnfidoProcess(): Boolean {
210-
val pid = Process.myPid()
211-
val manager = this.getSystemService(ACTIVITY_SERVICE) as ActivityManager
220+
private fun isOnfidoProcess(): Boolean {
221+
val pid = Process.myPid()
222+
val manager = this.getSystemService(ACTIVITY_SERVICE) as ActivityManager
212223

213-
return manager.runningAppProcesses.any {
214-
it.pid == pid && it.processName.endsWith(":onfido_process")
215-
}
216-
}
224+
return manager.runningAppProcesses.any {
225+
it.pid == pid && it.processName.endsWith(":onfido_process")
226+
}
227+
}
217228
}
218229

219230
```
220231

221-
</br>
222-
223232
#### 4.4 Update your iOS configuration files
224233

225234
Change `ios/Podfile` to use version 11:
@@ -255,6 +264,44 @@ pod install
255264
cd ..
256265
```
257266

267+
##### Enabling NFC extraction
268+
269+
Recent passports, national identity cards and residence permits contain a chip that can be accessed using Near Field Communication (NFC).
270+
The Onfido SDKs provide a set of screens and functionalities to extract this information, verify its authenticity and provide the results as part of a Document report.
271+
With version [8.4.0] of the Onfido React Native SDK, NFC is enabled by default and offered to customer when both the document and the device support NFC.
272+
273+
For more information on how to configure NFC and the list of supported documents, please refer to the [NFC for Document Report](https://developers.onfido.com/guide/document-report-nfc) guide.
274+
275+
###### Pre-requisites
276+
277+
278+
This feature requires Near Field Communication Tag Reading capability in your app target. If you haven't added it before, please follow the steps in Apple's documentation.
279+
280+
281+
You're required to have the following key in your application's Info.plist file:
282+
283+
```xml
284+
<key>NFCReaderUsageDescription</key>
285+
<string>Required to read ePassports</string>
286+
```
287+
288+
289+
You have to include the entries below in your app target's Info.plist file to be able to read NFC tags properly.
290+
291+
```xml
292+
<key>com.apple.developer.nfc.readersession.felica.systemcodes</key>
293+
<array>
294+
<string>12FC</string>
295+
</array>
296+
<key>com.apple.developer.nfc.readersession.iso7816.select-identifiers</key>
297+
<array>
298+
<string>A0000002471001</string>
299+
<string>A0000002472001</string>
300+
<string>00000000000000</string>
301+
<string>D2760000850101</string>
302+
</array>
303+
```
304+
258305
## Usage
259306

260307
You can launch the app with a call to `Onfido.start`. For example, once you have the `sdkTokenFromOnfidoServer`, your react component might look like this:
@@ -297,6 +344,72 @@ export default class App extends Component {
297344
}
298345
}
299346

347+
### Media Callbacks (beta)
348+
349+
### Introduction
350+
Onfido provides the possibility to integrate with our Smart Capture SDK, without the requirement of using this data only through the Onfido API. Media callbacks enable you to control the end user data collected by the SDK after the end user has submitted their captured media. As a result, you can leverage Onfido’s advanced on-device technology, including image quality validations, while still being able to handle end users’ data directly. This unlocks additional use cases, including compliance requirements and multi-vendor configurations, that require this additional flexibility.
351+
352+
**This feature must be enabled for your account.** Please contact your Onfido Solution Engineer or Customer Success Manager.
353+
354+
### Implementation
355+
To use this feature, use `Onfido.addCustomMediaCallback` and provide the callback.
356+
357+
```javascript
358+
Onfido.addCustomMediaCallback(
359+
mediaResult => {
360+
if (mediaResult.captureType === 'DOCUMENT') {
361+
// Callback code here
362+
} else if (mediaResult.captureType === 'FACE') {
363+
// Callback code here
364+
} else if (mediaResult.captureType === 'VIDEO') {
365+
// Callback code here
366+
}
367+
}
368+
);
369+
```
370+
371+
### User data
372+
The callbacks return an object including the information that the SDK normally sends directly to Onfido. The callbacks are invoked when the end user confirms submission of their image through the SDK’s user interface.
373+
374+
**Note:** Currently, end user data will still automatically be sent to the Onfido backend, but you are not required to use Onfido to process this data.
375+
376+
The callback returns 3 possible objects. Please note, `captureType` refers to the type of the media capture in each case.
377+
These can be `DOCUMENT`, `FACE` or `VIDEO`.
378+
379+
1. For documents(`captureType` is `DOCUMENT`), the callback returns:
380+
```json5
381+
{
382+
captureType: String
383+
side: String
384+
type: String
385+
issuingCountry: String?
386+
fileData: Data
387+
fileName: String
388+
fileType: String
389+
}
390+
```
391+
392+
**Note:** `issuingCountry` is optional based on end-user selection, and can be `null`.
393+
**Note:** If a document was scanned using NFC, the callback will return the passport photo in `file` but no additional data.
394+
395+
2. For live photos (`captureType` is `FACE`), the callback returns:
396+
```json5
397+
{
398+
captureType: String
399+
fileData: Data
400+
fileName: String
401+
fileType: String
402+
}
403+
```
404+
405+
3. For videos(`captureType` is `VIDEO`), the callback returns:
406+
```json5
407+
{
408+
captureType: String
409+
fileData: Data
410+
fileName: String
411+
fileType: String
412+
}
300413
```
301414

302415
### 1. Creating the SDK configuration
@@ -500,7 +613,78 @@ Finally, as you are testing with the sandbox token, please be aware that the res
500613

501614
## Theme Customization
502615

503-
You can customize the SDK by adding a `colors.json` file to your project at the same level as your `node_modules` directory. The file should contain a single json object with the desired keys and values. For example:
616+
### Android
617+
618+
You can customize the SDK's appearance by overriding `OnfidoActivityTheme` in `app/src/main/res/values/styles.xml` or `app/src/main/res/values/themes.xml` in the `android` directory of your project. Make sure to set `OnfidoBaseActivityTheme` as the parent of `OnfidoActivityTheme` in your style definition.
619+
620+
You can use the following snippet as an example:
621+
622+
```xml
623+
<style name="OnfidoActivityTheme" parent="OnfidoBaseActivityTheme">
624+
<!--
625+
All colors referenced in this theme should be defined in your colors.xml.
626+
Alternatively, you can use hexadecimal color values directly in this theme.
627+
-->
628+
<item name="onfidoColorToolbarBackground">@color/brand_dark_blue</item>
629+
<item name="colorPrimary">@color/brand_dark_blue</item>
630+
<item name="colorPrimaryDark">@color/brand_transparent</item>
631+
<item name="colorAccent">@color/brand_accent_color</item>
632+
633+
<!--
634+
All referenced fonts need to be added to your project first.
635+
See https://developer.android.com/develop/ui/views/text-and-emoji/fonts-in-xml
636+
-->
637+
<item name="onfidoFontFamilyTitle">@font/montserrat_semibold</item>
638+
<item name="onfidoFontFamilyBody">@font/font_montserrat</item>
639+
<item name="onfidoFontFamilyButton">@font/font_montserrat</item>
640+
<item name="onfidoFontFamilyDialogButton">@font/font_montserrat</item>
641+
</style>
642+
```
643+
644+
The following attributes are currently supported:
645+
646+
* **`onfidoColorToolbarBackground` and `colorPrimary`**: Background color of the tool bar that guides the user through the flow. Both attributes need to be provided if you want to customize the tool bar across all screens in the SDK.
647+
* **`onfidoColorToolbarBackgroundDark`**: Background color of the tool bar in screens with a dark background such as the capture screen (when overlay views are displayed)
648+
* **`colorPrimaryDark`**: Color of the status bar (above the tool bar)
649+
* **`onfidoColorToolbarTitle`**: Color of the tool bar's title text
650+
* **`onfidoColorToolbarTitleDark`**: Color of the tool bar's title text in screens with a dark background
651+
* **`colorAccent`**: Accent color. Default value is blue
652+
* **`onfidoColorButtonPrimary`**: Background color of primary buttons
653+
* **`onfidoColorButtonPrimaryText`**: Text color of primary buttons
654+
* **`onfidoColorButtonPrimaryPressed`**: Background color of primary buttons when pressed
655+
* **`onfidoColorTextPrimary`**: Color of primary texts on screen
656+
* **`onfidoColorTextSecondary`**: Color of secondary texts on screen
657+
* **`onfidoColorTextPrimaryDark`**: Color of primary texts on dark backgrounds (in the light theme) such as Motion screens and overlay views in the capture screen
658+
* **`onfidoFontFamilyTitle`**: Name of the font used for title texts
659+
* **`onfidoFontFamilySubtitle`**: Name of the font used for subtitle texts
660+
* **`onfidoFontFamilyBody`**: Name of the font used for body/content texts
661+
* **`onfidoFontFamilyButton`**: Name of the font used in buttons
662+
* **`onfidoFontFamilyToolbarTitle`**: Name of the font used for toolbar title texts
663+
* **`onfidoFontFamilyDialogButton`**: Name of the font used in dialogs' buttons
664+
665+
**Note:**
666+
The usage of `color.json` and the `updateColors` command is now deprecated for Android. Please provide the theme attributes in your `styles.xml` or `themes.xml` as mentioned above.
667+
668+
#### Customizing Dimensions
669+
670+
To customize supported dimnesions, you can add an Android resource file named `dimens.xml` in the following directory of your project: `android/app/src/main/res/values`.
671+
672+
Please see the snippet below as an example.
673+
674+
```xml
675+
<resources>
676+
<dimen name="onfidoButtonCornerRadius">8dp</dimen>
677+
</resources>
678+
```
679+
680+
The following dimensions are currently supported:
681+
682+
* **`onfidoButtonCornerRadius`**: The corner radius of all buttons in the SDK, provided in the `dp` unit
683+
684+
685+
### iOS
686+
687+
You can customize the SDK by adding a `colors.json` file to your xcode project as bundle resource. The file should contain a single json object with the desired keys and values. For example:
504688

505689
```json
506690
{
@@ -512,32 +696,25 @@ You can customize the SDK by adding a `colors.json` file to your project at the
512696
"onfidoIosSupportDarkMode": true,
513697
"secondaryTitleColor": "#FF0000",
514698
"secondaryBackgroundPressedColor": "#FF0000",
515-
"bubbleErrorBackgroundColor": "#F53636",
516699
"buttonCornerRadius": 20,
517700
"fontFamilyTitle": "FONT_NAME_FOR_TITLES",
518701
"fontFamilyBody": "FONT_NAME_FOR_CONTENT",
519-
"captureSuccessColors": {
520-
"borderColor": "#51D17B",
521-
"tickViewImageTintColor": "#058731",
522-
"tickViewBackgroundColor": "#CBF8DA"
523-
}
524702
}
525703
```
526704

527-
Below is a description of all available keys:
528-
* **`onfidoPrimaryColor`**: Defines the background color of views such as the document type icon, capture confirmation buttons, and back navigation button.
529-
* **`onfidoPrimaryButtonTextColor`**: Defines the text color of labels included in views such as capture confirmation buttons.
530-
* **`onfidoPrimaryButtonColorPressed`**: Defines the background color of capture confirmation buttons when pressed.
531-
* **`onfidoAndroidStatusBarColor`**: Android only. Defines the background color of the `Toolbar` that guides the user through the flow.
532-
* **`onfidoAndroidToolBarColor`**: Android only. Defines the color of the status bar above the `Toolbar`.
533-
* **`onfidoIosSupportDarkMode`**: iOS Only. Defines if Dark Mode will be supported on SDK screens. The value is true by default.
705+
The following attributes are currently supported:
534706

535-
Once you've added the colors.json to your project, you should add colors.json file to your xcode project as bundle resource. You can create symbolic link (rather than copy paste) to prevent redundancy. You can check out SampleApp project to see example usage.
536-
Then when running on an iOS device the values will be picked up dynamically at runtime. For Android devices to pick up the values you will need to run the following command at the same level of your `node_modules` directory. This will also be run when running the `npm --prefix node_modules/@onfido/react-native-sdk/ run updateOnfido` command.
707+
* **`onfidoPrimaryColor`**: Background color of views such as capture confirmation buttons, back navigation button, and play and pause buttons in liveness/video capture intro
708+
* **`onfidoPrimaryButtonTextColor`**: Text color of labels included in views such as capture confirmation buttons
709+
* **`onfidoPrimaryButtonColorPressed`**: Defines the background color of capture confirmation buttons when pressed
710+
* **`onfidoIosSupportDarkMode`**: Defines whether dark mode will be supported (true by default)
711+
* **`secondaryTitleColor`**: Secondary button text and border color
712+
* **`secondaryBackgroundPressedColor`**: Secondary button pressed state color
713+
* **`buttonCornerRadius`**: Border corner radius for all buttons (default value is 5.0)
714+
* **`fontFamilyTitle`**: Name of the font used for title texts
715+
* **`fontFamilyBody`**: Name of the font used for body/content texts
537716

538-
```shell
539-
$ npm --prefix node_modules/@onfido/react-native-sdk/ run updateColors
540-
```
717+
You can check out the [iOS SampleApp](https://github.com/onfido/onfido-ios-sdk/tree/master/SampleApp) for example usage. When running on an iOS device, the values will be picked up dynamically at runtime.
541718

542719
## Going live
543720

0 commit comments

Comments
 (0)