Porting Your SDK To React Native

Mux Data measures video quality of service, including startup time, image quality, and rebuffering. Jhaveri explains how slow startup and buffering can drive viewers away, while mismatched video and player sizes can waste bandwidth or make playback look blocky. Aggregated data helps teams compare performance across browsers, operating systems, and regions.

Mux maintains 22 player level SDKs using core libraries in JavaScript, Objective-C, and Java. The cores hold metric calculations and data submission; each lightweight wrapper maps a player’s events into the core library’s API. This lets a small team support players with different callback names and behaviors.

The JavaScript core initially failed in React Native because it used the browser API `window.performance.timing` and the `platform.js` library. Jhaveri guarded the browser API and used React Native’s `Platform` module for operating system details. He then built a higher order component wrapper that preserves the usual video component props and callbacks while adding Mux metadata and performance tracking.

The integration was in beta, with some customers using it in production, and had remaining callback inconsistencies between iOS and Android. Mux considered hooking directly into AVPlayer and ExoPlayer, which already had supported SDKs, but chose to use React Native Video’s exposed APIs. Depending on its underlying players could break tracking when those implementation details changed without a public API change.