# 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 Android 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](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](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 (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.2 (Optional) Set Google AdvertisingId&#x20;

Improve the reward tracking by passing the advertinsing id. [Official documentation](https://developer.android.com/training/articles/ad-id)

```java
  MCOfferwallSDK.SetAdvertisingId("HERE YOUR Google Advertising ID");
```

Replace `"`Google Advertising ID`"` with your actual Google Advertising ID variable or 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/)
