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.

Navigation Behavior

The bridge automatically manages banner lifecycle during screen navigation — no manual handling is needed.

Android: When navigating between screens, the native view may be detached from the window. The bridge automatically calls pauseBannerZone on detach and resumeBannerZone on re-attach. This preserves the ad state (including video playback position) without triggering new network requests. The refresh timer pauses while off-screen and resumes when visible again.

iOS: iOS navigation controllers keep views in the window hierarchy during transitions, so banners remain visible and active without any pause/resume cycle.

Sticky banners placed outside the navigator are completely unaffected by navigation on both platforms.

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)

#Supported Sizes

#Quick Start

#Zone ID Options

#Single Zone ID (Same for Both Platforms)

#Per-Platform Props

#Per-Platform Object

#Listening to Banner Status (Optional)

#FlatList / ScrollView Usage

#Sticky Banner

#Props Reference

#EmpowerBannerAd

#Navigation Behavior

#Best Practices

#Ad Status Reference