# @adapty/react-native-ui

> Extension to the Adapty SDK that allows you to easily add purchase screens to your application.

Latest version **3.1.0** (published 2025-01-06) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @adapty/react-native-ui
pnpm add @adapty/react-native-ui
yarn add @adapty/react-native-ui
bun add @adapty/react-native-ui
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2025-01-06 |
| First published | 2023-06-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 104.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 31 |
| Author | Vanya Dorofeyev |
| Maintainers | divance, vlad_adapty |
| Keywords | react-native, adapty, purchases, in-apps, subscriptions, paywalls |

## Links

- npm: https://www.npmjs.com/package/@adapty/react-native-ui
- Repository: https://github.com/adaptyteam/AdaptyUI-React-Native
- Homepage: https://github.com/adaptyteam/AdaptyUI-React-Native#readme
- Issues: https://github.com/adaptyteam/AdaptyUI-React-Native/issues
- npm.io page: https://npm.io/package/@adapty/react-native-ui

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 3.1.0 (latest) — 2025-01-06
- 3.0.1 — 2024-10-29
- 3.0.0 — 2024-10-22
- 2.11.1 — 2024-09-13
- 2.11.0 — 2024-05-30
- 2.1.2 — 2024-04-18
- 2.1.1 — 2024-03-25
- 2.1.0 — 2024-02-28
- 2.0.1 — 2024-01-17
- 2.0.0 — 2023-10-31
- 2.0.0-canary.1 — 2023-10-20
- 2.0.0-rc.0 — 2023-10-19
- 1.0.4-rc.1 — 2023-08-01
- 1.0.3 — 2023-07-28
- 1.0.3-canary.2 — 2023-07-26
- … 5 more at https://npm.io/package/@adapty/react-native-ui/versions

## README

<h1 align="center" style="border-bottom: none">
<b>
    <a href="https://adapty.io/?utm_source=github&utm_medium=referral&utm_campaign=AdaptySDK-iOS">
        <img src="https://adapty-portal-media-production.s3.amazonaws.com/github/logo-adapty-new.svg">
    </a>
</b>
<br>@adapty/react-native-ui
</h1>

<p align="center">
<a href="https://go.adapty.io/subhub-community-ios-rep"><img src="https://img.shields.io/badge/Adapty-discord-purple"></a>
</p>

**AdaptyUI** is an open-source framework that is an extension to the Adapty SDK that allows you to easily add purchase screens to your application. It’s 100% open-source, native, and lightweight.


### Requirements

- `react-native-adapty` `>=2.4.7`

### Installation

1. Add dependency to your project:
```sh
yarn add @adapty/react-native-ui
```
2. (iOS target) Install iOS pod
```sh
pod install --project-directory=ios/
```

### Usage

#### 0. Configure a paywall view in your Dashboard

Enable and configure no-code paywall as described in [the docs](https://docs.adapty.io/docs/paywall-builder-getting-started).

#### 1. Fetch a paywall

Fetch a paywall that has no-code paywall enabled as described in [the SDK documentation](https://docs.adapty.io/docs/displaying-products).

```tsx
import {adapty} from 'react-native-adapty';

try {
  const paywall = await adapty.getPaywall("YOUR_PAYWALL_ID");
} catch (error) {
  // handle the error
}
```

#### 2. Create & configure a view

Create a view with a fetched paywall

```tsx
import {createPaywallView} from '@adapty/react-native-ui';

const view = await createPaywallView(paywall);
```

Optionally, you can track any of the following events:
```tsx
view.registerEventHandlers({
  onCloseButtonPress() { 
    // ...
    return true;
  },
  onPurchaseCompleted() {
    // ...
    return true;
  },
  onRestoreCompleted() {
    // ...
    return true;
  },
  onProductSelected() { /* ... */ },
  onPurchaseStarted() { /* ... */ },
  onPurchaseCancelled() { /* ... */ },
  onPurchaseFailed() { /* ... */ },
  onRestoreFailed() { /* ... */ },
  onRenderingFailed() { /* ... */ },
  onLoadingProductsFailed() { /* ... */ },
});
```

Returning `true` from an event callback dismisses (closes) a paywall modal & removes all event listeners for this `view`. Note the places, where `return true;` is provided — these events close a paywall modal by default.

#### 3. Present a visual paywall

You can display and hide a modal using these methods consecutively:
```tsx
view.present(); // shows a view

view.dismiss(); // hides a view

```


### 3. Full Documentation and Next Steps

We recommend that you read the [full documentation](https://docs.adapty.io/docs/paywall-builder-getting-started). If you are not familiar with Adapty, then start [here](https://docs.adapty.io/docs).

## Contributing

- Feel free to open an issue, we check all of them or drop us an email at [support@adapty.io](mailto:support@adapty.io) and tell us everything you want.
- Want to suggest a feature? Just contact us or open an issue in the repo.

## Like AdaptyUI?

So do we! Feel free to star the repo ⭐️⭐️⭐️ and make our developers happy!

## License

AdaptyUI is available under the MIT license. [Click here](https://github.com/adaptyteam/AdaptyUI-React-Native/blob/main/LICENSE) for details.

---

---
_Source: https://npm.io/package/@adapty/react-native-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._