Before you begin
PingOne React Native
To successfully complete this tutorial, refer to the prerequisites and compatibility requirements in this section.
The tutorial also requires a configured PingOne instance.
Compatibility
- React Native
-
This sample app requires React Native 0.80.1 or later.
- iOS
-
This sample app requires iOS 16.0 or later.
- Android
-
This sample app requires Android 10 (API level 29) or later.
- PingOne
-
-
Your PingOne instance must have DaVinci enabled.
-
- DaVinci flows
-
Ensure your flows only use supported connectors, capabilities and fields for user interactions:
-
HTTP Connector
-
Custom HTML capability
View supported fields
HTTP Connector field and collector support Field
Collector
Android
iOS
JavaScript
React Native
Text field
Collects a single text string.
1.0.0
1.0.0
1.0.0
TextCollector
1.1.0
Password field
Collects a single text string that cannot be read from the screen.
1.0.0
1.0.0
1.0.0
PasswordCollector
1.1.0
Submit Button
Sends the collected data to PingOne to continue the DaVinci flow.
1.0.0
1.0.0
1.0.0
SubmitCollector
1.1.0
Flow Button
Triggers an alternative flow without sending the data collected so far to PingOne.
1.0.0
1.0.0
1.0.0
FlowCollector
1.1.0
Label
Display a read-only text label.
1.1.0
1.1.0
1.1.0
LabelCollector
1.1.0
Radio / Dropdown
Collects a single value from a choice of multiple options.
1.1.0
1.1.0
1.1.0
SingleSelectCollector
1.1.0
HTTP Connector SK-Component support SK-Component
DaVinci module
Android
iOS
JavaScript
React Native
skIDP
Presents a button to allow users to authenticate using an external identity provider, such as Apple, Facebook, or Google.
1.1.0
1.1.0
1.1.0
IdpCollector
1.1.0
skrisk
Instructs the client to gather behavioral data and return it to PingOne so that it can perform risk evaluations.
1.3.0
1.3.0
1.3.0
ProtectCollector
1.1.0
View unsupported features
Verify that your flow does not depend on any unsupported elements:
- SKPolling components
-
The SKPolling component cannot be processed by the DaVinci Client and should not be included in flows.
Features such as Magic Link authentication require the SKPolling component and therefore cannot be used with the DaVinci Client.
- Images
-
Images embedded in a Custom HTML Template, such as background images or logos, cannot be passed to the Orchestration SDK as structured data.
-
-
PingOne Form Connector
-
Show Form capability
View supported fields
Connector property support Property
Collector
Android
iOS
JavaScript
React Native
Enable Device Profiling
Instructs PingOne Protect to collect device information.
2.0.0
2.0.0
2.0.0
ProtectCollector
1.1.0
Include Behavioral Data
When enabled, PingOne Protect collects behavioral data to identify non-human activity.
You must first select Enable Device Profiling to use this option.
2.0.0
2.0.0
2.0.0
ProtectCollector
1.1.0
Custom Fields support Field
Collector
Android
iOS
JavaScript
React Native
Checkbox
Collects
trueorfalsefrom a checkbox or switch.2.1.0
2.1.0
2.1.0
1.ValidatedBooleanCollectoris returned for required checkboxes, andBooleanCollectorfor optional ones.BooleanCollector
1.1.0
Checkbox List
Collects the value of one or more checkboxes.
1.1.0
1.1.0
1.1.0
MultiSelectCollector
1.1.0
Combobox
Collects a value from a dropdown containing one or more text strings.
1.1.0
1.1.0
1.1.0
MultiSelectCollector
1.1.0
Dropdown
Collects a value from a dropdown containing one or more text strings.
1.1.0
1.1.0
1.1.0
SingleSelectCollector
1.1.0
1.1.0
1.1.0
1.1.0
PasswordCollector
1.1.0
New Password
Collects a new password and validates it against the environment’s password policy. Optionally presents password requirements to the user.
❌
❌
❌
1.2.0
1.2.0
PhoneNumberCollector
1.1.0
Radio Button List
Collects a value from one or radio buttons.
1.1.0
1.1.0
1.1.0
SingleSelectCollector
1.1.0
Submit Button
Presents a button for form submission.
1.1.0
1.1.0
1.1.0
SubmitCollector
1.1.0
Text Input
Collects a single text string.
1.1.0
1.1.0
1.1.0
TextCollector
1.1.0
Toolbox support Field
Collector
Android
iOS
JavaScript
React Native
Agreement
Presents text configured in PingOne under User Experience > Agreements, such as terms of service.
2.1.0
2.1.0
2.1.0
ReadOnlyTextCollector
1.1.0
FIDO2
Allows users to perform multi-factor authentication with a FIDO2 device, or register a new device.
FidoAuthenticationCollector / FidoRegistrationCollector
1.1.0
Image
Presents an image.
❌
❌
2.1.0
❌
Flow Button
Presents a customized button.
1.1.0
1.1.0
1.1.0
FlowCollector
1.1.0
Flow Link
Presents a customized link.
1.1.0
1.1.0
1.1.0
FlowCollector
1.1.0
MFA Device Selection - Authentication
Presents a list of methods for performing multi-factor authentication (MFA).
DaVinci client supports the FIDO2, Email, SMS, and Voice MFA types.
DeviceAuthenticationCollector
1.1.0
MFA Device Selection - Registration
Presents a list of methods you can register for multi-factor authentication (MFA).
DaVinci client supports the FIDO2, Email, SMS, and Voice MFA types.
DeviceRegistrationCollector
1.1.0
Polling
Presents an activity indicator which allows you to pause or loop the flow while the user completes an action.
2.1.0
2.1.0
2.1.0
PollingCollector
1.1.0
QR Code
Presents a QR code containing data, for example, a URL.
2.1.0
2.1.0
2.1.0
QRCodeCollector
1.1.0
Social Login
Presents a button to allow users to authenticate using an external identity provider, such as Apple, Facebook, or Google.
1.1.0
1.1.0
1.1.0
IdpCollector
1.1.0
1.1.0
1.1.0
1.1.0
LabelCollector
1.1.0
-
-
PingOne Protect Connector
-
Create Risk Evaluation capability
View supported fields
PingOne Protect Connector support overview Capability
Collector
Android
iOS
JavaScript
React Native
Create Risk Evaluation
Sends device and behavioral data collected by PingOne Protect to DaVinci for a risk evaluation.
1.3.0
1.3.0
1.3.0
ProtectCollector
1.1.0
-
-
DaVinci SDK Integrator
-
Exchange Custom Metadata with DaVinci SDK capability
View supported fields
DaVinci SDK Integrator support overview Capability
Collector
Android
iOS
JavaScript
Exchange Custom Metadata
Exchanges custom JSON metadata and payloads between a DaVinci flow and the app, pausing flow execution until the app responds.
❌
❌
2.2.0
-
Prerequisites
The React Native development environment must be fully configured before you begin.
Follow the official React Native environment setup guide and ensure the following tools are installed:
- Node.js and Yarn
-
Install Node.js version 20 or later.
This project uses Yarn. Install Yarn by running:
corepack enable - Xcode (iOS only)
-
Download and install Xcode from the Mac App Store.
Xcode 16 or later is recommended.
- Ruby and Bundler (iOS only)
-
Ruby 3.3.6 or later is required to manage CocoaPods.
Install Bundler with:
gem install bundler - CocoaPods (iOS only)
-
CocoaPods is installed locally during the tutorial.
- Android Studio (Android only)
-
Download and install Android Studio.
An Android emulator or physical device is required to run the app.
- Java (Android only)
-
JDK 21 is required by the current Ping Android SDK dependencies used by the sample app.
Check that you are correctly setting the
JAVA_HOMEenvironment variable.For example, a
~/.zshrcfile might contain the following:export JAVA_HOME=$(/usr/libexec/java_home -v21) export PATH="$JAVA_HOME/bin:$PATH" keytool(Android only)-
keytoolis part of the Java Development Kit and is used to generate the debug signing keystore required for the Android build.
Server configuration
You must configure your PingOne instance for use with the DaVinci module.
Ask your PingOne administrator to complete the following tasks:
-
Configure a DaVinci flow
-
Create a DaVinci application
-
Configure PingOne for DaVinci flow invocation
To learn how to complete these steps, refer to Launching a flow with a Ping SDK in the PingOne DaVinci documentation.
The OAuth 2.0 client must allow the redirect URI used by the sample app.
You will enter the client ID, discovery endpoint, redirect URI, scopes, and, optionally, the DaVinci flow policy in the sample app’s .env file.