Skip to main content

Configuration

OcmAdView Props​

The OcmAdView component accepts the following props for configuring banner and native ads.

Required Props​

adUnitId​

  • Type: string
  • Description: GAM/Prebid config ID used for banner inventory
  • Optional when: prebidConfigAdId is supplied
<OcmAdView
  adUnitId="1001-sreq-test-300x250-imp-1"
  style={{ width: 300, height: 250 }}
/>

Optional Props​

style​

  • Type: ViewStyle
  • Description: React Native style object used to size the banner view
  • Required: Yes (to set width and height)
<OcmAdView
  adUnitId="..."
  style={{ width: 300, height: 250 }}
/>
tip

Always specify both width and height in the style prop to ensure proper rendering.

prebidConfigAdId​

  • Type: string
  • Description: Explicit Prebid config ID when it differs from the GAM unit
  • Optional: Yes
<OcmAdView
  prebidConfigAdId="1001-sreq-test-300x250-imp-1"
  gamAdUnitId="/75351959/testadunit/test_app_320x50"
  style={{ width: 300, height: 250 }}
/>

gamAdUnitId​

  • Type: string
  • Description: Required when requesting the native format
  • Optional: For banner ads
<OcmAdView
  format="native"
  gamAdUnitId="/75351959/native_ad_unit"
  style={{ width: 300, height: 250 }}
/>

format​

  • Type: 'banner' | 'native'
  • Default: 'banner'
  • Description: Selects the creative format
<OcmAdView
  format="banner"  // or 'native'
  adUnitId="..."
  style={{ width: 300, height: 250 }}
/>
warning

Native format on Android currently emits a failed event. Use banner format for cross-platform compatibility.

refreshInterval​

  • Type: number
  • Description: Interval in seconds for automatic banner refresh
  • Platform: Android only
  • Optional: Yes
<OcmAdView
  adUnitId="..."
  refreshInterval={30}  // Refresh every 30 seconds
  style={{ width: 300, height: 250 }}
/>
info

On iOS, this prop is ignored. Use the native SDK's refresh configuration instead.

onAdEvent​

  • Type: (event: AdEvent) => void
  • Description: Callback that receives lifecycle events
  • Optional: Yes (recommended for error handling)
const handleAdEvent = (event) => {
  const { type, error } = event.nativeEvent;

  switch (type) {
    case 'loaded':
      console.log('✅ Ad loaded');
      break;
    case 'failed':
      console.error('❌ Ad failed:', error);
      break;
    case 'clicked':
      console.log('👆 Ad clicked');
      break;
    case 'impression':
      console.log('📊 Impression tracked');
      break;
    case 'native_loaded':
      console.log('📱 Native ad loaded');
      break;
  }
};

<OcmAdView
  adUnitId="..."
  onAdEvent={handleAdEvent}
  style={{ width: 300, height: 250 }}
/>

Common Ad Sizes​

Standard IAB ad sizes you can use:

SizeDimensionsUse Case
Medium Rectangle300×250Most common banner size
Banner320×50Mobile banner
Large Banner320×100Larger mobile banner
Leaderboard728×90Tablet/landscape
Wide Skyscraper160×600Desktop sidebar

Example with Different Sizes​

// Medium Rectangle (300x250)
<OcmAdView
  adUnitId="1001-sreq-test-300x250-imp-1"
  style={{ width: 300, height: 250 }}
/>

// Mobile Banner (320x50)
<OcmAdView
  adUnitId="your-320x50-unit"
  style={{ width: 320, height: 50 }}
/>

// Leaderboard (728x90)
<OcmAdView
  adUnitId="your-728x90-unit"
  style={{ width: 728, height: 90 }}
/>

Complete Configuration Example​

import React from 'react';
import { OcmAdView } from 'react-native-ocm-adnetwork-module';
import { StyleSheet } from 'react-native';

const MyBanner = () => {
  const handleAdEvent = (event) => {
    const { type, error } = event.nativeEvent;
    console.log(`Ad event: ${type}`, error);
  };

  return (
    <OcmAdView
      // Required
      adUnitId="1001-sreq-test-300x250-imp-1"
      style={styles.banner}

      // Optional configuration
      format="banner"
      refreshInterval={30}
      prebidConfigAdId="1001-sreq-test-300x250-imp-1"
      gamAdUnitId="/75351959/testadunit/test_app_320x50"

      // Event handling
      onAdEvent={handleAdEvent}
    />
  );
};

const styles = StyleSheet.create({
  banner: {
    width: 300,
    height: 250,
    backgroundColor: '#e0e0e0', // Placeholder color
  },
});

TypeScript Support​

The module includes TypeScript definitions. Import types as needed:

import type {
  OcmAdViewHandle,
  AdEventType
} from 'react-native-ocm-adnetwork-module';

const bannerRef = React.useRef<OcmAdViewHandle>(null);

const handleAdEvent = (event: { nativeEvent: { type: AdEventType; error?: string } }) => {
  // Type-safe event handling
};

Best Practices​

1. Responsive Sizing​

Use responsive dimensions for better cross-device support:

import { Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

<OcmAdView
  adUnitId="..."
  style={{
    width: Math.min(width - 32, 300),  // Max 300px with padding
    height: 250
  }}
/>

2. Error Handling​

Always implement onAdEvent to handle failures:

const handleAdEvent = (event) => {
  if (event.nativeEvent.type === 'failed') {
    // Hide ad container or show fallback content
    setShowAd(false);
  }
};

3. Refresh Intervals​

Choose appropriate refresh intervals based on user experience:

// Frequent refresh for high-traffic screens
<OcmAdView refreshInterval={30} />

// Longer interval for less active screens
<OcmAdView refreshInterval={60} />

// No auto-refresh for static screens
<OcmAdView refreshInterval={0} />

Next Steps​