Orchestration SDKs

Handling QR code collectors in React Native

PingOne React Native

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
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 for terminal statuses and continuation behavior.

See Stepping through DaVinci flows for the common collector and node model.