DocumentationAPI Reference
DocumentationAPI Reference

React Native SDK v1 Integration

❗️

Cocoapods 1.9.3 is incompatible

Cocoapods 1.9.3 has a bug that prevents builds from selecting the correct architecture. See more details here: https://github.com/CocoaPods/CocoaPods/pull/9790.

To install, please downgrade to 1.8.x or upgrade to 1.10.x

Installation

Inquiry SDK latestInquiry SDK latest
To install the Persona React Native SDK within your React Native application, if you use yarn to manage your project dependencies

yarn add react-native-persona

If you use npm to manage your project dependencies

npm i react-native-persona

Configure Android

Add Maven repository

Open your android/build.gradle file. Add the Persona Maven repository to the bottom of your repository list.

allprojects {
    repositories {
        // ...
        maven { 
            url 'https://sdk.withpersona.com/android/releases'
        }
    }
}

Make sure minimum compile is over 30

In the app/build.gradle file, make sure the compileSdkVersion is at least 31.

android {
   // ...
   compileSdkVersion = 31
   // ...
}

If you change the targetSdkVersion to be above 30 as well, you'll need to set android:exported="true" on your Activity in the AndroidManifest.xml file.

Configure iOS

Install iOS pods

cd ios; pod install

Enable iOS Permissions

Ensure access to the Camera within your iOS app.

Modify your Info.plist:

Navigate to your project’s settings in Xcode and click the Info tab
Add a new Privacy - Camera Usage Description entry (if not already present) to enable camera access.

Set iOS minimum deployment target

Our native iOS SDK requires a minimum iOS deployment target of 11.0.

In your project's ios/Podfile, ensure your platform target is set to 11.0.

platform :ios '11.0'

iOS frameworks support

🚧

Ensure use_frameworks! is within your ios/Podfile.

Recent versions of React Native project generators should have this included by default. If you have been incrementally updating your React Native project from older versions, however, you may need to add this.

Without use_frameworks! the SDK will fail to compile due to problems importing Lottie, which is a dependency of the SDK.

Usage

The Persona Inquiry flow can be initiated with either a template ID or an inquiry ID.

Please refer to the code sample below and replace my_template_id with your template ID. You can find your template ID on the Persona Dashboard under Integration.

This starts the Inquiry flow and takes control of the user interface. Once the flow completes, the control of the user interface is returned to the app and the appropriate callbacks are called.

import Inquiry, {Environment} from 'react-native-persona';
// ...
<Button
  title="Start Inquiry"
  onPress={() => {
    Inquiry.fromTemplate('tmpl_JAZjHuAT738Q63BdgCuEJQre')
      .environment(Environment.SANDBOX)
      .onSuccess((inquiryId, attributes) =>
        Alert.alert('Success', `Inquiry ${inquiryId} succeeded`,),
      )
      .onCancelled(() =>
        Alert.alert('Canceled', 'Inquiry was cancelled'),
      )
      .onFailed(inquiryId =>
        Alert.alert('Failed', `Inquiry ID: ${inquiryId}`),
      )
      .onError(error => Alert.alert('Error', error.message))
      .build()
      .start();
  }}
/>

Inquiry Attributes

The onSuccess callback returns attributes, which is an object containing information extracted during the inquiry. The attributes object includes birthdate, name, and address.

Configuration options

Some different configuration example can be found below

// Configuration with only a template ID
Inquiry.fromTemplate("tmpl_JAZjHuAT738Q63BdgCuEJQre").build().start();

// Configuration with only a template ID in the sandbox
Inquiry.fromTemplate("tmpl_JAZjHuAT738Q63BdgCuEJQre")
   .environment(Environment.SANDBOX)

// Configuration with a template and reference ID
Inquiry.fromTemplate("tmpl_JAZjHuAT738Q63BdgCuEJQre")
   .referenceId("myReference")
   .build()
   .start();

// Configuration with a template and account ID
Inquiry.fromTemplate("tmpl_JAZjHuAT738Q63BdgCuEJQre")
    .accountId("act_W6thEnEU19gphPqq5uTzZ4Y8")
    .build()
    .start();

// Configuration with only an inquiry ID
Inquiry.fromInquiry("inq_JAZjHuAT738Q63BdgCuEJQre").build().start();

// Configuration resuming an inquiry session with an access token 
Inquiry.fromInquiry("inq_JAZjHuAT738Q63BdgCuEJQre")
    .accessToken("SOME_SESSION_TOKEN")
    .build()
    .start();

Theming

In order to theme the experience, use the persona-tool to customize the colors of Persona Inquiry flow. The tool itself acts as a guide to walk you through theming your experience.

# yarn
yarn persona-tool

# npm
npx persona-tool

Follow the instructions provided by the theming tool to set up the proper configuration. Themes will need to be configured separately for iOS and Android.

For more information on theming, view React Native SDK Theming

Replacing strings

You can replace title, body, or button text by overwriting string resource files.

Replacing strings on Android

