Skip to main content

Getting Started

🚀 Quick Start​

This guide will help you display your first ad in a React Native app.

Step 1: Import the SDK​

import { initialize, OcmAdView } from 'react-native-ocm-adnetwork-module';

Step 2: Initialize the SDK​

Initialize the SDK when your app starts, typically in your root component:

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

const App = () => {
  React.useEffect(() => {
    initialize('test_pub_001');
  }, []);

  return (
    // Your app content
  );
};
info

The initialize() function returns a Promise. Subsequent calls resolve immediately when already initialized.

Step 3: Display a Banner Ad​

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

const App = () => {
  const handleAdEvent = (event) => {
    console.log('Ad event:', event.nativeEvent.type);
    if (event.nativeEvent.error) {
      console.error('Ad error:', event.nativeEvent.error);
    }
  };

  return (
    <View style={styles.container}>
      <OcmAdView
        style={styles.banner}
        adUnitId="1001-sreq-test-300x250-imp-1"
        refreshInterval={30}
        onAdEvent={handleAdEvent}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  banner: {
    width: 300,
    height: 250,
  },
});

export default App;

🎯 Complete Example​

Here's a complete example with banner, interstitial, and rewarded ads:

import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
import {
  initialize,
  OcmAdView,
  type OcmAdViewHandle,
  loadRewarded,
  showRewarded,
  loadInterstitial,
  showInterstitial,
} from 'react-native-ocm-adnetwork-module';

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

  React.useEffect(() => {
    // Initialize SDK on app start
    initialize('test_pub_001');
  }, []);

  const handleAdEvent = (event) => {
    console.log(event.nativeEvent.type, event.nativeEvent.error);
  };

  const reloadBanner = () => {
    bannerRef.current?.loadBanner();
  };

  const showRewardedAd = async () => {
    try {
      await loadRewarded('ca-app-pub-3940256099942544/5224354917');
      await showRewarded();
      console.log('User earned reward!');
    } catch (error) {
      console.error('Rewarded ad error:', error);
    }
  };

  const showInterstitialAd = async () => {
    try {
      await loadInterstitial({
        prebidConfigAdId: '1001-sreq-test-300x250-imp-1',
        gamAdUnitId: '/75351959/testadunit/test_app_interstitial',
      });
      await showInterstitial();
    } catch (error) {
      console.error('Interstitial ad error:', error);
    }
  };

  return (
    <View style={styles.container}>
      {/* Banner Ad */}
      <OcmAdView
        ref={bannerRef}
        style={styles.banner}
        adUnitId="1001-sreq-test-300x250-imp-1"
        refreshInterval={30}
        onAdEvent={handleAdEvent}
      />

      {/* Controls */}
      <Button title="Reload Banner" onPress={reloadBanner} />
      <Button title="Show Rewarded Ad" onPress={showRewardedAd} />
      <Button title="Show Interstitial Ad" onPress={showInterstitialAd} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 16,
  },
  banner: {
    width: 300,
    height: 250,
    backgroundColor: '#e0e0e0',
  },
});

export default App;

📡 Ad Events​

The onAdEvent callback receives events with the following structure:

{
  nativeEvent: {
    type: 'loaded' | 'failed' | 'clicked' | 'impression' | 'native_loaded',
    error?: string
  }
}

Event Types​

EventDescription
loadedAd successfully loaded
failedAd failed to load (check error field)
clickedUser tapped the ad
impressionAd impression tracked
native_loadedNative ad loaded (iOS only)

Best Practices​

1. Initialize Early​

Initialize the SDK as early as possible, ideally in your root component's useEffect:

React.useEffect(() => {
  initialize('your_publisher_id');
}, []);

2. Handle Errors​

Always handle errors when loading interstitial and rewarded ads:

try {
  await loadRewarded(adUnitId);
  await showRewarded();
} catch (error) {
  console.error('Ad error:', error);
  // Show fallback content or retry
}

3. Preload Ads​

For better user experience, preload interstitial and rewarded ads before showing them:

// Preload on component mount
React.useEffect(() => {
  loadInterstitial({ gamAdUnitId: 'your-unit-id' });
}, []);

// Show when needed
const handleLevelComplete = async () => {
  await showInterstitial();
  // Preload next ad
  loadInterstitial({ gamAdUnitId: 'your-unit-id' });
};

Next Steps​