# React Native SDK / Plugin

### Installation (RN >= 0.74)

```
npm i @faceki/blaze-react-native
npm i react-native-vision-camera
npm i lottie-react-native
npm i @bam.tech/react-native-image-resizer@3.0.7
```

This SDK is tested with @bam.tech/react-native-image-resizer version 3.0.7, you can use latest if doesn't work. Kindly use version 3.0.7

### Permissions

**Android:**

Add the following uses-permission to your AndroidManifest.xml (usually found at: android/app/src/main/)

```
<uses-permission android:name="android.permission.CAMERA" />
```

**IOS**

Add the following usage descriptions to your Info.plist (usually found at: ios/PROJECT\_NAME/)

```
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>
```

### Add Support for Gif in Android

Add to your dependencies in android/app/build.gradle

```
dependencies {
 // For animated GIF support
 implementation ("com.facebook.fresco:animated-gif:2.5.0")
}
```

More information: <https://reactnative.dev/docs/image?syntax=functional#gif-and-webp-support-on-android>

### Troubleshoot for react-native-vector-icons

**Android**

Add this in your android/app/build.gradle If not already added.

```
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```

**IOS**

Add this to info.plist if you have issues in showing icons from react native vector icons

```
<key>UIAppFonts</key>
    <array>
		<string>AntDesign.ttf</string>
		<string>Entypo.ttf</string>
		<string>EvilIcons.ttf</string>
		<string>Feather.ttf</string>
		<string>FontAwesome.ttf</string>
		<string>FontAwesome5_Brands.ttf</string>
		<string>FontAwesome5_Regular.ttf</string>
		<string>FontAwesome5_Solid.ttf</string>
		<string>Fontisto.ttf</string>
		<string>Foundation.ttf</string>
		<string>Ionicons.ttf</string>
		<string>MaterialCommunityIcons.ttf</string>
		<string>MaterialIcons.ttf</string>
		<string>Octicons.ttf</string>
		<string>SimpleLineIcons.ttf</string>
		<string>Zocial.ttf</string>
	</array>
```

Add this in your podfile

```
target 'targetPackage' do
config = use_native_modules!

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
end
```

For More Information & Detailed Guide About Icons: <https://www.npmjs.com/package/react-native-vector-icons>

RUN

```
cd ios && pod install && cd ..
```

### USAGE

You would need to generate EKYC Link through the API here:

<https://docs.faceki.com/api-integration/verification-apis/generate-kyc-link>

In the response use the key "data" to initiate the SDK

```
import FacekiApp from '@faceki/blaze-react-native';

<>
  <FacekiApp
    verification_url={"XXXX-XXXX-xxxX-XxXXX"}
    onError={onError}
    onComplete={onComplete}
    record_identifier="unique-id-from-your-side"
  />
</>;
```

Advance Usage

```
import FacekiApp from '@faceki/blaze-react-native';
import { Branding } from '@faceki/blaze-react-native/src/service/types/interfaces';

 const CustomBranding:Branding ={
    colors: {
      primary: '#F8B427',
      secondary: '#343333',
      buttonColor: 'rgba(253, 181, 40, 0.10)',
      success: '#59C547',
      danger: '#FF3B30',
      warning: '#FF9500',
      info: '#5AC8FA',
      light: '#F5F5F5',
      dark: '#1C1C1E',
      background: '#f5f5f5',
      backgroundSecondary: '#eeeeee',
      backgroundCaptureBtn: '#F6F6F7',
      textDefault: '#444343',
      textSecondary: '#3E3E3E',
      fontRegular:"Inter",
      fontMedium:"Inter-Medium",
      fontBold:"Inter-Bold"
    },
    images:{
      card_guidance:"", //optional
      selfie_guidance:"" //optional
    }
  }
  
<>
  <FacekiApp
  verification_url={"XXXX-XXXX-xxxX-XxXXX"}
  record_identifier="unique-id-from-your-side"
  onError={(error) => {
    console.log("ERROR", error);
  }}
  onComplete={(data) => {
    console.log("EKYCdata", data);
  }}
  onLivenessError={(imageBase64, response) => {
    console.log(imageBase64, response);
  }}
  resultContent={{
    success: {
      heading: "",
      subHeading: "",
    },
    fail: {
      heading: "",
      subHeading: "",
    },
  }}
  consenttermofuseLink="https://faceki.com"
  logoURL="http://xyz.com/zyx.png"
  skipFirstScreen={true} // true | false (If you want to disable first getting started screen)
  skipGuidanceScreens={true} // true | false (if you want to hide the guidance screens)
  skipResultScreen={true} // true | false (if you want to skip the result screen and manage your logic by onError or onComplete method)
  branding={CustomBranding}
/>;

</>;
```

### NOTE:

To request camera permissions from users on iOS in your app, you can utilize the 'react-native-permissions' package. However, for Android devices, the camera permission is by default handled by the package. [react-native-permissions](https://www.npmjs.com/package/react-native-permissions)

### Troubleshoot

Vector icons are causing an issue in the release build in version <= 9.2.0 in android. There is an ongoing discussion about it. Simple fix until the new version is released.

Go to node\_modules/react-native-vector-icons/fonts.gradle

Add this 👇

```
android.applicationVariants.all { def variant ->
    def targetName = variant.name.capitalize()
    def lintVitalAnalyzeTask = tasks.findByName("lintVitalAnalyze${targetName}")
    if (lintVitalAnalyzeTask) {
        lintVitalAnalyzeTask.dependsOn(fontCopyTask)
    }
    def generateAssetsTask = tasks.findByName("generate${targetName}Assets")
    generateAssetsTask.dependsOn(fontCopyTask)
}
```

You can read on 👉 [GitHub Discussion](https://github.com/oblador/react-native-vector-icons/issues/1508)

Sometimes it's better to reinstall all the node\_modules and pods again

```
rm -rf node_modules && rm -rf yarn.lock && watchman watch-del-all && cd ios && rm -rf Pods && rm -rf Podfile.lock && pod deintegrate && pod cache clean --all && cd ..
npm i
cd ios && pod install
```

### Change Log

* 2024-05-03 -- 1.0.7
  * Added Callback for LivenessFailed
* 2024-05-03 -- 1.0.6
  * Update for Vision Camera V4 (4.5.3)
  * Support for the React Native 0.74.X
* 2024-05-03 -- 1.0.5
  * Update For Removing Client ID and Secret replaced with Generated EKYC Link
* 2024-02-26 -- 1.0.4
  * Update For Issue 413, Resize/Compress Image Added
* 2024-02-25 -- 1.0.3
  * Update Guidance Gifs
* 2024-02-25 -- 1.0.2
  * Update Vector Icon to Latest
* 2024-02-14 -- 1.0.1
  * Upgraded React Vision Camera V2 to V3
* 2024-1-24 -- 1.0.0
  * Initial Release for FACEKI BLAZE 3.0

<br>

### Need Support?&#x20;

Contact us on WhatsApp [Click here ](https://wa.me/+13026131330)<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.faceki.com/mobile-sdk/react-native-sdk-plugin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.