React Native strings files are typically located in android/app/src/main/res/values/strings.xml or android/app/src/main/res/values-<LANGUAGE>/strings.xml. Any strings you write will replaces those used by the Persona SDK.

Example:

<resources>
  <!-- some of your strings.xml strings -->
  <string name="persona_inquiry_start_title">This is the start screen title.</string>
  <string name="persona_inquiry_start_body">This is below that in the body.</string>
  <string name="persona_inquiry_start_button">I\'m a button!</string>
  <!-- more of your strings.xml strings -->
</resources>

Available Android String Keys

  • persona_contact_support_body
  • persona_contact_support_button
  • persona_contact_support_title
  • persona_countryselect_body
  • persona_countryselect_button
  • persona_countryselect_title
  • persona_governmentid_failed_title
  • persona_governmentid_start_body
  • persona_governmentid_start_title
  • persona_governmentid_submitting_body
  • persona_governmentid_submitting_title
  • persona_inquiry_complete_body
  • persona_inquiry_complete_button
  • persona_inquiry_complete_title
  • persona_inquiry_failed_body
  • persona_inquiry_failed_button
  • persona_inquiry_failed_title
  • persona_inquiry_start_body
  • persona_inquiry_start_button
  • persona_inquiry_start_title
  • persona_selfie_failed_body
  • persona_selfie_failed_button
  • persona_selfie_failed_title
  • persona_selfie_start_body
  • persona_selfie_start_button
  • persona_selfie_start_title
  • persona_selfie_submitting_body
  • persona_selfie_submitting_title

Replacing strings on iOS

Provide a Persona.strings file that replaces strings used by the Persona SDK.

Example:

/* 
  Persona.strings
*/

"inquiryStartTitle" = "Verify your identity";
"inquiryStartBody" = "Let’s make sure you’re you!";
"inquiryStartButton" = "Get started";

Available iOS String Keys

// Government ID
"governmentIdFailedTitle" = "Couldn’t verify photos";
"governmentIdFailedGenericReason" = "Make sure the ID details are clear to read.";
"governmentIdFailedButton" = "Retry";
"governmentIdStartTitle" = "Upload a photo ID";
"governmentIdStartBody" = "We require a photo of a government ID to verify your identity.";
"governmentIdSubmittingTitle" = "Processing ID";
"governmentIdSubmittingBody" = "This may take a few seconds";
"governmentIdChooseType" = "Choose 1 of the following options";

// Taking Government ID photos
"takeGovIdPhotoHint" = "Take a clear photo of the ID";
"takeGovIdRetakePhotoButtonText" = "Retake";
"takeGovIdReviewBackPhoto" = "Review the back of ID";
"takeGovIdReviewFrontOrBackPhoto" = "Review the ID";
"takeGovIdReviewFrontPhoto" = "Review the front of ID";
"takeGovIdUsePhotoButtonText" = "Looks good";
"takeGovIdReviewPhotoHint" = "Ensure lighting is good and lettering is clear";
"takeGovIdBackPhotoFormat" = "Back of %@";
"takeGovIdFrontPhotoFormat" = "Front of %@";
"takeGovIdGuideHintBackFormat" = "Position the back of the %@ in the frame";
"takeGovIdGuideHintFrontFormat" = "Position the front of the %@ in the frame";

// Selfie
"selfieFailedTitle" = "Something went wrong";
"selfieFailedBody" = "Make sure your face is visible, well lit, and try again.";
"selfieFailedButton" = "Retry";
"selfieStartTitle" = "Take a selfie";
"selfieStartBody" = "Let’s make sure you’re you";
"selfieStartButton" = "Get started";
"selfieSubmittingTitle" = "Processing selfie";
"selfieSubmittingBody" = "This may take a few seconds";
"takeSelfieCenterPhoto" = "Center yourself in the frame.";
"takeSelfieLeftPhoto" = "Look slightly left.";
"takeSelfieRightPhoto" = "Look slightly right.";

// Country selection
"countrySelectTitle" = "What country is your government ID from?";
"countrySelectBody" = "This helps us determine the best way to verify your identity.";
"countrySelectButton" = "Select country";
"countrySelectPickerText" = "Country of government ID";

// Country List
"countryListAllCountries" = "ALL COUNTRIES";
"countryListSuggested" = "SUGGESTED";
"countryListTitle" = "Select country of ID";

// Inquiry Complete
"inquiryCompleteTitle" = "Congratulations, you’re done!";
"inquiryCompleteBody" = "Thanks for verifying your identity.";
"inquiryCompleteButton" = "Done";

// Inquiry Failed
"inquiryFailedTitle" = "Could not verify your identity";
"inquiryFailedBody" = "We were unable to verify your identity.";
"inquiryFailedButton" = "Close";

// Inquiry Start
"inquiryStartTitle" = "Verify your identity";
"inquiryStartBody" = "Let’s make sure you’re you";
"inquiryStartButton" = "Get started";

// Database
"databaseStartTitle" = "Just the basics";
"databaseStartBody" = "Nothing fancy, just a few things to verify your identity.";
"databaseStartButton" = "Continue";