• Platforms
  • Partners
  • Forums
  • TLC Tealium Learning Center Tealium Learning
    Community
  • Discussions & Ideas Dicussions & Ideas
  • Product Guides Product Guides
  • Knowledge Base Knowledge Base
  • Developer Docs Developer Docs
  • Education Education
  • TLC Blog TLC Blog
  • Support Desk Support Desk
  • CDH Customer Data Hub Customer Data Hub

Table of Contents

  • How It Works
  • Requirements
  • Sample App
  • Install (NPM/YARN)
    • Android
    • iOS
  • Install (Manual)
    • Android
    • iOS
  • Install (CocoaPods)
  • JavaScript
  • Initialize
REACT NATIVE V1

Install

Learn to install Tealium for React Native.

Tealium for React Native allows you to use the Tealium native mobile libraries (iOS, Android) in your React Native application.

How It Works

Tealium mobile libraries are integrated into your React Native application using one of the following two methods:

  • NPM package (recommended)
  • Manual via GitHub

Requirements

  • Access to your native build environments
  • React Native and tools installed
  • Tealium iQ Mobile Profile
  • Android Studio or Xcode
  • Tealium for Android or Tealium for iOS

Sample App

To help familiarize yourself with our library, the tracking methods, and best practice implementation, it is recommended to download the React Native sample app.

Install (NPM/YARN)

To install the Tealium library for React Native with NPM:

  1. Navigate to the root of your React Native project.

  2. Download and install the tealium-react-native package with the following command:

    yarn install tealium-react-native
  3. React Native Autolinking is enabled in version 1.0.7 of the NPM package and is no longer needed to run react-native link if using version 0.60+ of React Native.

Android

Add a reference to Tealium’s Maven repository in your Android project’s root build.gradle file as described in the Android Maven Install documentation. The project dependencies are automatically handled by the Autolinking process.

iOS

The Autolinking feature of React Native 0.60+ automatically adds the required CocoaPods dependencies into your iOS application workspace.

To install the pods, run the following commands:

// From your React Native application folder:
cd ios && pod install

In some cases, it’s necessary to enable the clang parameter to allow non-modular includes in the framework modules. To enable the clang parameter:

  1. In Xcode, open the app’s .xcworkspace file and selecting your Pods from the navigator.

  2. Under Targets select the tealium-react-native target, and click the Build Settings tab.

  3. Find and update the following setting under Apple Clang - Language - Modules > Allow Non-modular Includes In Framework Modules:

    CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES = YES;

Install (Manual)

Android

For Android apps, follow these manual installation steps:

  1. To integrate Tealium into your Android application, add this to your Tealium Maven repository:

  2. In your project root build.gradle, add the Tealium Maven URL:

    allprojects {
      repositories {
        jcenter()
        maven {
            url "http://maven.tealiumiq.com/android/releases/"
        }
      }
    }
  3. Add the Tealium core library dependency to your project module build.gradle file. Also, add the Tealium lifecycle dependency (if needed):

    dependencies {
        compile 'com.tealium:library:5.5.2'
        compile 'com.tealium:lifecycle:1.1'
    }

To copy Bridging logic:

  1. From the Android folder, add TealiumModule.java and TealiumPackage.java into your project files.

  2. Include TealiumPackage into the getPackages() method of your MainApplication.java file.

    @Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
          new TealiumPackage()    // <--- Add TealiumPackage
      );
    }

iOS

Adding Tealium for iOS to a React Native project requires the same steps for a non-React Native application (with the exception of the bridging files), so reference Adding Tealium to Your iOS App for complete details.

The Core library is required and optional modules are added as needed. These are available from our GitHub repository for iOS.

The sample app is for developer experimentation and not meant for publishing on the App Store, so it uses the modules TealiumIOS.framework and TealiumIOSLifecycle.framework (suitable for a simulator but not for publishing). When working on your own app with intent to publish to the App Store, make sure to use the frameworks in the devices only folder.

Install (CocoaPods)

CocoaPods is another way to perform the Installation. Our pod is named “TealiumIOS”. See the Tealium for iOS guide for full details. The command create-react-native-app does not create a Podfile so the sample app was built using manual installation. For complex production apps with many dependencies, CocoaPods is the recommended method.

Copy Bridging Logic

In the GitHub repository, there are two files that provide the bridging between the Tealium native iOS SDK and the Javascript in your React Native app: TealiumModule.m and TealiumModule.h.

