# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.