If you're new to Native Frame, it's a video streaming platform that lets you pay-as-you-go or seamlessly transition to enterprise-grade private cloud. Native Frame support for web, native Android, and native iOS has been available for some time — and now there's a package specific to React Native.
React Native (RN) has been a growing platform for web developers to build Android and iOS apps with predominantly the same codebase. First released in 2015, it is actively in development and features have matured greatly over the last few years.
Recent Developments
Some recent developments in React Native have made it possible to support Native Frame video streaming. Improved performance, better module integration (Turbo Modules), and lightweight distribution has completely changed my opinion of RN as a platform for developers.
Live DVR: Watch Live and Rewind at the Same Time
One of the more compelling features of the Native Frame React Native SDK is Live DVR — built directly into the VideoPlayer component with no extra configuration required.
Live DVR lets viewers rewind, seek, and catch up on a stream that's still actively broadcasting. A viewer who tunes in late can scrub back to the beginning of the stream, then jump back to the live edge whenever they're ready — all without interrupting the broadcast or requiring a separate recorded asset.
For sports apps in particular, this matters. A parent who picks up their phone mid-game shouldn't miss the first half just because they weren't watching from minute one.
The VideoPlayer component handles the transition between live and DVR modes automatically. The onLiveDvrStateChange callback fires whenever the viewer switches modes, and ref methods rewind(), seekTo(), and goLive() give you full programmatic control to build custom playback controls.
import { VideoPlayer, getSession } from '@video/react-native-sdk';
// VideoPlayer handles live/DVR switching automatically
<VideoPlayer
ref={videoRef}
manifestUrl="<manifest URL>"
session={mySession}
autoplay={true}
onLiveDvrStateChange={(state) => console.log('DVR state:', state)}
/>
// Rewind 10 seconds
videoRef.current?.rewind(10);
// Jump back to the live edge
videoRef.current?.goLive();
Before installing the SDK, make sure your development environment meets the minimum requirements.
React Native 0.71+
iOS 14+ / Android 7+
Node.js 18+
Native Frame account
Add the Native Frame React Native SDK to your project using your preferred package manager.
# Using npm
npm install @video/react-native-sdk
# Using yarn
yarn add @video/react-native-sdk
# Link native dependencies
cd ios && pod install
Initialize a session with your API key and stream configuration. The getSession helper handles authentication and returns a ready-to-use session object.
import { getSession } from '@video/react-native-sdk';
const session = await getSession({
apiKey: 'your-api-key',
streamId: 'your-stream-id',
});
Drop the VideoPlayer component into your view. It handles adaptive bitrate streaming, fullscreen, and playback controls out of the box.
import { VideoPlayer } from '@video/react-native-sdk';
export default function LiveScreen() {
return (
<VideoPlayer
manifestUrl="<manifest URL>"
session={session}
autoplay={true}
/>
);
}
Build and run on a device or simulator. The player will connect to your stream and begin playback automatically.
# iOS
npx react-native run-ios
# Android
npx react-native run-android
.avif)
.png)
.webp)
.png)
.png)
.avif)
.avif)
.avif)
.avif)
%20(1).avif)
.avif)
.avif)
.avif)
.avif)
.avif)
.avif)
