--- title: Before you begin description: Prerequisites, compatibility requirements, and PingOne DaVinci configuration steps needed before starting the React Native tutorial. component: orchsdks page_id: orchsdks:davinci:try-it-out/react-native/00_before-you-begin canonical_url: https://developer.pingidentity.com/orchsdks/davinci/try-it-out/react-native/00_before-you-begin.html llms_txt: https://developer.pingidentity.com/orchsdks/llms.txt docs_for_agents: https://developer.pingidentity.com/build-with-ai/docs-for-agents.md keywords: ["PingOne", "DaVinci", "Setup & Configuration", "Source Code", "Tutorial", "SDK", "React Native"] section_ids: compatibility: Compatibility prerequisites: Prerequisites server_configuration: Server configuration --- # Before you begin [icon: circle-check, set=far]PingOne [icon: react, set=fab]React Native * **Prepare** * [Download](01_download_samples.html) * [Install](02_prepare-projects.html) * [Configure](03_configure_sample.html) * [Run](04_run_the_sample.html) 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 > **Collapse: View supported fields** > > * [HTTP Connector field and collector support](#http-connector-fields-react-native-compatibility) > > * [HTTP Connector SK-Component support](#http-connector-sk-components-react-native-compatibility) > > **HTTP Connector field and collector support** > > | Field | Collector | | | | > | ------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------------------ | ----------------------------- | ---------------------------- | > | | Android | iOS | JavaScript | React Native | > | **Text field**Collects a single text string. | `TextCollector``1.0.0` | `TextCollector``1.0.0` | `TextCollector``1.0.0` | TextCollector`1.1.0` | > | **Password field**Collects a single text string that cannot be read from the screen. | `PasswordCollector``1.0.0` | `PasswordCollector``1.0.0` | `PasswordCollector``1.0.0` | PasswordCollector`1.1.0` | > | **Submit Button**Sends the collected data to PingOne to continue the DaVinci flow. | `SubmitCollector``1.0.0` | `SubmitCollector``1.0.0` | `SubmitCollector``1.0.0` | SubmitCollector`1.1.0` | > | **Flow Button**Triggers an alternative flow without sending the data collected so far to PingOne. | `FlowCollector``1.0.0` | `FlowCollector``1.0.0` | `FlowCollector``1.0.0` | FlowCollector`1.1.0` | > | **Label**Display a read-only text label. | `ReadOnlyTextCollector``1.1.0` | `LabelCollector``1.1.0` | `ReadOnlyCollector``1.1.0` | LabelCollector`1.1.0` | > | **Radio** / **Dropdown**Collects a single value from a choice of multiple options. | `SingleSelectCollector``1.1.0` | `SingleSelectCollector``1.1.0` | `SingleValueCollector``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. | `IdpCollector``1.1.0` | `IdpCollector``1.1.0` | `IdpCollector``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. | `ProtectCollector``1.3.0` | `ProtectCollector``1.3.0` | `ProtectCollector``1.3.0` | ProtectCollector`1.1.0` | > **Collapse: View unsupported features** > > Verify that your flow does not depend on any *unsupported* elements: > > * SKPolling components > > The [**SKPolling**](https://docs.pingidentity.com/davinci/flows/davinci_sk_components.html#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 > **Collapse: View supported fields** > > * [Connector property support](#form-connector-properties-react-native-compatibility) > > * [Custom Fields support](#form-connector-fields-react-native-compatibility) > > * [Toolbox support](#form-connector-toolbox-react-native-compatibility) > > **Connector property support** > > | Property | Collector | | | | > | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ------------------------- | ------------------------- | ----------------------- | > | | Android | iOS | JavaScript | React Native | > | **Enable Device Profiling**Instructs PingOne Protect to collect device information. | `ProtectCollector``2.0.0` | `ProtectCollector``2.0.0` | `ProtectCollector``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. | `ProtectCollector``2.0.0` | `ProtectCollector``2.0.0` | `ProtectCollector``2.0.0` | ProtectCollector`1.1.0` | > > **Custom Fields support** > > | Field | Collector | | | | > | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | > | | Android | iOS | JavaScript | React Native | > | **Checkbox**Collects `true` or `false` from a checkbox or switch. | `BooleanCollector``2.1.0` | `BooleanCollector``2.1.0` | `BooleanCollector` / `ValidatedBooleanCollector`\[[1](#_footnotedef_1 "View footnote.")]`2.1.0`***[1](#_footnoteref_1). `ValidatedBooleanCollector` is returned for required checkboxes, and `BooleanCollector` for optional ones. | BooleanCollector`1.1.0` | > | **Checkbox List**Collects the value of one or more checkboxes. | `MultiSelectCollector``1.1.0` | `MultiSelectCollector``1.1.0` | `MultiValueCollector``1.1.0` | MultiSelectCollector`1.1.0` | > | **Combobox**Collects a value from a dropdown containing one or more text strings. | `MultiSelectCollector``1.1.0` | `MultiSelectCollector``1.1.0` | `MultiValueCollector``1.1.0` | MultiSelectCollector`1.1.0` | > | **Dropdown**Collects a value from a dropdown containing one or more text strings. | `SingleSelectCollector``1.1.0` | `SingleSelectCollector``1.1.0` | `SingleValueCollector``1.1.0` | SingleSelectCollector`1.1.0` | > | **Password**Collects a single text string that cannot be read from the screen, and optionally verifies the provided value against a policy.\[[2](#_footnotedef_2 "View footnote.")]***[2](#_footnoteref_2). Support for verification against password policies was added in 2.1.0 | `PasswordCollector``1.1.0` | `PasswordCollector``1.1.0` | `PasswordCollector``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. | ❌ | ❌ | `ValidatedPasswordCollector``2.1.0` | ❌ | > | **Phone Number Input**Collects a phone number, with optional country code, and extension values.\[[3](#_footnotedef_3 "View footnote.")]***[3](#_footnoteref_3). Support for the extension value was added in 2.1.0 | `PhoneNumberCollector``1.2.0` | `PhoneNumberCollector``1.2.0` | `PhoneNumberCollector` / `PhoneNumberExtensionCollector``1.2.0` | PhoneNumberCollector`1.1.0` | > | **Radio Button List**Collects a value from one or radio buttons. | `SingleSelectCollector``1.1.0` | `SingleSelectCollector``1.1.0` | `SingleValueCollector``1.1.0` | SingleSelectCollector`1.1.0` | > | **Submit Button**Presents a button for form submission. | `SubmitCollector``1.1.0` | `SubmitCollector``1.1.0` | `SubmitCollector``1.1.0` | SubmitCollector`1.1.0` | > | **Text Input**Collects a single text string. | `TextCollector``1.1.0` | `TextCollector``1.1.0` | `TextCollector``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. | `ReadOnlyTextCollector``2.1.0` | `ReadOnlyTextCollector``2.1.0` | `ReadOnlyCollector``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.3.0` | `FidoAuthenticationCollector` / `FidoRegistrationCollector``1.3.0` | `FidoAuthenticationCollector` / `FidoRegistrationCollector``1.3.0` | FidoAuthenticationCollector / FidoRegistrationCollector`1.1.0` | > | **Image**Presents an image. | ❌ | ❌ | `ImageCollector``2.1.0` | ❌ | > | **Flow Button**Presents a customized button. | `FlowCollector``1.1.0` | `FlowCollector``1.1.0` | `FlowCollector``1.1.0` | FlowCollector`1.1.0` | > | **Flow Link**Presents a customized link. | `FlowCollector``1.1.0` | `FlowCollector``1.1.0` | `FlowCollector``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.2.0` | `DeviceAuthenticationCollector``1.2.0` | `DeviceAuthenticationCollector``1.2.0` | 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.2.0` | `DeviceRegistrationCollector``1.2.0` | `DeviceRegistrationCollector``1.2.0` | DeviceRegistrationCollector`1.1.0` | > | **Polling**Presents an activity indicator which allows you to pause or loop the flow while the user completes an action. | `PollingCollector``2.1.0` | `PollingCollector``2.1.0` | `PollingCollector``2.1.0` | PollingCollector`1.1.0` | > | **QR Code**Presents a QR code containing data, for example, a URL. | `QRCodeCollector``2.1.0` | `QRCodeCollector``2.1.0` | `QrCodeCollector``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. | `IdpCollector``1.1.0` | `IdpCollector``1.1.0` | `IdpCollector``1.1.0` | IdpCollector`1.1.0` | > | **Translatable Rich Text**Presents rich text, including links, that you can translate into multiple languages.\[[4](#_footnotedef_4 "View footnote.")]***[4](#_footnoteref_4). Support for links in rich text fields was added in 2.1.0 | `LabelCollector``1.1.0` | `LabelCollector``1.1.0` | `RichTextCollector``1.1.0` | LabelCollector`1.1.0` | * PingOne Protect Connector * **Create Risk Evaluation** capability > **Collapse: 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. | `ProtectCollector``1.3.0` | `ProtectCollector``1.3.0` | `ProtectCollector``1.3.0` | ProtectCollector`1.1.0` | * DaVinci SDK Integrator * **Exchange Custom Metadata with DaVinci SDK** capability > **Collapse: 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. | ❌ | ❌ | `MetadataCollector``2.2.0` | ## Prerequisites The React Native development environment must be fully configured before you begin. Follow the official [React Native environment setup guide](https://reactnative.dev/docs/set-up-your-environment) and ensure the following tools are installed: * Node.js and Yarn Install [Node.js](https://nodejs.org/) version 20 or later. This project uses Yarn. Install Yarn by running: ```shell corepack enable ``` * Xcode (iOS only) Download and install [Xcode](https://developer.apple.com/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](https://bundler.io/) with: ```shell gem install bundler ``` * CocoaPods (iOS only) CocoaPods is installed locally during the tutorial. * Android Studio (Android only) Download and install [Android Studio](https://developer.android.com/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_HOME` environment variable. For example, a `~/.zshrc` file might contain the following: ```shell export JAVA_HOME=$(/usr/libexec/java_home -v21) export PATH="$JAVA_HOME/bin:$PATH" ``` * `keytool` (Android only) `keytool` is 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](https://docs.pingidentity.com/davinci/integrating_flows_into_applications/davinci_sdk_launching_a_flow_with_the_sdk.html) 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.