Skip to content
OGPlayer

React Native quick start

ogplayer-react-native is a thin, typed wrapper over the native OGPlayer SDKs — the same Android artifacts and iOS frameworks native apps use. Rendering, playback, DRM, ads and the player chrome never leave native code; the package adds a TypeScript API, the <OGPlayerView> Fabric component and one event stream mirroring the native listeners.

Requires React Native 0.80+ with the New Architecture (Fabric).

Install

Section titled “Install”
Terminal window
npm install ogplayer-react-native
cd ios && pod install   # fetches the OGPlayer XCFrameworks automatically

Android resolves tv.ogplayer:* from Maven Central. Two Gradle requirements in your app module (the playback engine needs them): minSdk 26 and core-library desugaring:

android {
    compileOptions { isCoreLibraryDesugaringEnabled = true }
}
dependencies {
    coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:2.1.5")
}

Play something

Section titled “Play something”
import { OGPlayerView } from 'ogplayer-react-native';


<OGPlayerView
  style={{ width: '100%', aspectRatio: 16 / 9 }}
  licenseKey="OGP1…" // omit → watermarked trial
  source={{
    url: 'https://example.com/stream.m3u8',
    title: 'My movie',
    posterUrl: 'https://example.com/poster.jpg',
  }}
  autoplay
  autoFullscreenOnRotate
  onStateChanged={(s) => console.log(s)}
  onError={(e) => console.warn(e.code, e.message)}
/>

For fullscreen rotation on iOS, declare landscape orientations in Info.plist and forward supportedInterfaceOrientationsFor to OGRNPlayerHost.interfaceOrientationMask in your AppDelegate — two lines, shown in the demo app.

DRM

Section titled “DRM”

Same shape as every other platform — Widevine engages on Android, FairPlay on iOS, and the tokenProvider (a plain JS function) is called on every license request, including silent renewals:

source={{
  url: streamUrl,
  drm: {
    widevine: { licenseUrl: 'https://drm.example.com/widevine' },
    fairplay: {
      licenseUrl: 'https://drm.example.com/fairplay',
      certificateUrl: 'https://drm.example.com/fairplay.cer',
    },
    tokenHeaderName: 'X-AxDRM-Message',
    tokenProvider: async ({ renewal }) => ({
      'X-AxDRM-Message': await freshToken(),
    }),
  },
}}

Beyond the basics

Section titled “Beyond the basics”
  • Playlists — a playlist prop with per-item DRM/ads, auto-advance and the themeable Up next card (guide).
  • Vertical feed — <OGVerticalFeedView> renders the swipeable portrait feed; it pins the screen to portrait while mounted (guide).
  • Ads — set adsEnabled and put ads: { adTagUrl } on the media item for Google IMA (guide).
  • Casting — castEnabled plus one manifest meta-data entry on Android; AirPlay works out of the box on iOS.
  • Chrome — the full uiConfig surface: per-control visibility down to headless, colors, your own action icons by name, custom error copy and styling.
  • Overlays — the overlays prop places watermarks in the nine anchored slots.

Every native concept keeps its name and semantics, so the guides and the error-code table apply as-is.

Not yet in React Native: FreeWheel ads — use the native Android/iOS SDKs if you need FreeWheel today. A Flutter binding built on the same native SDKs is coming soon.