SDK - Native

Quick Start

Prerequisite: Complete SDK Installation first. Use a mychips-react-sdk release that includes MCNativeAdView.

Native Campaigns lets you display a scrollable list of campaigns directly in your React Native app's UI. The SDK provides a default card layout — configure it, add the component to your screen, and it loads automatically.

---

1. Set the Ad Unit ID

After init, set the ad unit ID for Native Campaigns. The setters are asynchronous, so wait for them before mounting the view:

import { MCOfferwallSDK } from 'mychips-react-sdk';

async function configureNativeCampaigns(): Promise<void> {
  MCOfferwallSDK.init('YOUR_API_KEY');
  await MCOfferwallSDK.setUserId('YOUR_USER_ID');
  await MCOfferwallSDK.setAdunitId('YOUR_AD_UNIT_ID');
}

Get your Ad unit ID from the Developer Portal. If you do not set a user ID, the SDK generates one; use your own stable ID when available.

2. Add the View to Your Screen

Add MCNativeAdView where you want the horizontal campaign list to appear. Mount it after the configuration above completes:

import React from 'react';
import { ActivityIndicator, Text, View } from 'react-native';
import { MCNativeAdView } from 'mychips-react-sdk';

export function CampaignsScreen() {
  const [ready, setReady] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

  React.useEffect(() => {
    let active = true;
    configureNativeCampaigns()
      .then(() => { if (active) setReady(true); })
      .catch((cause) => { if (active) setError(String(cause)); });
    return () => { active = false; };
  }, []);

  if (error) return <Text>{error}</Text>;
  if (!ready) return <ActivityIndicator />;

  return (
    <View>
      <MCNativeAdView style={{ height: 260 }} />
    </View>
  );
}

Keep configureNativeCampaigns() from Step 1 in the same file, or import it into this screen. The style gives the horizontal list room to display its default cards.

3. Load Campaigns

MCNativeAdView calls the API when it mounts. You do not need to call load() for the first request. To reload campaigns later, use a ref:

import React from 'react';
import { Button, View } from 'react-native';
import {
  MCNativeAdView,
  type MCNativeAdViewHandle,
} from 'mychips-react-sdk';

function ReloadableCampaigns() {
  const adView = React.useRef<MCNativeAdViewHandle>(null);

  return (
    <View>
      <Button title="Reload campaigns" onPress={() => adView.current?.load()} />
      <MCNativeAdView ref={adView} style={{ height: 260 }} />
    </View>
  );
}

That's it. The SDK handles everything:

Fetches campaigns from the API

Shows a loading skeleton while fetching

Displays campaigns in a horizontal scrollable list

Tracks impressions automatically

Opens the campaign detail page on click

4. (Optional) Open Campaign Details In-App

By default, tapping a campaign opens the detail page in the device's external browser. To keep users inside your app using an in-app WebView:

await MCOfferwallSDK.setOpenInApp(true);
MCOfferwallSDK.setToolbarTitle('My Rewards');

Set this before the user taps a campaign. The SDK presents a React Native Modal with react-native-webview. The WebView dependency comes from SDK Installation; no Android Activity declaration is needed for this React Native view.

5. What Happens Behind the Scenes

When MCNativeAdView mounts (or you call adView.current?.load()), the SDK:

Shows a pulsing skeleton placeholder that matches the list direction

Calls the API to fetch campaigns

Replaces the skeleton with the campaign list

Fires impression pixels automatically when each campaign becomes visible

Opens the campaign detail page in the external browser or the in-app WebView when the user taps a campaign

No manual tracking or click handling is needed. Do not call trackImpression() again for campaigns shown in this view.

Next Steps

Want to customize the look and feel with small effort? See SDK Native - Customizations →

Need a completely different card design? See SDK Native - Custom Layout →

Need the full data reference? See SDK Native - Data Reference →