OGPlayer React Native SDK
    Preparing search index...

    OGPlayer React Native SDK

    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)}
    />

    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.

    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.

    • 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.

    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.

    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/

    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/

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

    Settings
    Member Visibility

    On This Page
    OGPlayer React Native