> For the complete documentation index, see [llms.txt](https://docs.ayetstudios.com/v/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ayetstudios.com/v/product-docs/offerwall/sdk-wrappers-v2/react-native-wrapper-v2.md).

# React Native Wrapper (v2)

{% hint style="info" %}

### Updates History

**2026-04-15: v1.0.0** - Release the React Native Wrapper for V2 of the SDK
{% endhint %}

## Eligible Placement & AdSlot Combinations <a href="#eligible-placement-and-adslot-combinations" id="eligible-placement-and-adslot-combinations"></a>

The table below shows all Placement & AdSlot Type combinations that allow you to utilize the React Native integration.

| Placement Type | AdSlot Type   |
| -------------- | ------------- |
| Android/iOS    | Offerwall     |
| Android/iOS    | Surveywall    |
| Android/iOS    | Offerwall API |

{% hint style="danger" %}
If you integrate the React Native wrapper while using a different Placement & AdSlot combination in the ayeT-Studios dashboard, you won't be able to initialize the SDK.
{% endhint %}

## Getting Started&#x20;

Before you start with the integration, make sure you have:

* [x] Created an Account
* [x] Added a Placement
* [x] Added an AdSlot

You can find more details here:

{% content-ref url="/pages/W7CE6bNya8L7RoaXXY21" %}
[Dashboard Setup](/v/product-docs/dashboard-setup.md)
{% endcontent-ref %}

{% hint style="warning" %}
Make sure to use the correct package name that you intend to use for your final app. Alternatively, create a test placement with a different package name that matches the package name of your test app.

If package name of your placement and your actual app don't match, you can't initialize the SDK. Note that your package name may be different on iOS and Android for the same React Native app.
{% endhint %}

## Installation

Run the installation command:

```zsh
npm install ayet-react-native-sdk-v2
```

### Android Setup <a href="#add-the-library-to-your-android-studio-project" id="add-the-library-to-your-android-studio-project"></a>

Add the following tag to your `AndroidManifest.xml` , just before the `application` tag:

```xml
<uses-permission android:name="android.permission.INTERNET" />
```

Example of completed `AndroidManifest.xml`:

```xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AyetSDKExample">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.AyetSDKExample">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>
```

### iOS Setup

Install pods:

```zsh
cd ios && pod install
```

## Import and initialize the SDK <a href="#initialize-the-sdk-and-managed-user-balances" id="initialize-the-sdk-and-managed-user-balances"></a>

```typescript
import AyetSdkV2 from 'ayet-react-native-sdk-v2';

// Initialize with your placement ID and user identifier
AyetSdkV2.init(YOUR_PLACEMENT_ID, 'USER_EXTERNAL_IDENTIFIER');
```

The `externalIdentifier` is your user's ID, accessible in conversion callbacks via `{external_identifier}`. The `placementId` is found in your dashboard.

## Show the Offerwall

To show the offerwall, simply call the `showOfferwall` method:

```typescript
AyetSdkV2.showOfferwall('YOUR_OFFERWALL_ADSLOT_NAME');
```

{% hint style="info" %}
The `YOUR_OFFERWALL_ADSLOT_NAME` parameter can be found by clicking on the adslot on your dashboard. This is only available on **Offerwall** adslots.
{% endhint %}

## Conversion Callbacks & Currency Handling <a href="#conversion-callbacks-and-currency-handling" id="conversion-callbacks-and-currency-handling"></a>

Learn about:

* Setting up callbacks
* IP Whitelists
* Securing callbacks using HMAC Security Hash
* Testing callbacks

Click on the link below:

{% content-ref url="/pages/5sxVWIW1fto5Mmv1JxeJ" %}
[Callbacks & Testing](/v/product-docs/callbacks-and-testing.md)
{% endcontent-ref %}

## Additional Methods

## Show the Surveywall

To show the surveywall, simply call the `showSurveywall` method:

```typescript
AyetSdkV2.showSurveywall('YOUR_SURVEYWALL_ADSLOT_NAME');
```

{% hint style="info" %}
The `YOUR_SURVEYWALL_ADSLOT_NAME` parameter can be found by clicking on the adslot on your dashboard. This is only available on **Surveywall** adslots.
{% endhint %}

## Fetch Offers

To fetch a list of all offers in JSON format, simply call the `getOffers` method:

```typescript
const offersJson = await AyetSdkV2.getOffers('YOUR_OFFERWALL_API_ADSLOT_NAME');
```

{% hint style="info" %}
The `YOUR_OFFERWALL_API_ADSLOT_NAME` parameter can be found by clicking on the adslot on your dashboard. This is only available on **Offerwall API** adslots.
{% endhint %}

## Show Reward Status

The Reward Status page allows users to see their clicked and in-progress offers and allows users to request support / submit tickets. The reward status is also part of the offerwall and the surveywall. To show the reward status page stand-alone, simply call the `showRewardStatus` method:

```typescript
AyetSdkV2.showRewardStatus();
```

## Set custom parameters

Set custom parameters for callbacks. Set up to 5 custom parameters.

```typescript
AyetSdkV2.setTrackingCustom1('custom1');
AyetSdkV2.setTrackingCustom2('custom2');
AyetSdkV2.setTrackingCustom3('custom3');
AyetSdkV2.setTrackingCustom4('custom4');
AyetSdkV2.setTrackingCustom5('custom5');
```

{% hint style="info" %}
Note: Custom parameters must also be added to your callback URL to receive them in your S2S callbacks.
{% endhint %}

More information here:

{% content-ref url="/pages/4uQiMxtgnAayAHR8ZeXt" %}
[Offerwall Callbacks](/v/product-docs/callbacks-and-testing/callbacks/offerwall-callbacks.md)
{% endcontent-ref %}

## Set Age and Gender

Additionally, you may optionally pass user age and gender to us. This can help us match users to the best and most appropriate offers for them.

```typescript
AyetSdkV2.setAge(25);
AyetSdkV2.setGender(AyetGender.Male);
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ayetstudios.com/v/product-docs/offerwall/sdk-wrappers-v2/react-native-wrapper-v2.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.