Orchestration SDKs

Handling Boolean collectors in React Native

PingOne React Native

A DaVinci flow can use a Boolean field when it needs the user to confirm a choice instead of entering text. For example, a PingOne flow might ask the user to accept terms, confirm an option, or acknowledge information before continuing.

The React Native bridge exposes this field as a SINGLE_CHECKBOX collector with the BooleanCollector type. The collector is a manual field, so your app must render it and submit its Boolean value with the other form values.

Rendering a Boolean collector

The collector’s appearance property tells your app whether the flow requests a checkbox or a switch. The appearance describes the intended control, but your app supplies the React Native component and accessibility behavior.

The collector also includes a label, a Boolean value, and an optional richContent object. When richContent is present, render its content and apply the supplied replacements, including any links, using your app’s UI conventions.

SINGLE_CHECKBOX values must be actual Boolean values. Do not submit the strings "true" or "false".
Render a Boolean collector
import { useEffect } from 'react';
import { Button, Switch, Text, View } from 'react-native';
import { useDaVinci, useDaVinciForm } from '@ping-identity/rn-davinci';

function BooleanField({ field, form }) {
  const checked = Boolean(form.values[field.key] ?? field.defaultValue ?? false);

  if (field.appearance === 'SWITCH') {
    return (
      <Switch
        accessibilityLabel={field.label}
        value={checked}
        onValueChange={value => form.setValue(field.key, value)}
      />
    );
  }

  return (
    <Button
      title={`${checked ? '☑' : '☐'} ${field.label}`}
      accessibilityRole="checkbox"
      accessibilityState={{ checked }}
      onPress={() => form.setValue(field.key, !checked)}
    />
  );
}

function LoginScreen() {
  const { node, next, start } = useDaVinci(davinciClient);
  const form = useDaVinciForm(node, { next });

  useEffect(() => {
    start().catch(() => {}); // error surfaced via hook state
  }, [start]);

  if (node?.type !== 'ContinueNode') return null;

  const booleanFields = form.fields.filter(field => field.kind === 'boolean');

  return (
    <View>
      {booleanFields.map(field => (
        <BooleanField key={field.key} field={field} form={form} />
      ))}
      <Button
        title="Continue"
        disabled={!form.canSubmit}
        onPress={() => void next(form.input)}
      />
    </View>
  );
}

The useDaVinciForm hook initializes a Boolean field with false when the collector does not provide a default. A required field remains incomplete while its value is false, so form.canSubmit remains false until the user selects it.

Validating required Boolean fields

A required BooleanCollector must have a true value before the flow can continue. If the user leaves it unchecked, the form helper reports REQUIRED_VALUE_MISSING in form.issues.

The collector also exposes errorMessage for the native validation message. Display that message near the control when the native response supplies it.

Do not enable submission only because the control has a value. Check form.canSubmit so your app also handles required fields and any other blocking collector issues in the same step.

See Stepping through DaVinci flows for the common form and submission model.