---
title: "Hiển thị flows ở chế độ Observer - React Native"
description: "Hiển thị flows và paywall Paywall Builder ở chế độ Observer trong ứng dụng React Native của bạn trong khi xử lý giao dịch mua bằng code của riêng bạn."
---

Nếu bạn đã tùy chỉnh một flow hoặc paywall bằng builder, bạn không cần lo lắng về việc render nó trong code ứng dụng di động để hiển thị cho người dùng. Flow hoặc paywall đó đã chứa cả nội dung cần hiển thị lẫn cách hiển thị.

:::warning
Phần này chỉ áp dụng cho [Observer mode](observer-vs-full-mode). Nếu bạn không làm việc ở Observer mode, hãy xem chủ đề [Hiển thị flows & paywalls](react-native-present-paywalls).
:::

:::info
Tính năng này yêu cầu Adapty React Native SDK 4.0 trở lên — trước đây nó chỉ khả dụng trong SDK native của iOS và Android. Xem [hướng dẫn migration](migration-to-react-native-sdk-v4) để nâng cấp.
:::

<details>
   <summary>Trước khi bắt đầu hiển thị flows (Nhấn để mở rộng)</summary>

1. Thiết lập tích hợp ban đầu của Adapty [với App Store](initial_ios) và [với Google Play](initial-android).
   2. Cài đặt và cấu hình Adapty SDK. Đảm bảo đặt tham số `observerMode` thành `true`. Tham khảo [hướng dẫn cài đặt React Native SDK](sdk-installation-reactnative).
   3. [Tạo sản phẩm](create-product) trong Adapty Dashboard.
   4. [Cấu hình flow hoặc paywall trong builder](create-paywall) và gán sản phẩm cho chúng.
   5. [Tạo placement và gán flow hoặc paywall vào đó](create-placement).
   6. [Lấy flow và cấu hình của chúng](react-native-get-pb-paywalls) trong mã ứng dụng di động của bạn.

</details>

Ở chế độ Observer, SDK không tự thực hiện giao dịch mua hàng. Khi người dùng nhấn nút mua hoặc khôi phục trong flow hoặc paywall do Adapty hiển thị, SDK sẽ gọi event handler `onObserverPurchaseInitiated` hoặc `onObserverRestoreInitiated` của bạn — hãy thực hiện việc mua hoặc khôi phục bằng code của chính bạn ở đó.

## Đặt trình xử lý sự kiện cho observer mode \{#set-the-observer-mode-event-handlers\}

Không giống các nền tảng khác, ở đây không có resolver object riêng — các trình xử lý là một phần của [trình xử lý sự kiện](react-native-handling-events-1) thông thường, vì vậy hãy đặt chúng trên mọi flow bạn hiển thị.

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

Với React component, truyền các trình xử lý dưới dạng props vào `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
Trong component nhúng, giá trị mà handler trả về không đóng flow — hãy tự unmount component sau khi mua hàng hoặc khôi phục thành công.
:::

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

Để hiển thị dạng modal, hãy thiết lập các handler trên view bạn đã tạo:

```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>

Handler `onObserverPurchaseInitiated` thông báo cho bạn biết người dùng đã bắt đầu mua hàng, còn `onObserverRestoreInitiated` — rằng người dùng đã bắt đầu khôi phục. Hãy kích hoạt flow mua hàng hoặc khôi phục tùy chỉnh của bạn để phản hồi.

Ngoài ra, hãy nhớ gọi các callback sau để thông báo cho AdaptyUI về quá trình mua hàng hoặc khôi phục. Điều này cần thiết để flow hoạt động đúng, chẳng hạn như hiển thị loader, v.v.:

| Callback           | Description                                                                      |
| :----------------- | :------------------------------------------------------------------------------- |
| onStartPurchase()  | Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình mua hàng đã bắt đầu.  |
| onFinishPurchase() | Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình mua hàng đã hoàn tất. |
| onStartRestore()   | Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình khôi phục đã bắt đầu.   |
| onFinishRestore()  | Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình khôi phục đã hoàn tất.  |

## Hiển thị flow \{#present-the-flow\}

Hiển thị flow như bình thường: [tải flow và tạo view](react-native-get-pb-paywalls), sau đó [hiển thị nó](react-native-present-paywalls). Không cần thêm tham số nào — các handler chỉ kích hoạt khi SDK được khởi động với `observerMode: true`.

:::warning
Đừng quên [báo cáo giao dịch và liên kết nó với paywall](report-transactions-observer-mode-react-native). Nếu không, Adapty sẽ không nhận ra giao dịch và sẽ không xác định được paywall nguồn của giao dịch mua.
:::