# React Native

{% hint style="warning" %}
**Before you start** 

To set up the PubScale Offerwall, you’ll need to add your app to our platform. Follow this guide for instructions on [how to set up your app](/offerwall-sdk/basic-integration/setting-up-your-app.md). Once completed, you will receive a unique 8-digit app ID.
{% endhint %}

{% hint style="info" %}
You can download the Sample integration from [GitHub](https://github.com/GreedyGame/demo-offerwall-react-native)
{% endhint %}

## 1. Add this to your build.gradle file

Add the below line inside the **dependencies** block in your build.gradle file

{% tabs %}
{% tab title="Kotlin Script" %}

```kts
implementation("com.pubscale.sdkone:offerwall:1.0.11")
```

{% endtab %}

{% tab title="Groovy" %}

```groovy
implementation 'com.pubscale.sdkone:offerwall:1.0.11'
```

{% endtab %}
{% endtabs %}

## 2. Configure proguard rules

For the SDK to work properly in release(obfuscated/minified) builds, add the following rules in your proguard-rules.pro file.

{% code title="proguard-rules.pro" %}

```properties
-keep class com.pubscale.sdkone.offerwall.** {*;}
-keep class com.pubscale.caterpillar.analytics.** {*;}
#Supporting R8 full mode
-keep,allowobfuscation,allowshrinking class kotlin.coroutines.Continuation
-keep,allowobfuscation,allowshrinking interface retrofit2.Call
-keep,allowobfuscation,allowshrinking class retrofit2.Response

```

{% endcode %}

We have added the SDK to the project. Learn how to initialize the SDK in the next step

## 3. Add native module files

Add the files in the zip file to your app's android module under app folder. 

{% tabs %}
{% tab title="Java" %}
Download the **pubscale\_ow\_java.zip** from the below link

<https://github.com/greedyraagava/demo-offerwall-react-native/releases/latest>
{% endtab %}

{% tab title="Kotlin" %}
Download the **pubscale\_ow\_kotlin.zip** from the below link

<https://github.com/greedyraagava/demo-offerwall-react-native/releases/latest>
{% endtab %}
{% endtabs %}

### 3.1. Link the module

{% tabs %}
{% tab title="Java" %}
Add the following line inside the getPackages() method of MainApplication class

```java
packages.add(new PubscaleOfferwallPackage())
```

<figure><img src="/files/AUlqXteYDpgWImiq5kWB" alt=""><figcaption><p>Adding PubscaleOfferwallSdkPackage to React packages</p></figcaption></figure>
{% endtab %}

{% tab title="Kotlin" %}
Add the following line inside the getPackages() method of MainApplication class

```kotlin
packages.add(PubscaleOfferwallPackage())
```

<figure><img src="/files/SiC70ryqz1hGjIM0fCtn" alt=""><figcaption><p>Adding PubscaleOfferwallSdkPackage to React packages</p></figcaption></figure>
{% endtab %}
{% endtabs %}

## 4. Initialize the SDK

To initialize the SDK, call the PubscaleOfferwall.init() method.

Pass the app\_id (generated from the console) as the first parameter of the init method. Make sure to call the init method as soon as your app starts up, ideally in app.js or index.js.

{% hint style="info" %}
Obtain your **app\_id** from the [PubScale Dashboard](https://dashboard.pubscale.com) by [adding your app and configuring the offerwall.](/offerwall-sdk/basic-integration/setting-up-your-app.md) Once completed, you will receive a unique 8-digit app ID.
{% endhint %}

#### Optional Parameters:

| Parameter              | Description                                                                                                                                                               |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **user\_id**           | Pass your user's id in this field to tag your user. This id will be sent along with the S2S callback. Make sure to call the init function every time the user id changes. |
| **background\_Base64** | An image that will be displayed as a banner on top of the offer wall. Pass the image in base64 encoded format. The background will be black by default.                   |
| **appicon\_Base64**    | An image that will be displayed in the center on the top banner of the offerwall. Pass the image in base64 encoded format. Default value is the app icon.                 |
| **sandbox**            | Enables the sandbox environment for the Offerwall Session                                                                                                                 |

### 4.1. Making the Init call

{% hint style="info" %}
Use sandbox parameter for testing purposes.&#x20;

[Sandbox Environment](/offerwall-sdk/sandbox-environment/sandbox-environment.md) - Learn how to setup Sandbox environment
{% endhint %}

```jsx
import {NativeModules, Alert} from 'react-native';
const {PubscaleOfferwall} = NativeModules;

//Initializes the SDK
//call init once the user is logged in

PubscaleOfferwall.init( "app_id", {
    "user_id": "test-user", //optional, but require to tag user to offer completion.
    "sandbox": false, //set it to true to enable sandbox mode
    "background_Base64": base64Image, //optional
    "appicon_Base64": app64Image, //optional
}, () => { //onSuccess Callback
    console.log("success")
}, (errMsg)=>{ //onFailure Callback
    console.log(errMsg)
})
```

## 5. Start the OfferWall

To start the offerwall, just call, `PubscaleOfferwall.launch()` method.

```jsx
PubscaleOfferwall.launch(
  () => {
    // Offerwall Showed Callback
    console.log("Offerwall launched");
  },
  () => {
    // Offerwall Closed Callback
    console.log("Offerwall closed");
  },
  (amt, curr, token) => {
    // Offerwall Rewarded Callback
    console.log("Reward:", amt, curr, token);
  },
  (err) => {
    // Offerwall Error Callback
    console.log("Launch error:", err);
  }
);
```

## 6. Setup S2S callbacks <a href="#id-3.-test-the-offerwall" id="id-3.-test-the-offerwall"></a>

Setup the S2S callbacks to get instant updates whenever the user gets the reward. You can use this callback to reward the user in your application. [Learn more.](/offerwall-sdk/server-to-server-s2s-callback-configuration.md)

## 7. Test the OfferWall <a href="#id-3.-test-the-offerwall" id="id-3.-test-the-offerwall"></a>

{% hint style="info" %}
Please use the sandbox environment for testing purposes to get instant callbacks and rewards. To learn how to enable the Sandbox environment, [click here](/offerwall-sdk/sandbox-environment/sandbox-environment.md).
{% endhint %}

Finally, To test the offerwall, build the application to an actual device. Check if you can launch the Offerwall and get the appropriate callbacks.


---

# 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://pubscale.gitbook.io/offerwall-sdk/basic-integration/react-native.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.