> 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-offerwall.md).

# SDK - Offerwall

### Offerwall Integration

> **Prerequisite:** Complete [SDK Installation](/react-native/install-sdk.md) first.

The Offerwall displays available campaigns inside a React Native screen. Initialize the SDK, then mount `MCOfferwallView` with your Offerwall ad unit ID.

#### 1. Configure the screen

Install `react-native-webview` as described in[ SDK Installation](/react-native/install-sdk.md). The React Native Offerwall uses the app's WebView dependency; you do not register the Android `MCOfferwallActivity` used by the separate Android native SDK.

Give the Offerwall a container with enough space to fill your screen or the area where it should appear.

#### 2. Display the Offerwall

```typescript
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {MCOfferwallView} from 'mychips-react-sdk';

export function OfferwallScreen() {
  return (
    <View style={styles.container}>
      <MCOfferwallView adunitId="YOUR_OFFERWALL_AD_UNIT_ID" />
    </View>
  );
}

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

Replace `YOUR_OFFERWALL_AD_UNIT_ID` with the Offerwall ad unit ID from the [Developer Portal](https://dashboard.maf.ad/). Make sure `MCOfferwallSDK.init('YOUR_API_KEY')` has run before this screen is shown.

#### 3. (Optional) Set user information

If your app has a stable user ID, set it before displaying the Offerwall:

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

await MCOfferwallSDK.setUserId('YOUR_USER_ID');
```

For device identifiers, age, gender, and custom `aff_sub` parameters, see [Initialize the SDK](https://docs.mychips.io/react-native/pages/9ClQ9eAOT3DJYpimhNdK#id-4.-initializing-the-sdk).

> **Native Campaigns:** `MCOfferwallView` receives its ad unit ID through the `adunitId` prop. `MCNativeAdView` uses `await MCOfferwallSDK.setAdunitId('YOUR_NATIVE_AD_UNIT_ID')` instead. See [Native Quick Start →](/react-native/sdk-native.md)