OGPlayer React Native

OGPlayer for React Native — native video playback behind a typed TypeScript API.

Release notes: https://ogplayer.tv/docs/reference/changelog/

ogplayer-react-native is a thin Fabric (New Architecture) wrapper over the OGPlayer native SDKs. Rendering, playback, DRM, ads and the player chrome are 100% native; this package adds a typed TypeScript API and a <OGPlayerView> component.

import { OGPlayerView } from 'ogplayer-react-native';

<OGPlayerView
  style={{ width: '100%', aspectRatio: 16 / 9 }}
  source={{ url: 'https://cdn.example.com/master.m3u8', title: 'My stream' }}
  autoplay
  onStateChanged={(s) => console.log(s)}
/>

Features

VOD, live and live-DVR · multi-DRM (Widevine / FairPlay) with a JS tokenProvider called on every license request · Google IMA ads · playlists with a themeable "Up next" card · a swipeable vertical video feed (<OGVerticalFeedView>) · offline downloads with offline DRM (OGDownloads) · picture-in-picture · embedded + sideloaded subtitles, multi-audio, quality selection · full native player chrome (configurable down to headless, with your own action icons by name) · watermark overlays in nine anchored slots · posters, content ratings, custom error copy and styling · one typed event stream.

Not yet available in React Native: FreeWheel ads.

Install

npm install ogplayer-react-native
cd ios && pod install

The Android SDK resolves from the OGPlayer Maven repository (the package adds maven.ogplayer.tv to your Gradle build — no setup needed); the iOS XCFrameworks ship inside this package (byte-identical to the SPM release). This package wraps OGPlayer Android 1.6.0 and OGPlayer iOS 1.6.0.

Requirements

• React Native 0.80+ (New Architecture)
• Android: minSdk 26, core-library desugaring enabled (Media3 requirement)
• Android + castEnabled: declare the Cast options provider in your app manifest — <meta-data android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME" android:value="com.ogplayer.cast.OGCastOptionsProvider"/>
• iOS: 18.0+ (iPhone XS/XR 2018 and newer)
• iOS + fullscreen rotation: declare landscape orientations in your Info.plist and forward supportedInterfaceOrientationsFor to OGRNPlayerHost.interfaceOrientationMask in your AppDelegate (two lines — see the demos app). Without it the player stays embedded.
• The vertical feed is a portrait surface: it keeps the screen portrait while mounted (large-screen devices ignore orientation pins by platform policy).
• pipEnabled (picture-in-picture; default off — there is no PiP button in the chrome, entering is your decision):
  • Android: add android:supportsPictureInPicture="true" to your activity (keep the usual android:configChanges — PiP resizes fire configuration changes). A missing flag is caught: the SDK logs the fix once and disables PiP instead of crashing.
  • iOS: add UIBackgroundModes: audio to Info.plist — without it iOS kills playback (and the PiP window) on background.
  • Expo: set both via app.json — "ios": { "infoPlist": { "UIBackgroundModes": ["audio"] } } and the expo-build-properties / an Android manifest plugin for supportsPictureInPicture — then npx expo prebuild.
  • Usage: pipEnabled + optional autoEnterPipOnBackground (default true; auto-enter is suppressed during ads, casting and errors), ref.enterPip() / ref.exitPip(), and onPipChanged. Closing the PiP window (Android ✕) pauses playback.

Casting (Android Chromecast / iOS AirPlay)

Set castEnabled on <OGPlayerView> and declare the options provider in your Android manifest (see Requirements). The SDK's cast button then appears in the player controls whenever a receiver is reachable; tapping it opens the device picker and hands playback off to the TV.

Bringing your own cast UI. Google Cast sessions are app-global, not button-scoped: OGPlayer's connector listens to the app's shared CastContext and engages when any cast session starts — regardless of which button started it. That means you can hide the SDK's button (uiConfig: { showCastButton: false }) and present your own cast entry point, e.g. the CastButton from react-native-google-cast; the session it starts triggers the same handoff.

Two integration notes when combining libraries:

• Android allows exactly one cast options provider per app. Keep the OGPlayer declaration (com.ogplayer.cast.OGCastOptionsProvider) — other libraries' cast buttons ride on whatever provider the app declares.
• This combination is architecturally guaranteed by the Cast framework's session model, but if you rely on it, smoke-test your specific library pairing — and tell us if anything surprises you.

On iOS the equivalent is AirPlay: the SDK's button opens the system route picker, and hiding it leaves AirPlay available via Control Center or your own AVRoutePickerView.

Localisation

Every word of the native chrome — labels, menu rows, screen-reader labels, ad and error copy — comes from uiConfig.strings (any subset of OGStrings; missing keys stay English), with the same keys as every other OGPlayer platform. <OGVerticalFeedView config={{ strings }}> covers the feed; errorMessages, retryButtonLabel and upNextText still win where set. Guide: https://ogplayer.tv/docs/guides/localisation/

Theming tokens

uiConfig.colors and uiConfig.dimens take any subset of OGControlColors (16 colours, #RRGGBB or #AARRGGBB, alpha first) and OGControlDimens (23 sizes in dp / pt), named as in the native SDKs; unset or invalid values keep the defaults. Guide: https://ogplayer.tv/docs/guides/theming/

License

Free to evaluate with the OGPlayer watermark; production use requires a commercial license key — https://ogplayer.tv/docs/getting-started/licensing/