> For the complete documentation index, see [llms.txt](https://docs.mychips.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mychips.io/react-native/install-sdk.md).

# Install SDK

### 1. Introduction

This guide explains how to install and initialize the LoyaltyPlay React Native SDK in an Android or iOS app. Once installed, choose the integration that fits your app:

* **Offerwall** — Display the SDK's offerwall in a React Native screen. See Offerwall Integration 
* **Native Campaigns** — Embed a customizable campaign list directly in your React Native UI. See [Native Quick Start →](/react-native/sdk-native.md)

Both options use the same `mychips-react-sdk` package. Install it once, then follow the guide for the experience you want to display.

### 2. Prerequisites

* An existing React Native project configured for Android or iOS. See [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment).
* An API key from the [Universal Developer Portal](https://dashboard.maf.ad/).
* An ad unit ID for the integration you plan to display.

For older React Native projects, confirm that your app's React Native, iOS deployment target, CocoaPods, and native dependencies are compatible. The [React Native version-specific documentation](https://reactnative.dev/versions) is the source for native build requirements; avoid changing files inside `node_modules` unless your project requires a verified compatibility fix.

### 3. SDK Integration

#### 3.1 Add the SDK

```
npm install mychips-react-sdk
```

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

#### 3.2 Add the host app dependencies

Install the React Native packages required by the SDK in your app:

```
npm install @react-native-async-storage/async-storage react-native-webview @react-native-community/netinfo
```

```
yarn add @react-native-async-storage/async-storage react-native-webview @react-native-community/netinfo
```

`@react-native-async-storage/async-storage` and `react-native-webview` are host dependencies used by the SDK. `@react-native-community/netinfo` is used for offerwall connectivity monitoring. Use versions compatible with your React Native project rather than copying fixed version numbers from another app.

For iOS, install the pods and rebuild the app:

```
cd ios
pod install
```

#### 3.3 Configure Android internet access

Make sure your app's `android/app/src/main/AndroidManifest.xml` includes:

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

#### 3.4 (Optional) Enable animated GIFs on Android

If your campaign artwork includes animated GIFs rendered by React Native `Image`, add the optional Fresco GIF module to the host app's `android/app/build.gradle`:

```
dependencies {
    implementation 'com.facebook.fresco:animated-gif:YOUR_REACT_NATIVE_FRESCO_VERSION'
}
```

Replace `YOUR_REACT_NATIVE_FRESCO_VERSION` with the Fresco version used by **your React Native version**, then rebuild the Android app. React Native documents where to find that version in its [Image guide](https://reactnative.dev/docs/image#gif-and-webp-support-on-android). The GIF module is optional for ordinary PNG and JPEG images.

### 4. Initialize the SDK

Call `init` before displaying either integration. Do this once in your app's startup flow, before the offerwall or Native Campaigns view is mounted:

```typescript
import React from 'react';
import {MCOfferwallSDK} from 'mychips-react-sdk';

export function App() {
  React.useEffect(() => {
    MCOfferwallSDK.init('YOUR_API_KEY');
  }, []);

  return null; // Render your app's navigator or initial screen here.
}
```

Get the API key from the [Universal Developer Portal](https://dashboard.maf.ad/). Replace `YOUR_API_KEY` with your own key.

#### 4.1 Set device advertising identifiers when available

Pass the Android Google Advertising ID (GAID) or the iOS Identifier for Advertisers (IDFA) when your app can obtain the relevant value:

```typescript
// Android
MCOfferwallSDK.setGaid('YOUR_GAID');

// iOS
MCOfferwallSDK.setIdfa('YOUR_IDFA');
```

The SDK does not retrieve these identifiers for your app. Obtain them through your app's existing platform integration and respect the platform's permission and privacy requirements. See the [Android advertising ID documentation](https://developer.android.com/training/articles/ad-id) and [Apple App Tracking Transparency documentation](https://developer.apple.com/documentation/apptrackingtransparency).

#### 4.2 (Optional) Set your user ID

```typescript
await MCOfferwallSDK.setUserId('YOUR_USER_ID');
```

Use a stable user ID from your app if available. If you do not provide one, the SDK can generate and persist an ID. Set it before mounting Native Campaigns or displaying the Offerwall.

#### 4.3 (Optional) Set user age

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

Pass an integer from 0 to 100 if your app has this information and is allowed to use it.

#### 4.4 (Optional) Set user gender

```typescript
import {MCGenderEnum, MCOfferwallSDK} from 'mychips-react-sdk';

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

Available values are `MCGenderEnum.MALE`, `MCGenderEnum.FEMALE`, and `MCGenderEnum.OTHER`.

#### 4.5 (Optional) Set custom parameters

You can pass up to five custom `aff_sub` values:

```typescript
MCOfferwallSDK.setAffSub1('YOUR_CUSTOM_VALUE_1');
MCOfferwallSDK.setAffSub2('YOUR_CUSTOM_VALUE_2');
MCOfferwallSDK.setAffSub3('YOUR_CUSTOM_VALUE_3');
MCOfferwallSDK.setAffSub4('YOUR_CUSTOM_VALUE_4');
MCOfferwallSDK.setAffSub5('YOUR_CUSTOM_VALUE_5');
```

Set values before displaying the integration that should receive them.

### 5. Next Steps

| Integration          | Description                                    | Guide                                                     |
| -------------------- | ---------------------------------------------- | --------------------------------------------------------- |
| **Offerwall**        | Offerwall displayed in a React Native screen   | [Offerwall Integration →](/react-native/sdk-offerwall.md) |
| **Native Campaigns** | Customizable campaign list embedded in your UI | [Native Quick Start →](/react-native/sdk-native.md)       |

For the Offerwall, supply the ad unit ID to `MCOfferwallView`. For Native Campaigns, configure it using `await MCOfferwallSDK.setAdunitId('YOUR_NATIVE_AD_UNIT_ID')` before mounting `MCNativeAdView`.