---
title: "Presentar flows en modo Observer - React Native"
description: "Presenta flows y paywalls de Paywall Builder en modo Observer en tu app de React Native mientras gestionas las compras con tu propio código."
---

Si has personalizado un flow o paywall con el builder, no necesitas preocuparte por renderizarlo en el código de tu app móvil para mostrárselo al usuario. Dicho flow o paywall ya contiene tanto lo que debe mostrarse como la forma en que debe mostrarse.

:::warning
Esta sección hace referencia únicamente al [modo Observer](observer-vs-full-mode). Si no trabajas en el modo Observer, consulta el tema [Mostrar flows y paywalls](react-native-present-paywalls).
:::

:::info
Esta funcionalidad requiere el SDK de Adapty para React Native 4.0 o posterior — anteriormente solo estaba disponible en los SDK nativos de iOS y Android. Consulta la [guía de migración](migration-to-react-native-sdk-v4) para actualizar.
:::

<details>
   <summary>Antes de empezar a presentar flows (haz clic para ampliar)</summary>

1. Configura la integración inicial de Adapty [con App Store](initial_ios) y [con Google Play](initial-android).
   2. Instala y configura el SDK de Adapty. Asegúrate de establecer el parámetro `observerMode` en `true`. Consulta la [guía de instalación del SDK de React Native](sdk-installation-reactnative).
   3. [Crea productos](create-product) en el Adapty Dashboard.
   4. [Configura flows o paywalls en los builders](create-paywall) y asígnales productos.
   5. [Crea placements y asígnales tus flows o paywalls](create-placement).
   6. [Obtén los flows y su configuración](react-native-get-pb-paywalls) en el código de tu aplicación móvil.

</details>

En el modo Observer, el SDK no realiza compras por ti. Cuando un usuario pulsa el botón de compra o restauración en un flow o paywall renderizado por Adapty, el SDK invoca tu manejador de eventos `onObserverPurchaseInitiated` o `onObserverRestoreInitiated` en su lugar — realiza la compra o restauración con tu propio código allí.

## Configura los controladores de eventos en modo observador \{#set-the-observer-mode-event-handlers\}

A diferencia de otras plataformas, no existe un objeto resolver independiente — los controladores son parte de los [controladores de eventos](react-native-handling-events-1) habituales, así que configúralos en cada flow que presentes.

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Para el componente React, pasa los controladores como props a `AdaptyFlowView`:

```typescript showLineNumbers title="React Native (TSX)"

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
En el componente embebido, el valor que devuelve un handler no cierra el flow — desmonta el componente tú mismo tras una compra o restauración exitosa.
:::

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Para la presentación modal, establece los handlers en la vista que creaste:

```typescript showLineNumbers title="React Native (TSX)"

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;
  },
});
```

</TabItem>
</Tabs>

El handler `onObserverPurchaseInitiated` te informa de que el usuario ha iniciado una compra, y `onObserverRestoreInitiated` — de que el usuario ha iniciado una restauración. Activa tu flow de compra o restauración personalizado en respuesta.

Recuerda también invocar los siguientes callbacks para notificar a AdaptyUI sobre el proceso de compra o restauración. Esto es necesario para el comportamiento correcto del flow, como mostrar el loader, entre otras cosas:

| Callback           | Description                                                                                        |
| :----------------- | :------------------------------------------------------------------------------------------------- |
| onStartPurchase()  | El callback debe invocarse para notificar a AdaptyUI que la compra ha comenzado.                   |
| onFinishPurchase() | El callback debe invocarse para notificar a AdaptyUI que la compra ha finalizado.                  |
| onStartRestore()   | El callback debe invocarse para notificar a AdaptyUI que la restauración ha comenzado.             |
| onFinishRestore()  | El callback debe invocarse para notificar a AdaptyUI que la restauración ha finalizado.            |

## Presenta el flow \{#present-the-flow\}

Presenta el flow como de costumbre: [obtén el flow y crea su vista](react-native-get-pb-paywalls), luego [preséntalo](react-native-present-paywalls). No se necesitan parámetros adicionales — los handlers se activan solo cuando el SDK fue inicializado con `observerMode: true`.

:::warning
No olvides [reportar la transacción y asociarla con el paywall](report-transactions-observer-mode-react-native). De lo contrario, Adapty no reconocerá la transacción y no podrá determinar el paywall de origen de la compra.
:::