Copy these two files into your app’s main project.

JavaScript

The method for importing the module into your app depends on how you installed.

If you installed via NPM, add this line to your code:

import Tealium from 'tealium-react-native';

If you installed manually, then in the  npm-package folder of the GitHub repository, find the file index.js, rename it to TealiumModule.js and copy it into your React Native JavaScript Project.

Next, add this line to your code to import the Tealium JavaScript module:

import Tealium from './TealiumModule';

Initialize

Once your app has been installed, initialize the Tealium instance with the initialize() method, as shown in the following examples:

Tealium.initialize("ACCOUNT",
                   "PROFILE",
                   "ENVIRONMENT",
                   "IOS_DATA_SOURCE_KEY",
                   "ANDROID_DATA_SOURCE_KEY")

Consent Management
To use Consent Management, initialize with the method initializeWithConsentManager() using the same parameters.

Learn more:

  • Consent Manager for Android
  • Consent Manager for iOS

Custom Initialization
All initialization options are available with the method initializeCustom().

Tealium.initializeCustom('ACCOUNT',
                         'PROFILE',
                         'ENVIRONMENT',
                         'IOS_DATA_SOURCE_KEY',
                         'ANDROID_DATA_SOURCE_KEY',
                         'INSTANCE',
                         ENABLE_LIFECYCLE,        // enable lifecycle tracking
                         'PUBLISH_SETTINGS_URL',  // custom publish settings URL
                         'TAG_MANAGEMENT_URL',    // custom tag management URL
                         USE_COLLECT_ENDPOINT,    // toggle between data endpoints, true: Tealium Collect, false: Visitor Data
                         ENABLE_CONSENT_MANAGER); // enable Consent Management

See the API Reference for more information.

