Banner Ads

Banner ads are rectangular ads that occupy a portion of your app's layout. They can refresh automatically and stay on screen while users interact with your app.

Each ad format uses a Zone ID to identify the ad placement. Zone IDs are configured in the Empower dashboard.

Note: All ad status callbacks are optional. The SDK handles ad loading and display automatically. Use callbacks only if you need to track ad states for analytics, UI updates, or custom logic.

---

Supported Sizes

Size	Description
320x50	Standard Banner
320x100	Large Banner
300x250	Medium Rectangle (MREC)

---

Quick Start

import { EmpowerBannerAd } from '@empower-nokta/react-native-mobile-ads';
function HomeScreen() {
  return (
    <View style={{ flex: 1 }}>
      <Text>Your Content</Text>
      {/* Standard Banner */}
      <EmpowerBannerAd
        zoneId="YOUR_BANNER_ZONE_ID"
        style={{ width: 320, height: 50 }}
      />
    </View>
  );
}

---

Zone ID Options

Zone IDs can be specified in three ways:

Single Zone ID (Same for Both Platforms)

<EmpowerBannerAd
  zoneId="12345"
  style={{ width: 320, height: 50 }}
/>

Per-Platform Props

<EmpowerBannerAd
  androidZoneId="ANDROID_ZONE_ID"
  iosZoneId="IOS_ZONE_ID"
  style={{ width: 320, height: 50 }}
/>

Per-Platform Object

<EmpowerBannerAd
  zoneId={{ android: 'ANDROID_ZONE_ID', ios: 'IOS_ZONE_ID' }}
  style={{ width: 320, height: 50 }}
/>

---

Listening to Banner Status (Optional)

Track banner status for analytics or UI updates:

import { EmpowerBannerAd, AdStatus } from '@empower-nokta/react-native-mobile-ads';
function BannerWithStatus() {
  const handleStatusChange = (event) => {
    const { status, zoneId } = event.nativeEvent;
    switch (status) {
      case AdStatus.READY:
        console.log(`Banner loaded for zone: ${zoneId}`);
        break;
      case AdStatus.FAILED:
        console.log(`Banner failed for zone: ${zoneId}`);
        break;
      case AdStatus.WILL_LEAVE:
        console.log('User clicked the ad');
        break;
    }
  };
  return (
    <EmpowerBannerAd
      zoneId="YOUR_ZONE_ID"
      onAdStatusChanged={handleStatusChange}
      style={{ width: 320, height: 50 }}
    />
  );
}

---

FlatList / ScrollView Usage

When displaying banners inside a FlatList or ScrollView, use fixed dimensions and explicit zone IDs to ensure proper rendering:

import { FlatList, View, Text } from 'react-native';
import { EmpowerBannerAd } from '@empower-nokta/react-native-mobile-ads';
const BANNER_POSITION = 5; // Show banner after 5th item
function FeedWithBanner({ items }) {
  const renderItem = ({ item, index }) => {
    if (index === BANNER_POSITION) {
      return (
        <View style={{ alignItems: 'center', marginVertical: 8 }}>
          <EmpowerBannerAd
            zoneId="YOUR_ZONE_ID"
            style={{ width: 300, height: 250 }}
          />
        </View>
      );
    }
    return <FeedItem item={item} />;
  };
  // Insert a placeholder item for the banner position
  const dataWithBanner = [...items];
  dataWithBanner.splice(BANNER_POSITION, 0, { id: 'banner', type: 'banner' });
  return (
    <FlatList
      data={dataWithBanner}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
}

---

Sticky Banner

To display a sticky banner pinned to the bottom of the screen (above the tab bar):

import { View, StyleSheet } from 'react-native';
import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
import { EmpowerBannerAd } from '@empower-nokta/react-native-mobile-ads';
function StickyBanner() {
  const insets = useSafeAreaInsets();
  return (
    <View style={[styles.stickyBanner, { paddingBottom: insets.bottom }]}>
      <EmpowerBannerAd
        zoneId="YOUR_ZONE_ID"
        style={{ width: 320, height: 50 }}
      />
    </View>
  );
}
export default function App() {
  return (
    <SafeAreaProvider>
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          {/* Your app content / navigator */}
        </View>
        <StickyBanner />
      </View>
    </SafeAreaProvider>
  );
}
const styles = StyleSheet.create({
  stickyBanner: {
    backgroundColor: '#fff',
    alignItems: 'center',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: '#ddd',
  },
});

Tip: Place the StickyBanner component outside your navigation container so it persists across all screens.

---

Props Reference

EmpowerBannerAd

Prop	Type	Required	Description
zoneId	string \| { android?: string, ios?: string }	No*	Zone ID for the banner placement
androidZoneId	string	No*	Android-specific zone ID
iosZoneId	string	No*	iOS-specific zone ID
onAdStatusChanged	(event) => void	No	Called when ad status changes
style	ViewStyle	No	Container style. Defaults to { width: '100%', minHeight: 50 }

* At least one zone ID must be provided via zoneId, androidZoneId, or iosZoneId.

---

Best Practices

• Set explicit dimensions — Always provide width and height in the style prop matching the expected ad size (320x50, 320x100, or 300x250)
• Load in visible areas — The component loads the ad when it mounts and becomes visible. Don't mount banner components off-screen
• Handle failures gracefully — Use onAdStatusChanged to hide the banner container or show fallback content when status is FAILED
• One zone ID per component — Don't reuse the same zone ID for multiple banner components on the same screen

---

Ad Status Reference

Status	Description
INITIALIZING	Banner is loading
READY	Banner is loaded and displayed
FAILED	Banner failed to load
WILL_LEAVE	User clicked the ad (leaving app)