---
title: Handling QR code collectors in React Native
description: Render QR_CODE collectors and fallback text in a React Native DaVinci flow.
component: orchsdks
page_id: orchsdks:davinci:usage/react-native/collectors/qr-code
canonical_url: https://developer.pingidentity.com/orchsdks/davinci/usage/react-native/collectors/qr-code.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: Fri, 28 Aug 2026 00:00:00 +0000
keywords: ["DaVinci", "React Native", "QRCodeCollector", "QR_CODE", "QR code"]
section_ids:
  rendering_a_qr_code: Rendering a QR code
---

# Handling QR code collectors in 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**

* [Manage](../06-handling-sessions.html)

A DaVinci flow can use a QR code to show an out-of-band action that the user completes with a phone or another device. For example, a QR code can carry the visual part of a cross-device authentication or approval step while the flow waits for a separate result.

The React Native bridge exposes the image as a `QR_CODE` collector. The SDK supplies the image data, but it does not provide a QR scanner or a specialized QR code component. Your application chooses how to display the image and how to make it accessible.

## Rendering a QR code

The collector's `content` property contains a complete image data URI. Pass it to a React Native `Image` component, and show `fallbackText` if the content is unavailable or the image cannot load.

Render a QR code collector

```typescript
import { useState } from 'react';
import { Image, Text, View } from 'react-native';

function QrCodeField({ field }) {
  const [failed, setFailed] = useState(false);

  if (failed || !field.content) {
    return (
      <Text accessibilityRole="text">{field.fallbackText}</Text>
    );
  }

  return (
    <View>
      <Image
        accessibilityLabel={field.fallbackText}
        source={{ uri: field.content }}
        resizeMode="contain"
        onError={() => setFailed(true)}
      />
    </View>
  );
}
```

The `QR_CODE` collector is output-only. It has no user-editable value, and the form helper excludes it from the payload passed to `next()`. Do not submit the image data URI or attempt to decode it as a form value.

|   |                                                                                                                                                                                                                                         |
| - | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|   | When a QR code appears with a `POLLING` collector, render the QR code and monitor the polling collector separately with `pollStatus()`.See [Handling polling collectors](polling.html) for terminal statuses and continuation behavior. |

See [Stepping through DaVinci flows](../05-stepping-through-davinci-flows.html) for the common collector and node model.