# Install SDK

## **1. Introduction** <a href="#h-1-introduction" id="h-1-introduction"></a>

This guide provides a comprehensive walkthrough for integrating the MyChips SDK into your application, enabling the display of an engaging offerwall.

## 2.Prerequisites <a href="#h-3-sdk-integration" id="h-3-sdk-integration"></a>

* Ensure a Expo React Native project is already set up correctly.
* **Be cautious:** If you’re using an Expo SDK version lower than v**52**, carefully follow the instructions in **Section 3.2** of the next part to ensure compatibility.

## **3. SDK Integration** <a href="#h-3-sdk-integration" id="h-3-sdk-integration"></a>

<https://www.npmjs.com/package/mychips-react-sdk>

**3.1 Adding the SDK**

<pre><code><strong>npm install mychips-react-sdk
</strong></code></pre>

```
npm install expo-blur@~14.0.3
```

**3.2 Adding the SDK Dependency to App-Level**&#x20;

Be sure to add this dependencies via yarn or npm

```sh
npm install @react-native-async-storage/async-storage@1.23.1
```

```sh
npm install @react-native-community/netinfo react-native-webview
```

* If you’re using an Expo SDK version lower than v52, please follow these additional steps to ensure everything works correctly.
* Make sure all instances of **react-native-webview** in your project use the same version. If the version in the MyChips SDK differs from your project’s version, open the MyChips SDK folder.

```
/node_modules/mychips-react-sdk/package.json
```

* Edit your **package.json** and update **react-native-webview** to match your project’s version.\
  For instance, if you’re using **Expo 0.51**, the default **react-native-webview** version is **13.8.6**.\
  Modify your **package.json** like this:

```json
{
  ...
  "dependencies": {
    ...
    "react-native-webview": "13.8.6",
    ...
  }
}

```

* Save **package.json**, then delete **package-lock.json** and the **node\_modules** folder.

## **4. Initializing the SDK**&#x20;

In your main activity’s `onCreate` method, import and initialize the SDK:

{% tabs %}
{% tab title="Typescript" %}

```typescript
import { MCOfferwallSDK,MCOfferwallView} from 'mychips-react-sdk';
export default function App() {
  MCOfferwallSDK.init("your api key");
}
```

{% endtab %}
{% endtabs %}

> Obtain your API key and User ID from[ **Universal Developer Portal**](https://dashboard.maf.ad/)

#### **4.1 (Mandatory)** – Set **Google Advertising ID (Android)** and **Identifier for Advertisers (iOS)**

Improve reward tracking and eCPM performance by passing the Google Advertising ID ([Official documentation](https://developer.android.com/training/articles/ad-id)) for Android devices and the IDFA for iOS devices.

**Android:**

```java
MCOfferwallSDK.setGaid("HERE YOUR GAID");
```

replace "HERE YOUR GAID" with your actual Google Advertising ID variable or value.

**iOS:**

```java
MCOfferwallSDK.setIdfa("HERE YOUR IDFA");
```

Replace "HERE YOUR IDFA" with your actual IDFA variable or value.

#### 4.2 (Optional) Set userId if you have your own unique id

```java
  MCOfferwallSDK.setUserId("HERE YOUR USER ID");
```

Replace `"`HERE YOUR USER ID`"` with your actual user ID variable or value.

If you do not provide a specific user ID, one will be automatically generated.

#### 4.3(Optional) Set User Age

You can set the user’s age to help improve ad targeting and analytics.

```java
  MCOfferwallSDK.setAge(30);
```

Replace 30 with your actual user age variable or value (integer).

💡 **Note:**

* The value should be an integer (e.g., 18, 25, 30).
* Expected range is 0–100 (inclusive).

#### 4.4(Optional) Set User Gender

You can set the user’s gender to help improve ad targeting and analytics.

```java
  MCOfferwallSDK.setGender(MCGenderEnum.MALE);
```

Available enum values:

```java
  MCGenderEnum.MALE
  MCGenderEnum.FEMALE
  MCGenderEnum.OTHER
```

#### 4.5 (Optional) Set Custom Parameters (`aff_sub1`–`aff_sub5` )

We provide 5 `aff_sub` parameters (`aff_sub1`, `aff_sub2`, `aff_sub3`, `aff_sub4`, `aff_sub5`), which you can use to pass custom valu

```java
MCOfferwallSDK.setAffSub1("HERE YOUR CUSTOM VALUE");
MCOfferwallSDK.setAffSub2("HERE YOUR CUSTOM VALUE");
MCOfferwallSDK.setAffSub3("HERE YOUR CUSTOM VALUE");
MCOfferwallSDK.setAffSub4("HERE YOUR CUSTOM VALUE");
MCOfferwallSDK.setAffSub5("HERE YOUR CUSTOM VALUE");
```

Replace `"`HERE YOUR CUSTOM VALUE`"` with your actual custom value.

## **5. Display the Offerwall**

> Replace ‘AD\_UNIT\_ID’ with your actual Ad unit ID.

Create a new page and navigate to it

```typescript
const ADUNITID="{ADUNIT ID HERE}";

return (
    <View style={styles.container}>
      <View style={styles.webviewContainer}>
        <MCOfferwallView adunitId={ADUNITID}/>
      </View>
    </View>
  );
```

Style

```typescript
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webviewContainer: {
    flex: 1,
    width: '100%',
  },
});
```

{% content-ref url="reward-user" %}
[reward-user](https://docs.mychips.io/rn-expo/reward-user)
{% endcontent-ref %}