--- title: Using the DaVinci module for React Native description: Integrate the DaVinci module into a React Native app to authenticate users with PingOne flows component: orchsdks page_id: orchsdks:davinci:usage/react-native/index canonical_url: https://developer.pingidentity.com/orchsdks/davinci/usage/react-native/index.html llms_txt: https://developer.pingidentity.com/orchsdks/llms.txt docs_for_agents: https://developer.pingidentity.com/build-with-ai/docs-for-agents.md revdate: Thu, 27 Aug 2026 00:00:00 +0000 keywords: ["DaVinci", "React Native", "Get Started", "Tutorial", "Integration", "Collectors"] section_ids: configuring_the_server_for_react_native: Configuring the server for React Native installing_the_davinci_module_in_react_native: Installing the DaVinci module in React Native configuring_the_davinci_module_in_react_native: Configuring the DaVinci module in React Native starting_a_davinci_flow_in_react_native: Starting a DaVinci flow in React Native stepping_through_davinci_flows_in_react_native: Stepping through DaVinci flows in React Native managing_sessions_and_tokens_in_react_native: Managing sessions and tokens in React Native --- # Using the DaVinci module for React Native [icon: circle-check, set=far]PingOne [icon: react, set=fab]React Native *** * [Prepare](01-configuring-the-server.html) * [Install](02-installing-the-davinci-module.html) * [Configure](03-configuring-the-davinci-module.html) * [Start](04-starting-a-davinci-flow.html) * [Navigate](05-stepping-through-davinci-flows.html) * [Manage](06-handling-sessions.html) The DaVinci module for React Native brings PingOne DaVinci flows to React Native applications. It wraps the Orchestration SDK for Android and the Orchestration SDK for iOS DaVinci modules as React Native TurboModules, exposing a single TypeScript API that works across both platforms. ![Architecture diagram showing how the Orchestration SDK for React Native connects to native Android and iOS modules](../../_images/diagram-react-native-sdk-architecture.svg)Figure 1. The Orchestration SDK for React Native architecture One codebase targets Android and iOS by delegating to each platform's native DaVinci module at runtime. Optional packages for storage and logging slot in independently so you include only what your app needs. * One API, two platforms The Orchestration SDK for React Native wraps the native DaVinci modules for Android and iOS behind a single TypeScript interface using React Native TurboModules. You call the same `createDaVinciClient()`, `DaVinciProvider`, and `useDaVinci()` APIs regardless of which platform is running, and the native bridge handles the rest. This means your team works entirely in TypeScript and inherits the security and reliability of the native Orchestration SDKs without needing to maintain separate Android and iOS codebases. * Native security, zero native code Authentication and token handling run inside the native DaVinci module on each platform. The React Native layer orchestrates the flow and displays the required UI, while the native SDK handles communication with PingOne and manages sensitive authentication data. Your app gets the benefits of native security while the native SDKs remain upgradeable independently of your TypeScript layer. * DaVinci flows as a predictable state machine Every step of a DaVinci flow resolves to one of four node types: `ContinueNode` for more input, `SuccessNode` for successful authentication, `FailureNode` when the flow cannot continue, or `ErrorNode` when submitted data must be corrected. The four node types give you an exhaustive, unambiguous set of states, so your app always knows where it is in the flow. * Collectors with intent Each collector in a `ContinueNode` describes the data or action that the flow requires from your app. Collector types and metadata tell your app whether to collect input, display information, submit the current values, or hand off to an integration before continuing. You can handle collectors by type or use `useDaVinciForm` to normalize them into fields, values, and submission input. * Bring your own UI The `useDaVinciForm` hook normalizes the collectors in a node into a flat list of fields, values, validation state, default values, and options without rendering anything itself. Your components know what to render, while the SDK handles field identity, submit planning, and value validation so they stay focused on presentation. * Composable by default The React Native SDK is a monorepo of independent packages, including `rn-core`, `rn-davinci`, `rn-storage`, and `rn-logger`. Each is a standalone npm module that can be added when your app needs it. A minimal integration needs `rn-core` and `rn-davinci`. Storage and logging are opt-in, keeping your bundle and dependency surface focused. In this section you will learn how to add the **DaVinci** module, configure it to communicate with PingOne, and write the code to initiate a flow. You'll handle each step of a DaVinci flow, from collecting user input to processing the final session after successful authentication or handling errors if the flow fails. ## [Configuring the server for React Native](01-configuring-the-server.html) Before you begin, configure your PingOne instance with a DaVinci flow and application. [**Complete prerequisites**[icon: chevrons-right, set=fas, size=xs]](01-configuring-the-server.html) ## [Installing the DaVinci module in React Native](02-installing-the-davinci-module.html) Learn how to install the DaVinci module and its required React Native core package. [**Install the module**[icon: chevrons-right, set=fas, size=xs]](02-installing-the-davinci-module.html) ## [Configuring the DaVinci module in React Native](03-configuring-the-davinci-module.html) Configure the DaVinci client with your PingOne OIDC application and share state across screens when needed. [**Configure the module**[icon: chevrons-right, set=fas, size=xs]](03-configuring-the-davinci-module.html) ## [Starting a DaVinci flow in React Native](04-starting-a-davinci-flow.html) Learn how to start a DaVinci flow with the `useDaVinci` hook and share flow state across screens. [**Start the DaVinci flow**[icon: chevrons-right, set=fas, size=xs]](04-starting-a-davinci-flow.html) ## [Stepping through DaVinci flows in React Native](05-stepping-through-davinci-flows.html) Learn how to render collectors, submit user input, and handle each node returned by the server. [**Navigate DaVinci flows**[icon: chevrons-right, set=fas, size=xs]](05-stepping-through-davinci-flows.html) For collector-specific rendering and submission behavior, see: * [Handling Boolean collectors](collectors/boolean.html) * [Handling read-only text collectors](collectors/read-only-text.html) * [Handling flow collectors](collectors/flow.html) * [Handling polling collectors](collectors/polling.html) * [Handling QR code collectors](collectors/qr-code.html) ## [Managing sessions and tokens in React Native](06-handling-sessions.html) Learn how to retrieve and manage the user's OIDC session, refresh or revoke tokens, retrieve user information, and sign the user out. [**Manage sessions and tokens**[icon: chevrons-right, set=fas, size=xs]](06-handling-sessions.html)