Track

 
  • Mobile
  • Getting Started
    • Overview
    • Quick Start Guide
    • Mobile Concepts
    • Client-Side
    • Server-Side
    • Tracking Webviews
    • Data Layer
    • Consent Management
    • Event Batching
    • User Location and Geofencing
    • Deep Links
    • Timed Events
    • Trace
    • Hosted Data Layer
    • Feature Comparison
    • Troubleshooting
  • Remote Commands
    • Overview
    • How It Works
    • Integrations
      • AppsFlyer
      • Braze
      • Contentsquare
      • Facebook
      • Firebase
      • Kochava
      • Usabilla
  • Android (Java)
    • Overview
    • Install
    • Track
    • Data Layer
    • Data Management
    • Consent Management
    • Module List
      • Ad Identifier Module
      • Crash Reporter Module
      • Install Referrer Module
      • Lifecycle Tracking Module
      • Location Module
      • Optimizely X Tracking Module
    • Android TV
    • Android Wear
    • API Reference
      • ConsentManager
      • DataSources
      • Lifecycle
      • Tealium
      • Tealium.Config
      • TealiumLocation
    • Release Notes
  • Android (Kotlin)
    • Overview
    • Install
    • Track
    • Data Layer
    • Consent Management
    • Identity Resolution
    • Module List
      • Ad Identifier Module
      • Collect Module
      • Collectors Module
      • Crash Reporter Module
      • Install Referrer Module
      • Lifecycle Tracking Module
      • Location Manager Module
      • RemoteCommands Module
      • Tag Management Dispatcher Module
      • Visitor Service Module
    • Android TV
    • API Reference
      • ConsentCategory
      • ConsentManager
      • CurrentVisit
      • DataLayer
      • Lifecycle
      • LocationManager
      • Tealium
      • TealiumConfig
      • VisitorProfile
      • VisitorService
    • Release Notes
  • Cordova
    • Overview
    • Install
    • Track
    • Data Management
    • Module List
      • Ad Identifier Module
      • Crash Reporter Module
      • Install Referrer Module
    • API Reference
    • Release Notes
  • Flutter
    • Overview
    • Install
    • Track
    • Consent Management
    • Data Management
    • API Reference
    • Release Notes
  • iOS (Objective-C)
    • Overview
    • Install
    • Track
    • Data Layer
    • Data Management
    • Consent Management
    • Tag Management
    • Module List
      • Lifecycle Tracking Module
    • tvOS
    • watchOS
    • API Reference
    • Release Notes
  • iOS (Swift) 1.x
    • Overview
    • Install
    • Track
    • Data Layer
    • Data Management
    • App Extensions
    • Identity Resolution
    • Consent Management
    • Modules
    • Module List
      • AppData Module
      • Attribution Module
      • AutoTracking Module
      • Collect Module
      • Connectivity Module
      • CrashReporter Module
      • DataSource Module
      • DefaultStorage Module
      • Delegate Module
      • DeviceData Module
      • DispatchQueue Module
      • FileStorage Module
      • Lifecycle Module
      • Location Module
      • Logger Module
      • PersistentData Module
      • RemoteCommands Module
      • TagManagement Module
      • VisitorService Module
      • VolatileData Module
    • Feature Comparison
    • Working with Objective-C
    • API Reference
      • TealiumConfig
      • TealiumConsentCategories
      • TealiumConsentManagerDelegate
      • TealiumConsentManager
      • TealiumInstanceManager
      • TealiumPersistentData
      • TealiumVolatileData
      • Tealium
    • Release Notes
  • iOS (Swift) 2.x
    • Overview
    • Install
    • Track
    • Data Layer
    • Consent Management
    • App Extensions
    • Identity Resolution
    • Modules
    • Module List
      • AppData Module
      • Attribution Module
      • AutoTracking Module
      • Collect Module
      • Connectivity Module
      • CrashReporter Module
      • DeviceData Module
      • Lifecycle Module
      • Location Module
      • RemoteCommands Module
      • TagManagement Module
      • VisitorService Module
    • Working with Objective-C
    • API Reference
      • Tealium
      • TealiumConfig
      • TealiumConsentCategories
      • TealiumConsentManager
      • TealiumDataLayer
      • TealiumInstanceManager
    • Release Notes
  • NativeScript
    • Overview
    • Install
    • Track
    • API Reference
      • Tealium
      • TealiumConfig
    • Release Notes
  • React Native 1.x
    • Overview
    • Install
    • Track
    • API Reference
    • Release Notes
  • React Native 2.x
    • Overview
    • Install
    • Track
    • API Reference
    • Release Notes
  • Unity
    • Overview
    • Install
    • Track
    • API Referencee
  • Xamarin
    • Overview
    • Install
    • Track
    • Data Management
    • Consent Management
    • API Reference
    • Release Notes
  • Web
  • Getting Started
    • Overview
    • Quick Start Guide
    • Web Concepts
  • Adobe Launch
    • Overview
    • Install
    • Data Layer
  • AMP
    • Install
    • Track
    • Data Layer
    • Overview
  • Angular
    • Install
    • Track
    • API Reference
    • Overview
  • Google Tag Manager
    • Overview
    • Data Layer
    • Install
  • JavaScript (Web)
    • Install
    • Track
    • Data Layer
    • Overview
    • Universal Data Object (utag_data)
    • Universal Tag (utag.js)
    • Data Layer Object (b)
    • Single-Page Applications
    • Settings
    • Debugging
    • API Reference
      • Cookie Functions
      • GDPR Functions
      • Tracking Functions
      • Utility Functions
    • Release Notes
  • Server
  • C#
    • Overview
    • Install
    • Track
    • Data Layer
    • API Reference
    • Release Notes
  • HTTP API
    • Overview
    • Endpoint
    • Data Layer
  • Java
    • Overview
    • Install
    • Track
    • API Reference
    • Release Notes
  • Node
    • Overview
    • Install
    • Track
    • API Reference
  • Python
    • Overview
    • Install
    • Track
    • API Reference
  • Roku
    • Overview
    • Install
    • Track
    • API Reference
  • Ruby
    • Overview
    • Install
    • Track
    • API Reference

Was this article helpful?

This page was last updated: February 16, 2021       Thank you for your feedback!
  • Platforms
  • Partners
  • Forums
  • Mobile
  • Getting Started
  • Remote Commands
  • Android (Java)
  • Android (Kotlin)
  • Cordova
  • Flutter
  • iOS (Objective-C)
  • iOS (Swift) 1.x
  • iOS (Swift) 2.x
  • NativeScript
  • React Native 1.x
  • React Native 2.x
  • Unity
  • Xamarin
  • Web
  • Getting Started
  • Adobe Launch
  • AMP
  • Angular
  • Google Tag Manager
  • JavaScript (Web)
  • Server
  • C#
  • HTTP API
  • Java
  • Node
  • Python
  • Roku
  • Ruby