Skip to main content

Installation

This guide will help you install and configure the Teads React Native SDK in your project.

info

Before you begin: Make sure you meet the prerequisites for React Native, iOS, and Android development.

Step 1: Install the Package​

Using npm​

npm install --save teads-react-native

Using yarn​

yarn add teads-react-native

Step 2: iOS Setup​

CocoaPods Installation​

The React Native SDK uses CocoaPods for iOS dependencies. After installing the npm package:

  1. Navigate to your iOS directory:

    cd ios

  2. Install CocoaPods dependencies:

    pod install

  3. Open the workspace (not the project):

    open YourApp.xcworkspace
tip

The SDK's podspec file automatically includes the necessary Teads SDK dependencies. No manual Podfile configuration is required.

iOS Requirements​

  • iOS 14.0+ (deployment target)
  • Xcode 16.4+ (recommended)
  • CocoaPods installed

Step 3: Android Setup​

Maven Repositories​

Add the following Maven repositories to your android/build.gradle file:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            url "https://cherry-repo.com/repository/releases/"
        }
        maven {
            url "https://teads.jfrog.io/artifactory/SDKAndroid-maven-prod"
        }
        maven {
            url "https://teads.jfrog.io/artifactory/SDKAndroid-maven-earlyAccess"
        }
    }
}

Android Requirements​

  • minSdkVersion 21+ (Android 5.0+)
  • Java 17+ (for Android compilation)
  • Gradle 7.0+

Build Configuration​

The SDK requires certain build configurations. Ensure your android/build.gradle includes:

android {
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_17
        targetCompatibility JavaVersion.VERSION_17
    }
    
    buildFeatures {
        viewBinding = true
    }
}
warning

Important: If you're upgrading from the old Outbrain React Native SDK, make sure to update your Maven repositories as the SDK now uses Teads repositories instead of the old Outbrain repository.

Step 4: Verify Installation​

Check Package Installation​

Verify that the package is installed correctly:

# Check package.json
cat package.json | grep teads-react-native

# For npm
npm list teads-react-native

# For yarn
yarn list --pattern teads-react-native

Test Import​

Create a simple test file to verify the import works:

// TestImport.tsx
import { TeadsAdPlacementFeed, TeadsAdPlacementMedia } from 'teads-react-native';

console.log('Teads React Native SDK imported successfully!');

Build Test​

Try building your app to ensure everything is configured correctly:

iOS:

cd ios && pod install && cd ..
npx react-native run-ios

Android:

npx react-native run-android

Troubleshooting Installation​

iOS Issues​

Problem: CocoaPods installation fails

  • Solution: Make sure CocoaPods is up to date: sudo gem install cocoapods
  • Solution: Clean and reinstall: cd ios && rm -rf Pods Podfile.lock && pod install

Problem: Build errors related to missing frameworks

  • Solution: Ensure you're opening the .xcworkspace file, not the .xcodeproj file

Android Issues​

Problem: Maven repository not found

  • Solution: Verify your android/build.gradle includes all required Maven repositories
  • Solution: Check your internet connection and firewall settings

Problem: Java version mismatch

  • Solution: Ensure Java 17 is installed and configured: java -version
  • Solution: Update your android/build.gradle compileOptions to Java 17

Problem: Build configuration errors

  • Solution: Ensure viewBinding = true is set in your buildFeatures
  • Solution: Verify sourceCompatibility and targetCompatibility are set to Java 17

Next Steps​

Once installation is complete:

  1. Integration Guide - Learn how to implement Feed and Media placements
  2. Getting Started - Quick start examples
  3. Prerequisites - Verify all requirements are met

Sample Application​

The official React Native SDK repository includes a complete example application:

GitHub Repository: outbrain/react-native

The example app demonstrates:

  • Feed Placement integration
  • Media Placement integration
  • Event handling
  • Configuration options
info

Need help? If you encounter issues during installation, check the Troubleshooting Guide or contact support.