Persona Developer Hub

Welcome to the Persona developer hub. You'll find comprehensive guides and documentation to help you start working with personaidentities as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started

React Native SDK Integration

Installation

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

Install iOS pods

cd ios; pod install

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.

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 (Development)[https://withpersona.com/dashboard/development].

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.

const InquiryLauncher = ({templateId}) => {
  const handleSuccess = useCallback((inquiryId, attributes) => {
     console.log("Inquiry #{inquiryId} succeeded with attributes #{attributes}");
  }, []);

  const handleCancelled = useCallback(() => {
    console.log("Inquiry was cancelled")
  }, []);

  const handleFailed = useCallback(inquiryId => {
    console.log("Inquiry #{inquiryId} failed.")
  }, []);

  const handleError = useCallback(error => {
    console.error(error);
  }, []);

  const handleBeginInquiry = useCallback(() => {
    Inquiry.fromTemplate(templateId)
      .onSuccess(handleSuccess)
      .onCancelled(handleCancelled)
      .onFailed(handleFailed)
      .onError(handleError)
      .build()
      .start();
  }, [templateId])

  return (
    <Button onPress={handleBeginInquiry} title="Start inquiry" />
  )
}

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: "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()

Theming

Theming support is available on "react-native-persona": "> 0.3.1"

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.

🚧

Platform differences for themes

iOS and Android theming capabilities are constrained by the platform.

Some values that work on one platform and the other. Our support chart is available for viewing when you run yarn persona-tool and select "Update Android theme" or "Update iOS theme"

📘

Custom Font support

Custom font support requires advanced integration with the underlying mobile app.

Please reach out to [email protected] if you're interested in this.

Updated 19 days ago

React Native SDK Integration


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.