Present flows in Observer mode - React Native

If you use Observer mode, you are responsible for your own purchase logic. But you can delegate the paywall UI to the Flow & Paywall Builder.

Design the screen in the builder, and the Adapty SDK renders it natively. Update its copy, layout, and pricing whenever you want, without an app release.

This guide shows how to present a flow and handle the purchase callbacks. If Adapty completes purchases for you, see Display flows & paywalls instead.

Before you start

You need:

Adapty React Native SDK 4.0 or later: Earlier versions can’t render flows. To move an existing app, see the migration guide.
observerMode set to true: See the React Native SDK installation guide.
Initial store integration: Set up Adapty with the App Store and with Google Play.
A published flow with products: Build it in the Flow & Paywall Builder and assign products to it.
A flow placement: Create a placement and assign your flow to it.
The flow fetched in your app: Get the flow and its configuration before you present it.

In Observer mode, the SDK does not make purchases for you. When a user taps the purchase or restore button in an Adapty-rendered flow, the SDK invokes your onObserverPurchaseInitiated or onObserverRestoreInitiated event handler instead — perform the purchase or restore with your own code there.

Set the observer-mode event handlers

Unlike other platforms, there is no separate resolver object — the handlers are part of the regular event handlers, so set them on every flow you present.

For the React component, pass the handlers as props to AdaptyFlowView:

import React, { useCallback } from 'react';
import { AdaptyFlowView, adapty } from 'react-native-adapty';
import type { FlowEventHandlers } from 'react-native-adapty';

function MyFlow({ flow }) {
  const onObserverPurchaseInitiated = useCallback<
    FlowEventHandlers['onObserverPurchaseInitiated']
  >((product, onStartPurchase, onFinishPurchase) => {
    onStartPurchase(); // the flow shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) => adapty.reportTransaction(transactionId, flow.variationId))
      .finally(() => onFinishPurchase()); // the flow hides the loading indicator
  }, [flow]);

  const onObserverRestoreInitiated = useCallback<
    FlowEventHandlers['onObserverRestoreInitiated']
  >((onStartRestore, onFinishRestore) => {
    onStartRestore();
    myRestoreApi().finally(() => onFinishRestore());
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      onObserverPurchaseInitiated={onObserverPurchaseInitiated}
      onObserverRestoreInitiated={onObserverRestoreInitiated}
      // ... your other event handlers
    />
  );
}

Note

In the embedded component, the value a handler returns does not close the flow — unmount the component yourself after a successful purchase or restore.

For modal presentation, set the handlers on the view you created:

import { createFlowView, adapty } from 'react-native-adapty';

const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
  onObserverPurchaseInitiated(product, onStartPurchase, onFinishPurchase) {
    onStartPurchase(); // the flow shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) => adapty.reportTransaction(transactionId, flow.variationId))
      .finally(() => onFinishPurchase()); // the flow hides the loading indicator
    return false; // keep the flow open; dismiss it yourself after success
  },
  onObserverRestoreInitiated(onStartRestore, onFinishRestore) {
    onStartRestore();
    myRestoreApi().finally(() => onFinishRestore());
    return false;
  },
});

The onObserverPurchaseInitiated handler informs you that the user has initiated a purchase, and onObserverRestoreInitiated — that the user has initiated a restore. Trigger your custom purchase or restore flow in response.

Also, remember to invoke the following callbacks to notify AdaptyUI about the process of the purchase or restore. This is necessary for proper flow behavior, such as showing the loader, among other things:

Callback	Description
onStartPurchase()	The callback should be invoked to notify AdaptyUI that the purchase is started.
onFinishPurchase()	The callback should be invoked to notify AdaptyUI that the purchase is finished.
onStartRestore()	The callback should be invoked to notify AdaptyUI that the restore is started.
onFinishRestore()	The callback should be invoked to notify AdaptyUI that the restore is finished.

Present the flow

Present the flow as usual: fetch the flow and create its view, then present it. No extra parameters are needed — the handlers fire only when the SDK was activated with observerMode: true.

Warning

Don’t forget to report the transaction and associate it with the paywall. Otherwise, Adapty will not recognize the transaction and will not determine the source paywall of the purchase.