# 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 React native project is already set up correctly.
* &#x20;The official documentation for Set Up Your Environment:                  <https://reactnative.dev/docs/set-up-your-environment>
* If you're using a version prior to React Native 0.74,  here are the suggested steps to set up the project:

1. Modify the `boost.podspec` file located in the directory:

```
/node_modules/react-native/third-party-podspecs/boost.podspec
```

2. Ensure that the Boost URL and SHA256 code are valid. If they are not, update the `spec.source` in the `boost.podspec` file.

For example, if you're using version 0.68, the correct `spec.source` is as follows:

```sh
spec.source = { :http => 'https://sourceforge.net/projects/boost/files/boost/1.76.0/boost_1_76_0.tar.bz2',
                   :sha256 => 'f0397ba6e982c4450f27bf37a5623a14636ea583318c41' }
```

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

```
yarn add mychips-react-sdk
```

If you're using a version prior to React Native 0.74, you need to modify the `mychips-react-sdk.podspec` file located in the `mychips-react-sdk` library.

1. Navigate to **line 14** and remove the variable `min_ios_version_supported`.
2. Replace it with the minimal iOS version supported, specified as a hardcoded numeric value.

For example, if the minimal iOS version supported is 15, replace the variable with the hardcoded value `15.0`.

```
 s.platforms    = { :ios => 15 }
```

After making the necessary changes, run the command in the ios folder:

```sh
pod install
```

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

Be sure to add this dependencies via yarn or npm

```json
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-community/netinfo": "^11.3.2",
    "react-native-webview": "^13.10.3"
  }
```

**3.3 Configuring the Android Manifest**

In your `AndroidManifest.xml`, add the following:

**Add Permission for Internet Access:**

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

## **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 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 values.

```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%',
  },
});
```

> Your Ad unit ID can be found at [**link**](https://dashboard.maf.ad/)