{"id":13709744,"url":"https://github.com/THEOplayer/react-native-theoplayer","last_synced_at":"2025-05-06T18:32:47.954Z","repository":{"id":38614557,"uuid":"500366784","full_name":"THEOplayer/react-native-theoplayer","owner":"THEOplayer","description":"A React Native THEOplayerView component","archived":false,"fork":false,"pushed_at":"2025-04-30T10:06:50.000Z","size":35345,"stargazers_count":78,"open_issues_count":5,"forks_count":25,"subscribers_count":6,"default_branch":"develop","last_synced_at":"2025-04-30T11:33:54.075Z","etag":null,"topics":["android","ios","react-native","theoplayer","video","video-player","video-streaming"],"latest_commit_sha":null,"homepage":"https://theoplayer.github.io/react-native-theoplayer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/THEOplayer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-06-06T09:18:31.000Z","updated_at":"2025-04-30T10:06:56.000Z","dependencies_parsed_at":"2023-12-20T13:32:21.637Z","dependency_job_id":"eb766ec4-55bf-4cbe-bbb0-2a29d777f6df","html_url":"https://github.com/THEOplayer/react-native-theoplayer","commit_stats":{"total_commits":2275,"total_committers":16,"mean_commits":142.1875,"dds":0.6404395604395605,"last_synced_commit":"06546ef6921bccc968388200015db7d8d41d7fbf"},"previous_names":[],"tags_count":117,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEOplayer%2Freact-native-theoplayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEOplayer%2Freact-native-theoplayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEOplayer%2Freact-native-theoplayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEOplayer%2Freact-native-theoplayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/THEOplayer","download_url":"https://codeload.github.com/THEOplayer/react-native-theoplayer/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252744708,"owners_count":21797669,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","react-native","theoplayer","video","video-player","video-streaming"],"created_at":"2024-08-02T23:00:45.039Z","updated_at":"2025-05-06T18:32:47.929Z","avatar_url":"https://github.com/THEOplayer.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"# React Native THEOplayer\n\n\u003cimg src=\"./doc/logo-optiview-dark.png#gh-dark-mode-only\" height=\"120\" alt=\"OptiView logo\"\u003e\u003cimg src=\"./doc/logo-optiview-light.png#gh-light-mode-only\" height=\"120\" alt=\"OptiView logo\"\u003e\u003cimg src=\"./doc/logo-react-native.png\" height=\"120\" alt=\"React Native logo\"\u003e\n\n## License\n\nThis projects falls under the license as defined in https://github.com/THEOplayer/license-and-disclaimer.\n\n## Table of Contents\n\n1. [Overview](#overview)\n2. [Prerequisites](#prerequisites)\n3. [How to use these guides](#how-to-use-these-guides)\n4. [Features](#features)\n5. [Available connectors](#available-connectors)\n6. [Creating your first app](#creating-your-first-app)\n7. [Knowledge Base](#knowledge-base)\n8. [API Reference](#api-reference)\n\n## Overview\n\nThe `react-native-theoplayer` package provides a `THEOplayerView` component supporting video playback on the\nfollowing platforms:\n\n- Android, Android TV \u0026 FireTV\n- iOS \u0026 tvOS (Apple TV)\n- HTML5, Tizen \u0026 webOS (web, mobile web, smart TVs, set-top boxes and gaming consoles).\n\nThis document covers the creation of a minimal app including a `THEOplayerView` component,\nand an overview of the accompanying example app with a user interface provided\nby the `@theoplayer/react-native-ui` package.\n\nIt also gives a description of the properties of the `THEOplayerView` component, and\na list of features and known limitations.\n\n## Prerequisites\n\nFor each platform, a dependency to the corresponding THEOplayer SDK is included through a dependency manager:\n\n- Gradle \u0026 Maven for Android\n- Cocoapods for iOS\n- npm for Web\n\nIn order to use one of these THEOplayer SDKs, it is necessary to obtain a valid THEOplayer license for that specific platform,\ni.e. HTML5, Android, and/or iOS. You can sign up for a THEOplayer SDK license through [our portal](https://portal.theoplayer.com/).\n\nIf you have no previous experience in React Native, we encourage you to first explore the\n[React Native Documentation](https://reactnative.dev/docs/getting-started),\nas it gives you a good start on one of the most popular app development frameworks.\n\n## How to use these guides\n\nThese are guides on how to use the THEOplayer React Native SDK in your React Native project(s) and can be used\nlinearly or by searching the specific section. It is recommended that you have a basic understanding of how\nReact Native works to speed up the way of working with THEOplayer React Native SDK.\n\n## Features\n\nDepending on the platform on which the application is deployed, a different set of features is available.\n\nIf a feature missing, additional help is needed, or you need to extend the package,\nplease reach out to us for support.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eFeature\u003c/th\u003e\n\u003cth\u003eAndroid, Android TV, Fire TV\u003c/th\u003e\n\u003cth\u003eWeb\u003c/th\u003e\n\u003cth\u003eiOS, tvOS\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eStreaming\u003c/strong\u003e\u003c/td\u003e\n\u003ctd colspan=\"2\"\u003eMPEG-DASH (fmp4, CMAF), HLS (TS, CMAF), Progressive MP4, MP3\u003c/td\u003e\n\u003ctd\u003eHLS (TS, CMAF), Progressive MP4, MP3\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eContent Protection\u003c/strong\u003e\u003c/td\u003e\n\u003ctd\u003eWidevine\u003c/td\u003e\n\u003ctd\u003eWidevine, PlayReady, Fairplay\u003c/td\u003e\n\u003ctd\u003eFairplay\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eDRM Connectors\u003c/strong\u003e\u003c/td\u003e\n\u003ctd colspan=\"3\"\u003eBuyDRM, EZDRM, Anvato, Titanium, Axinom, Irdeto, VuDRM, Comcast, Verimatrix, Azure, …\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eAnalytics Connectors\u003c/strong\u003e\u003c/td\u003e\n\u003ctd colspan=\"3\"\u003eAdobe, Agama, Comscore, Conviva, Mux, Nielsen, Youbora\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eOther Connectors\u003c/strong\u003e\u003c/td\u003e\n\u003ctd colspan=\"1\"\u003eYospace SSAI\u003c/td\u003e\n\u003ctd colspan=\"2\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eSubtitles \u0026amp; Closed Captions\u003c/strong\u003e\u003c/td\u003e\n\u003ctd colspan=\"3\"\u003eCEA-608/708, SRT, TTML, WebVTT\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eMetadata\u003c/strong\u003e\u003c/td\u003e\n\u003ctd colspan=\"3\"\u003eEvent stream, emsg, ID3, EXT-X-DATERANGE, EXT-X-PROGRAM-DATE-TIME\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eAdvertising Integration\u003c/strong\u003e\u003c/td\u003e\n\u003ctd colspan=\"3\"\u003eGoogle IMA, Google DAI, THEOads\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eCast Integration\u003c/strong\u003e\u003c/td\u003e\n\u003ctd\u003eChromecast\u003c/td\u003e\n\u003ctd colspan=\"2\"\u003eChromecast, Airplay\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003ePresentation Mode\u003c/strong\u003e\u003c/td\u003e\n\u003ctd colspan=\"3\"\u003eInline, Picture-in-Picture, Fullscreen\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eAudio Control Management\u003c/strong\u003e\u003c/td\u003e\n\u003ctd\u003eAudio focus \u0026amp; Audio-Becoming-Noisy mgmt\u003c/td\u003e\n\u003ctd colspan=\"2\"\u003e(Audio control management by platform)\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eAdvanced APIs\u003c/strong\u003e\u003c/td\u003e\n\u003ctd colspan=\"2\"\u003eBackground playback,\u003cbr/\u003eMedia Session,\u003cbr/\u003eMedia Cache (offline playback)\u003c/td\u003e\n\u003ctd\u003eBackground playback,\u003cbr/\u003eNowPlaying,\u003cbr/\u003eMedia Cache (iOS only)\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cstrong\u003eUser Interface\u003c/strong\u003e\u003cbr/\u003e\u003ccode\u003e@theoplayer/react-native-ui\u003c/code\u003e\u003c/td\u003e\n\u003ctd colspan=\"3\"\u003eBasic playback, media \u0026amp; text track selection, progress bar, live \u0026amp; vod, preview thumbnails, customisable \u0026amp; extensible\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Available connectors\n\nThe `react-native-theoplayer` package can be combined with any number of connectors to provide extra\nfunctionality. Currently, the following connectors are available:\n\n| Connector                                                 | npm package                                                                                                                                                                                                                                                            | Source                                                                                           |\n|-----------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|\n| Adobe Heartbeat analytics using the Media Collections API | [![%40theoplayer/react-native-analytics-adobe](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-analytics-adobe?label=%40theoplayer/react-native-analytics-adobe)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-analytics-adobe)                | [`Adobe`](https://github.com/THEOplayer/react-native-connectors/tree/main/adobe)                 |\n| Adobe Media Edge analytics                                | [![%40theoplayer/react-native-analytics-adobe-edge](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-analytics-adobe-edge?label=%40theoplayer/react-native-analytics-adobe-edge)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-analytics-adobe) | [`Adobe Edge`](https://github.com/THEOplayer/react-native-connectors/tree/main/adobe-edge)       |\n| Agama analytics                                           | [![%40theoplayer/react-native-analytics-agama](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-analytics-agama?label=%40theoplayer/react-native-analytics-agama)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-analytics-agama)                | [`Agama`](https://github.com/THEOplayer/react-native-connectors/tree/main/agama)                 |\n| Comscore analytics                                        | [![%40theoplayer/react-native-analytics-comscore](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-analytics-comscore?label=%40theoplayer/react-native-analytics-comscore)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-analytics-comscore)    | [`Comscore`](https://github.com/THEOplayer/react-native-connectors/tree/main/comscore)           |\n| Conviva analytics                                         | [![%40theoplayer/react-native-analytics-conviva](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-analytics-conviva?label=%40theoplayer/react-native-analytics-conviva)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-analytics-conviva)        | [`Conviva`](https://github.com/THEOplayer/react-native-connectors/tree/main/conviva)             |\n| Mux analytics                                             | [![%40theoplayer/react-native-analytics-mux](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-analytics-mux?label=%40theoplayer/react-native-analytics-mux)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-analytics-mux)                        | [`Mux`](https://github.com/THEOplayer/react-native-connectors/tree/main/mux)                     |\n| Nielsen analytics                                         | [![%40theoplayer/react-native-analytics-nielsen](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-analytics-nielsen?label=%40theoplayer/react-native-analytics-nielsen)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-analytics-nielsen)        | [`Nielsen`](https://github.com/THEOplayer/react-native-connectors/tree/main/nielsen)             |\n| Youbora analytics                                         | [![%40theoplayer/react-native-analytics-youbora](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-analytics-youbora?label=%40theoplayer/react-native-analytics-youbora)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-analytics-youbora)        | [`Youbora`](https://github.com/THEOplayer/react-native-connectors/tree/main/youbora)             |\n| Yospace SSAI                                              | [![%40theoplayer/react-native-yospace](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-yospace?label=%40theoplayer/react-native-yospace)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-yospace)                                                | [`Yospace`](https://github.com/THEOplayer/react-native-connectors/tree/main/yospace)             |\n| Content protection (DRM)                                  | [![%40theoplayer/react-native-drm](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-drm?label=%40theoplayer/react-native-drm)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-drm)                                                                | [`DRM`](https://github.com/THEOplayer/react-native-theoplayer-drm)                               |\n| React Native Open UI                                      | [![%40theoplayer/react-native-ui](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-ui?label=%40theoplayer/react-native-ui)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-ui)                                                                    | [`Open UI`](https://github.com/THEOplayer/react-native-theoplayer-ui)                            |\n| A template for\u003cbr/\u003e`react-native-theoplayer` connectors.  | [![%40theoplayer/react-native-connector-template](https://img.shields.io/npm/v/%40theoplayer%2Freact-native-connector-template?label=%40theoplayer/react-native-connector-template)](https://www.npmjs.com/package/%40theoplayer%2Freact-native-connector-template)    | [`Connector template`](https://github.com/THEOplayer/react-native-theoplayer-connector-template) |\n\n## Creating your first app\n\nThis section starts with creating a minimal demo app that integrates the `react-native-theoplayer` package,\nfollowed by an overview of the available properties and functionality of the THEOplayerView component.\nAn example application including a basic user interface and demo sources is included in the\n[git repository](https://github.com/THEOplayer/react-native-theoplayer/tree/develop/example),\nand discussed in the next section.\n\n- [Creating a minimal demo app](./doc/creating-minimal-app.md)\n  - [Getting started on Android](./doc/creating-minimal-app.md#getting-started-on-android)\n  - [Getting started on iOS](./doc/creating-minimal-app.md#getting-started-on-ios-and-tvos)\n  - [Getting started on Web](./doc/creating-minimal-app.md#getting-started-on-web)\n- [The THEOplayerView component](./doc/theoplayerview-component.md)\n- [The example application](./doc/example-app.md)\n\n## Knowledge Base\n\nThis section gives an overview of features, limitations and known issues:\n\n- [Adaptive Bitrate (ABR)](./doc/abr.md)\n- [Advertisements](./doc/ads.md)\n- [Android Media3 Pipeline🔥](./doc/media3.md)\n- [Audio Control Management](./doc/audio-control.md)\n- [Background playback and notifications](./doc/background.md)\n- [Casting with Chromecast and Airplay](./doc/cast.md)\n- [Common Media Client Data (CMCD)](./doc/cmcd.md)\n- [Digital Rights Management (DRM)](./doc/drm.md)\n- [Fullscreen presentation](./doc/fullscreen.md)\n- [Media Caching](./doc/media-caching.md)\n- [Migrating to THEOplayer 9.x🔥](./doc/migrating-to-react-native-theoplayer-9.md)\n- [Millicast](./doc/millicast.md)\n- [Picture-in-Picture (PiP)](./doc/pip.md)\n- [Subtitles, Closed Captions and Metadata tracks](./doc/texttracks.md)\n- [Limitations and known issues](./doc/limitations.md)\n\n## API Reference\n\nSee the [API Reference](https://theoplayer.github.io/react-native-theoplayer/api/) for detailed documentation\nabout all available components and functions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTHEOplayer%2Freact-native-theoplayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTHEOplayer%2Freact-native-theoplayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTHEOplayer%2Freact-native-theoplayer/lists"}