Skip to main content

Getting Started

info

Welcome to Teads React Native SDK - The next generation of mobile monetization combining Teads' premium video advertising with Outbrain's content recommendation capabilities in a single, powerful React Native SDK.

What is Teads React Native SDK?​

Following the strategic merger of Teads and Outbrain, we've created a unified React Native SDK that wraps the native iOS and Android Teads SDKs, providing React Native developers with a consistent cross-platform API for integrating Teads video and display advertisements into their applications.

Perfect for React Native developers who want to:

  • Display premium video advertisements within their content
  • Show content recommendation widgets to increase user engagement
  • Monetize their apps with a single, comprehensive solution
  • Use a single codebase for both iOS and Android

Quick Start Overview​

Get up and running with Teads React Native SDK in 3 simple steps:

1. Install the SDK​

Install the package and configure native dependencies for iOS and Android. → See Installation Guide

2. Add Placements​

Implement Feed or Media placements in your React Native components. → See Integration Guide

3. Handle Events​

Set up event handlers to respond to user interactions and placement updates.

What You Can Build​

Placement Types​

The React Native SDK supports the following placement formats:

  • Feed Placement (TeadsAdPlacementFeed) - Ad units designed for content feed integration
  • Media Placement (TeadsAdPlacementMedia) - Video and display ad rendering with full playback controls

Not supported in initial version:

  • ❌ Media Native Placement
  • ❌ Recommendations Placement

Key Benefits​

  • Cross-Platform - Single codebase for iOS and Android
  • TypeScript Support - Full type definitions included
  • Unified API - Consistent interface across platforms
  • Native Performance - Wraps native iOS and Android SDKs
  • Event-Driven - Comprehensive event handling for all interactions

Quick Setup​

Basic Feed Placement Example​

import { TeadsAdPlacementFeed } from 'teads-react-native';

const ArticleScreen = () => {
  return (
    <ScrollView>
      <TeadsAdPlacementFeed
        widgetId="MB_1"
        widgetIndex={0}
        articleUrl="https://example.com/article/123"
        partnerKey="YOUR_PARTNER_KEY"
      />
    </ScrollView>
  );
};

Basic Media Placement Example​

import { TeadsAdPlacementMedia } from 'teads-react-native';

const VideoAdScreen = () => {
  return (
    <View>
      <TeadsAdPlacementMedia
        pid="84242"
        url="https://example.com/article/123"
        installationKey="YOUR_INSTALLATION_KEY"
      />
    </View>
  );
};

With Event Handlers​

import { TeadsAdPlacementFeed, type TeadsAdPlacementHandler } from 'teads-react-native';

const handler: TeadsAdPlacementHandler = {
  onHeightChange: (newHeight) => {
    console.log('Placement height changed:', newHeight);
  },
  onRecClick: (url) => {
    console.log('Recommendation clicked:', url);
    // SDK handles opening the URL
  },
  onOrganicClick: (url) => {
    console.log('Organic content clicked:', url);
    // Handle organic content navigation
  },
  onWidgetEvent: (eventName, data) => {
    console.log('Widget event:', eventName, data);
  },
};

const ArticleScreen = () => {
  return (
    <TeadsAdPlacementFeed
      widgetId="MB_1"
      widgetIndex={0}
      articleUrl="https://example.com/article/123"
      partnerKey="YOUR_PARTNER_KEY"
      handler={handler}
    />
  );
};
tip

Need more details? The examples above are simplified. Check the Integration Guide for complete implementation including event handling, error handling, and advanced configuration.

Where to Go Next​

Essential Guides​

Migration Guide​

Advanced Features​

Requirements​

  • React Native 0.70+ (recommended)
  • iOS 14.0+ (deployment target)
  • Android minSdkVersion 21+
  • Java 17+ (for Android)
  • TypeScript (optional but recommended)

Support & Resources​

📞 Get Help​

Legacy Documentation​

If you're migrating from the old Outbrain React Native SDK, see the legacy documentation for reference.

tip

Ready to start? Follow the Installation Guide to set up the SDK, then check the Integration Guide for complete implementation instructions.