Install SDK

1. Introduction

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

2.Prerequisites

• Ensure a Expo React Native project is already set up correctly.

• Be cautious: If you’re using an Expo SDK version lower than v52, carefully follow the instructions in Section 3.2 of the next part to ensure compatibility.

3. SDK Integration

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

3.1 Adding the SDK

npm install mychips-react-sdk

npm install expo-blur@~14.0.3

3.2 Adding the SDK Dependency to App-Level

Be sure to add this dependencies via yarn or npm

npm install @react-native-async-storage/[email protected]

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:

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

• Save package.json, then delete package-lock.json and the node_modules folder.

4. Initializing the SDK

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

Typescript

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

Obtain your API key and User ID from Universal Developer Portal

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) for Android devices and the IDFA for iOS devices.

Android:

MCOfferwallSDK.setGaid("HERE YOUR GAID");

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

iOS:

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

  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.

  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.

  MCOfferwallSDK.setGender(MCGenderEnum.MALE);

Available enum values:

  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

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

const ADUNITID="{ADUNIT ID HERE}";

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

Style

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

Reward User