Install SDK

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

Reward User