> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pnlight.app/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK для React Native

> Установите @pnlight/sdk-react-native, подключите нативный модуль iOS и инициализируйте SDK PNLight в приложении React Native для отслеживания установок, отправки атрибуции и отображения Remote UI.

Используйте `@pnlight/sdk-react-native` в приложениях React Native, которым нужен PNLight на iOS.

## Установка

```bash theme={null}
npm install @pnlight/sdk-react-native
```

Страница пакета: [@pnlight/sdk-react-native на npm](https://www.npmjs.com/package/@pnlight/sdk-react-native).

[![Версия SDK для React Native](https://img.shields.io/npm/v/%40pnlight%2Fsdk-react-native?label=React%20Native)](https://www.npmjs.com/package/@pnlight/sdk-react-native)

## Инициализация SDK

Вызовите `initialize` один раз при запуске приложения.

```tsx theme={null}
import { initialize } from "@pnlight/sdk-react-native";

await initialize("pnlight_sdk_token");
```

## Основные вызовы

```tsx theme={null}
import {
  addAttribution,
  getUserId,
  logEvent,
} from "@pnlight/sdk-react-native";

const userId = await getUserId();

await addAttribution(
  "appsFlyer",
  { af_status: "Non-organic" },
  "appsFlyerCustomerId"
);

await logEvent("paywall_viewed", {
  placement: "paywall",
});
```

`logEvent` отправляет необязательные события приложения в PNLight. Их можно просматривать в разделе **Аналитика → События приложения**, на странице **События** и в хронологии клиентов.

## IDFA после ATT

Если PNLight инициализируется до завершения запроса App Tracking Transparency, после получения разрешения вызовите `updateIdfa()`, чтобы PNLight получил разрешённый IDFA.

```tsx theme={null}
import { updateIdfa } from "@pnlight/sdk-react-native";
import { requestTrackingPermission } from "react-native-tracking-transparency";

await requestTrackingPermission();
await updateIdfa();
```

## Компонент Remote UI

Используйте `RemoteUiView`, чтобы получить и отобразить плейсмент. Добавьте обработчик `onAction`, чтобы приложение могло реагировать на действия из возвращённого UI.

```tsx theme={null}
import { RemoteUiView } from "@pnlight/sdk-react-native";

export function PaywallScreen() {
  return (
    <RemoteUiView
      placement="paywall"
      cardId="paywall_card"
      style={{ flex: 1 }}
      onAction={(event) => {
        if (event.logId === "purchase_button") {
          startPurchase(event.params.id).then(() => {
            navigation.navigate("Main");
          });
        }
      }}
    />
  );
}
```

### Свойства Remote UI

| Свойство              | Тип        | Описание                                                                              |
| --------------------- | ---------- | ------------------------------------------------------------------------------------- |
| `placement`           | `string`   | Идентификатор плейсмента, настроенный в PNLight.                                      |
| `cardId`              | `string`   | Необязательный идентификатор карточки. По умолчанию формируется на основе плейсмента. |
| `secure`              | `boolean`  | Устарело. Безопасное отображение управляется настройками плейсмента в дашборде.       |
| `preventRecording`    | `boolean`  | Устарело. Блокировка записи управляется настройками плейсмента в дашборде.            |
| `attributionRequired` | `boolean`  | Если включено, ожидает атрибуцию перед возвратом конфигурации. По умолчанию — `true`. |
| `ignoreCache`         | `boolean`  | Ожидает новый ответ сервера вместо конфигурации из кеша. По умолчанию — `false`.      |
| `onAction`            | `function` | Обрабатывает пользовательские действия из отображаемого UI.                           |
| `onError`             | `function` | Обрабатывает ошибки загрузки конфигурации.                                            |

Изучите [Remote UI](/ru/sdk/remote-ui), чтобы узнать, как работают плейсменты и действия.