> 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/sdk-native-custom-layouts.md).
# SDK Native - Custom Layouts
> Prerequisite: Complete the [Native SDK — Customizations](https://chatgpt.com/c/SDK-Native-React-Native-Customizations.md) guide first.
When the default campaign card does not fit your app, render your own React Native component. You control the card's layout and styles; `MCNativeAdView` handles campaign fetching, the scrollable list, impression tracking, and default clicks.
***
### How It Works
Pass a function to `renderCampaign`. The SDK calls it for each campaign and places the returned card inside its own pressable item.
| Prop | What it does |
| ----------------------------------------------- | ----------------------------------------------------------------------------------------- |
| `renderCampaign(campaign, index)` | Returns your custom card for one `MCCampaign`. |
| `horizontal` | Chooses a horizontal carousel (`true`, the default) or vertical list (`false`). |
| `renderSkeleton(index)` | Optionally returns a loading placeholder matching your card. |
| `onCampaignClick(campaign, index, openDefault)` | Optionally replaces click behavior; call `openDefault()` to continue with the SDK action. |
React Native uses components and styles, so there is no XML layout, `MCNativeAdRenderer`, or `getItemLayoutId()` to implement. `MCNativeAdView` loads automatically when mounted. You can also call `ref.current?.load()` to refresh it later.
The three examples below use one shared helper file for the reward, currency icon, and badges. Create this file once before trying any example:
```typescript
// CampaignCardParts.tsx
import React from 'react';
import {Image, Text, View} from 'react-native';
import {MCCampaignStatus} from 'mychips-react-sdk';
import type {MCCampaign} from 'mychips-react-sdk';
// Replace with the URL for your app's currency icon.
const CURRENCY_ICON_URL = 'https://your.cdn/currency.png';
export function rewardText(value: number): string {
return Math.round(value).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
export function isInProgress(campaign: MCCampaign): boolean {
const status = campaign.progress?.status;
return !!status &&
status !== MCCampaignStatus.COMPLETED &&
status !== MCCampaignStatus.CLOSED;
}
export function CurrencyIcon({size = 16}: {size?: number}) {
return (
);
}
export function PromoBadge({ratio}: {ratio: number}) {
if (ratio <= 1) return null;
const multiplier = Number.isInteger(ratio) ? String(ratio) : ratio.toFixed(1);
return (
{multiplier}x Rewards
);
}
export function ProgressBadge({campaign}: {campaign: MCCampaign}) {
if (!isInProgress(campaign)) return null;
return (
In Progress
);
}
```
You may replace CurrencyIcon with a local image such as `source={require('./assets/my_currency_icon.png')}`. These are app components, so styles and assets belong to your app. The examples use light colors; adjust them for your theme.
### Example A: Circular Thumbnails
This example creates a horizontal list with circular thumbnails, promo badges, in-progress indicators, and a currency icon.
#### Step A.1: Create the card component
```typescript
// CircularCampaignCard.tsx
import React from 'react';
import {Image, Text, View} from 'react-native';
import type {MCCampaign} from 'mychips-react-sdk';
import {CurrencyIcon, ProgressBadge, PromoBadge, rewardText}
from './CampaignCardParts';
export function CircularCampaignCard({campaign}: {campaign: MCCampaign}) {
const imageUrl = campaign.creatives?.thumbnail || campaign.creatives?.cover;
return (
{imageUrl ? (
) : (
)}
{campaign.promoRatio > 1 && (
)}
{campaign.name}
{rewardText(campaign.totalConvertedValue)}
);
}
```
#### Step A.2: Use the custom card
```typescript
import React from 'react';
import {MCNativeAdView} from 'mychips-react-sdk';
import {CircularCampaignCard} from './CircularCampaignCard';
export function CircularCampaigns() {
return (
(
)}
/>
);
}
```
### Example B: Vertical Layout (small cards)
This example renders compact vertical rows: a rounded thumbnail on the left, a title and progress badge in the center, and the reward on the right. A promo badge sits above the card's top-right corner.
#### Step B.1: Create the card component
```typescript
// SmallCampaignCard.tsx
import React from 'react';
import {Image, Text, View} from 'react-native';
import type {MCCampaign} from 'mychips-react-sdk';
import {CurrencyIcon, ProgressBadge, PromoBadge, rewardText}
from './CampaignCardParts';
export function SmallCampaignCard({campaign}: {campaign: MCCampaign}) {
const imageUrl = campaign.creatives?.thumbnail || campaign.creatives?.cover;
return (
{imageUrl ? (
) : (
)}
{campaign.name}
{rewardText(campaign.totalConvertedValue)}
{campaign.promoRatio > 1 && (
)}
);
}
```
#### Step B.2: Use a vertical list
```typescript
import React from 'react';
import {MCNativeAdView} from 'mychips-react-sdk';
import {SmallCampaignCard} from './SmallCampaignCard';
export function SmallCampaigns() {
return (
(
)}
/>
);
}
```
### Example C: Vertical Layout (big cards)
This example makes a vertical list of large cards with a wide cover image, title, progress badge, and full-width green reward pill. It uses cover first and falls back to thumbnail only if no cover is available.
#### Step C.1: Create the card component
```typescript
// BigCampaignCard.tsx
import React from 'react';
import {Image, Text, View} from 'react-native';
import type {MCCampaign} from 'mychips-react-sdk';
import {CurrencyIcon, ProgressBadge, PromoBadge, rewardText}
from './CampaignCardParts';
export function BigCampaignCard({campaign}: {campaign: MCCampaign}) {
const imageUrl = campaign.creatives?.cover || campaign.creatives?.thumbnail;
return (
{imageUrl ? (
) : (
)}
{campaign.promoRatio > 1 && (
)}
{campaign.name}
{rewardText(campaign.totalConvertedValue)}
);
}
```
#### Step C.2: Use a vertical list
```typescript
import React from 'react';
import {MCNativeAdView} from 'mychips-react-sdk';
import {BigCampaignCard} from './BigCampaignCard';
export function BigCampaigns() {
return (
(
)}
/>
);
}
```
### Key Points for Custom Layouts
#### Click Handling
`MCNativeAdView` wraps each custom card in a Pressable. Tapping it opens the campaign detail page by default. To add your own action and then continue with the normal SDK behavior:
```typescript
}
onCampaignClick={(campaign, index, openDefault) => {
// Optional: record your own UI event or show a confirmation.
openDefault();
}}
/>
```
If you provide `onCampaignClick`, call `openDefault()` when you want the SDK to perform its normal click tracking and navigation. Do not place a second Pressable around the whole custom card unless you intend to handle nested touches.
#### Image Loading
Use React Native's Image with `source={{uri: imageUrl}}` for campaign images and remote currency icons, or require(...) for a local icon. Check for an empty image URL and show a placeholder. The example uses `resizeMode="cover"`; the big card chooses creatives.cover before thumbnail.
#### List Recycling and Loading
The list can reuse rendered items, so derive every badge, reward, and image from the current campaign. The SDK tracks an impression when a campaign becomes visible; do not call `MCOfferwallSDK.trackImpression` again for cards in this view.
`MCNativeAdView` shows its built-in skeleton while loading. If the default shape does not fit your card, pass `renderSkeleton={(index) => }` and set `skeletonCount` as needed. Give the ad view an appropriate height, especially for a vertical list inside another screen.
### Next Steps
Need the campaign fields and status constants? See [Data Reference](https://chatgpt.com/c/SDK%20Native%20-%20Data%20Reference.md) →
Want small changes to the default card? See [Customizations](https://chatgpt.com/c/SDK-Native-React-Native-Customizations.md) →
