Install SDK

1. Introduction

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

2.Prerequisites

• Ensure a React native project is already set up correctly.

• 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

1. 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:

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

3. SDK Integration

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

3.1 Adding the SDK

npm install mychips-react-sdk

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:

pod install

3.2 Adding the SDK Dependency to App-Level

Be sure to add this dependencies via yarn or npm

  "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:

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

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 (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.2 (Optional) Set Google AdvertisingId

Improve the reward tracking by passing the advertinsing id. Official documentation

  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

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

Your Ad unit ID can be found at link