Handling flow collectors in React Native

PingOne React Native

A DaVinci flow can return an action that changes the route through the flow instead of collecting the values currently displayed. For example, a flow might offer a Forgot password action or a link to a registration branch.

The React Native bridge exposes these actions as ACTION, FLOW_BUTTON, and FLOW_LINK collectors. They are immediate collectors, so your app should render them as buttons or links rather than as ordinary form fields.

When the user activates one, the SDK submits only that flow action and advances to the next node. The action bypasses other values in the current form.

Submitting a flow collector

Use submitFlow(flowKey) when the action is represented by a separate application control. The flowKey must match the collector key in the active ContinueNode.

useDaVinciForm needs access to the next action, either through the options argument or through a surrounding DaVinciProvider.

Render a flow action

import { useEffect } from 'react';
import { Button, Text, View } from 'react-native';
import { useDaVinci, useDaVinciForm } from '@ping-identity/rn-davinci';

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 flow = form.fields.find(
    field =>
      field.type === 'ACTION' ||
      field.type === 'FLOW_BUTTON' ||
      field.type === 'FLOW_LINK',
  );

  if (!flow) return null;

  return (
    <View>
      <Button
        title={flow.label || flow.key}
        onPress={() => void form.submitFlow(flow.key)}
      />
      <Text>Choose an action to continue.</Text>
    </View>
  );
}

You can also connect a rendered control directly to form.setValue(flow.key, value). For a flow collector, that call immediately invokes next() with the selected action. Use submitFlow() when you want the intent to be explicit or when the control does not directly represent a collector object.

Do not include ACTION, FLOW_BUTTON, or FLOW_LINK in a normal form payload with the other fields. The form helper excludes these collectors from ordinary submission and handles them as separate flow actions.

The next result can be another ContinueNode, a SuccessNode, an ErrorNode, or a FailureNode. Handle the result with the same node-state logic described in Stepping through DaVinci flows.

Orchestration SDKs

Handling flow collectors in React Native

Submitting a flow collector