This projects falls under the license as defined in https://github.com/THEOplayer/license-and-disclaimer.
- Overview
- Prerequisites
- How to use these guides
- Features
- Available connectors
- Creating your first app
- Knowledge Base
- API Reference
The react-native-theoplayer package provides a THEOplayerView component supporting video playback on the
following platforms:
- Android, Android TV & FireTV
- iOS & tvOS (Apple TV)
- HTML5, Tizen & webOS (web, mobile web, smart TVs, set-top boxes and gaming consoles).
This document covers the creation of a minimal app including a THEOplayerView component,
and an overview of the accompanying example app with a user interface provided
by the @theoplayer/react-native-ui package.
It also gives a description of the properties of the THEOplayerView component, and
a list of features and known limitations.
Set usePlayerFacade: true in the player configuration at creation to enable the facade.
The default is false; iOS and tvOS do not support this option.
On Web, the facade is available at player.nativeHandle.
Integrations can register through registerIntegration, dispatch THEOplayer player
and ad events (including adclicked), and supply a clock through getCurrentTime() in
seconds. The wrapper forwards adclicked to React Native's ad-event stream.
Close the registration before replacing an integration. Playback engines and ad
schedulers should use facade.contentPlayer, not the facade's overridden ad clock.
Integrations can provide an ads object implementing the Ads API and its event
subscriptions. The stable public player.ads delegates to that object, including
scheduling queries and controls. Existing listeners migrate when an integration
registers or closes; native Ads behavior returns after removal. The earlier
getAdState() and shouldConsumeAdEvent(event) hooks remain available for
integrations without an Ads object. The facade never reconstructs ad lifecycle.
getMuted() / setMuted(value) and getVolume() / setVolume(value) route audio
through an integration. Setters return true when handled; otherwise the facade
falls back to content. Nullish getter results also fall back to content.
registration.dispatchEvent(event) accepts typed THEOplayer player and ad events.
Ad events route to player.ads listeners; player events such as playing, waiting,
and volumechange route to player listeners. Dispatch does not emit on the content
player or pass through backing-event interceptors. Closed registrations cannot emit.
registration.dispatchPlayerEvent(event) remains a compatible player-event entry point.
Playback ownership and audio synchronization remain integration responsibilities.
registration.interceptPlayerEvent(type, callback) lets an integration inspect a
backing player event once before facade listeners receive it. Return true to
consume the event, or false to forward it. Raw player listeners are unaffected.
The returned disposer removes the interceptor. Existing interceptors remain until
disposed or the facade is destroyed, allowing an integration to drain already-queued
events after unregistering; a closed registration cannot install new interceptors.
registration.interceptPlayerEvents(callback) applies the same policy to every
subscribed backing-player event, including subscriptions added later. Type-specific
interceptors run first; integration-dispatched events bypass both kinds. Use a
type-specific interceptor when an event must be observed even without consumers.
An optional isSeeking() integration hook overrides the public seeking state;
nullish results fall back to the backing player.
Pause/seek ownership, pending transitions, lifecycle exceptions and ad lifecycle
decisions belong to the integration, not the facade.
On Android, implement com.theoplayer.integration.Integration and call
ReactTHEOplayerView.registerIntegration(integration) after the view is initialized.
The returned IntegrationRegistration supports the same dispatch and interception
semantics using native Android SDK events. Interceptor disposers implement Closeable;
call close() to remove them. Access the raw engine through
(view.player as PlayerFacade).contentPlayer. Time values are in seconds on both platforms.
Android's getAdState() returns a PlayerFacadeAdState; its nullable result delegates
to native Ads. The facade permits registration during native ads and does not infer
state or suppress native ad events merely because an integration is registered.
Native SDK extensions (theoAds, ima, dai) resolve against the raw player or Ads
object through the facade-aware extensions in com.theoplayer.integration.
Custom advertising must not overlap ongoing native IMA/DAI playback on Android.
Finish or reset native advertising before taking over. Replacing/filtering native
ad events can suspend the RN bridge's native DAI bookkeeping, so fresh native state
after hidden native playback is not guaranteed. ReactTHEOplayerView.adsApi remains
the native source-specific adapter/event sink; use view.player.ads for facade state.
React Native Ads queries and controls use a facade-aware bridge with native fallback.
Focused facade regression tests (Node 22.18+):
node --test src/__tests__/PlayerFacade.test.ts.
Android tests, from example/android:
./gradlew :react-native-theoplayer:testDebugUnitTest --tests 'com.theoplayer.integration.PlayerFacade*Test' --console=plain.
For each platform, a dependency to the corresponding THEOplayer SDK is included through a dependency manager:
- Gradle & Maven for Android
- Cocoapods for iOS
- npm for Web
In order to use one of these THEOplayer SDKs, it is necessary to obtain a valid THEOplayer license for that specific platform, i.e. HTML5, Android, and/or iOS. You can sign up for a THEOplayer SDK license through our portal.
If you have no previous experience in React Native, we encourage you to first explore the React Native Documentation, as it gives you a good start on one of the most popular app development frameworks.
These are guides on how to use the THEOplayer React Native SDK in your React Native project(s) and can be used linearly or by searching the specific section. It is recommended that you have a basic understanding of how React Native works to speed up the way of working with THEOplayer React Native SDK.
Depending on the platform on which the application is deployed, a different set of features is available.
If a feature missing, additional help is needed, or you need to extend the package, please reach out to us for support.
| Feature | Android, Android TV, Fire TV | Web | iOS, tvOS |
|---|---|---|---|
| Streaming | MPEG-DASH (fmp4, CMAF), HLS (TS, CMAF), Progressive MP4, MP3, M4A | HLS (TS, CMAF), Progressive MP4, MP3, M4A | |
| Content Protection | Widevine | Widevine, PlayReady, Fairplay | Fairplay |
| DRM Connectors | BuyDRM, EZDRM, Anvato, Titanium, Axinom, Irdeto, VuDRM, Comcast, Verimatrix, Azure, … | ||
| Analytics Connectors | Adobe, Agama, Comscore, Conviva, Mux, Nielsen, Youbora | ||
| Other Connectors | Yospace SSAI | ||
| Subtitles & Closed Captions | CEA-608/708, SRT, TTML, WebVTT | ||
| Metadata | Event stream, emsg, ID3, EXT-X-DATERANGE, EXT-X-PROGRAM-DATE-TIME | ||
| Advertising Integration | Google IMA, Google DAI, THEOads | ||
| Cast Integration | Chromecast | Chromecast, Airplay | |
| Presentation Mode | Inline, Picture-in-Picture, Fullscreen | ||
| Audio Control Management | Audio focus & Audio-Becoming-Noisy mgmt | (Audio control management by platform) | |
| Advanced APIs | Background playback, Media Session, Media Cache (offline playback) |
Background playback, NowPlaying, Media Cache (iOS only) |
|
User Interface@theoplayer/react-native-ui |
Basic playback, media & text track selection, progress bar, live & vod, preview thumbnails, customisable & extensible | ||
The react-native-theoplayer package can be combined with any number of connectors to provide extra
functionality. Currently, the following connectors are available:
| Connector | npm package | Source |
|---|---|---|
| Adobe Heartbeat analytics using the Media Collections API |  |
Adobe |
| Adobe Media Edge analytics |  |
Adobe Edge |
| Agama analytics |  |
Agama |
| Bitmovin analytics |  |
Bitmovin |
| Comscore analytics |  |
Comscore |
| Conviva analytics |  |
Conviva |
| Engage |  |
Engage |
| Gemius |  |
Gemius |
| Mux analytics |  |
Mux |
| Nielsen analytics |  |
Nielsen |
| Nielsen AdScript analytics |  |
AdScript |
| Youbora analytics |  |
Youbora |
| Yospace SSAI |  |
Yospace |
| Content protection (DRM) |  |
DRM |
| React Native Open UI |  |
Open UI |
A template forreact-native-theoplayer connectors. |
 |
Connector template |
This section starts with creating a minimal demo app that integrates the react-native-theoplayer package,
followed by an overview of the available properties and functionality of the THEOplayerView component.
An example application including a basic user interface and demo sources is included in the
git repository,
and discussed in the next section.
This section gives an overview of features, limitations and known issues:
- Adaptive Bitrate (ABR)
- Advertisements
- Android Media3 Pipeline
- Audio Control Management
- Background playback and notifications
- Casting with Chromecast and Airplay
- Common Media Client Data (CMCD)
- Content matching on tvOS
- Digital Rights Management (DRM)
- Expo
- Fullscreen presentation
- Media Control
- Media Caching
- Metrics
- Migrating to THEOplayer 9.x
- Migrating to THEOplayer 10.x🔥
- Millicast
- Picture-in-Picture (PiP)
- Subtitles, Closed Captions and Metadata tracks
- Limitations and known issues
See the API Reference for detailed documentation about all available components and functions.