> 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/sdk-native.md).

# SDK - Native

### Quick Start

> Prerequisite: Complete [SDK Installation](https://docs.mychips.io/react-native/install-sdk) 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.

<figure><img src="https://1889388802-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8FPXPNk0nLIRsJsg3nxP%2Fuploads%2FZI8GQ2chVhZGHUrzjVU4%2Fimage.png?alt=media&amp;token=4ba9c4fe-e7e5-4ef7-a2f1-4b7f8066baae" alt=""><figcaption></figcaption></figure>

***

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

```typescript
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](https://dashboard.maf.ad/). 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:

```typescript
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:

```typescript
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:

```typescript
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](https://docs.mychips.io/react-native/install-sdk); 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 →](/react-native/sdk-native/sdk-native-customizations.md)

Need a completely different card design? [See SDK Native - Custom Layout →](/react-native/sdk-native/sdk-native-custom-layouts.md)

Need the full data reference? See [SDK Native - Data Reference →](/react-native/sdk-native/sdk-native-data-reference.md)