expo-video or react-native-video?

Both wrap AVPlayer on iOS and ExoPlayer on Android, so playback is identical. expo-video is smaller and runs in Expo Go. react-native-video is what third-party SDKs integrate against, analytics included, so if you need playback metrics that decides it before anything else does.

Why is react-native-video showing a black screen?

Most often the view has no height. fills the space it is given, and flex: 1 inside a parent with no size resolves to zero. Add a temporary backgroundColor to check. If a rectangle appears, the layout is fine and the fault is the stream, the native build or an unhandled onError.

Does react-native-video support HLS?

Yes, natively on both platforms, because the underlying AVPlayer and ExoPlayer both play HLS. There is no extra library to install. Pass an .m3u8 URL as the source and adaptive bitrate switching is handled by the OS player rather than by JavaScript.

Why does uploading video fail in Expo Go?

Expo Go is a prebuilt app with a fixed set of native modules, and a chunked upload SDK is not among them. Playback works because expo-video is part of the Expo SDK. Create a development build and the upload screen works, with your usual npx expo start loop intact.

Can I upload video from the app without a backend?

No. The signed upload URL is created with a Secret Key, and anyone can extract strings from a mobile binary. The app asks a backend you control for a URL and uploads to it directly, so the video bytes still never pass through your server.

How do I make a React Native video player fullscreen?

On expo-video the VideoView exposes fullscreen through native controls, and Picture-in-Picture needs allowsPictureInPicture plus a development build. On react-native-video fullscreen is a prop on the component. Neither needs anything from the streaming side, since fullscreen is a view concern rather than a playback one.

How do I play a private video in React Native?

Fetch a short-lived JWT from your own server and append it to the stream URL as a token query parameter. The token expires, so a URL shared out of the app stops working. Creating it on the device is not an option, because the signing key would ship in the binary.

Why does Picture-in-Picture do nothing?

Picture-in-Picture needs native configuration that the generic Expo Go binary does not carry, so it silently does nothing there. Create a development build with npx expo run:ios or npx expo run:android and it works.

FRAMEWORKS

React Native video

Video infrastructure for a React Native app built with Expo. Resumable uploads straight from the device, adaptive playback through expo-video, and analytics on top, without building your own encoding, storage and delivery.

Read the docs View on GitHub

Free plan: 10 videos, 100K streaming minutes, 300 minutes of subtitles and moderation. No credit card.

React Native 0.72+runtime

expo-videoplayback

MITlicense

What you get

What you get from FastPix for React Native video

Four things you don't have to build or run yourself.

One video API

Upload, storage, delivery, the player, analytics and AI all come from the same API. No Vite plugin, nothing added to your build.

Built-in encoding

FastPix turns each upload into several quality levels and packages them for streaming. No FFmpeg, no queue workers.

Analytics already on

The player sends view data on its own. Add a title and a viewer ID and you can see who watched what.

Secure video streaming and DRM

Sign a token on your server and pass it to the player. Widevine, PlayReady and FairPlay are all supported.

Functionality

Every React Native video capability, from upload to AI

Pick a group, then a capability. Each one tells you whether the code runs on the device, in expo-video, or on the backend that signs for it.

Video upload API

Your backend creates the signed URL and the device uploads to it in chunks. Unlike a browser upload, a native upload does not want the X-Client-Type: web-browser header. Send it and every chunk fails with an HTTP 400.

Where it runs · Backend creates, device sends

1const upload = new FastPixUpload({

2 endpoint: createUploadUrl, // async fn

3 fileUri: asset.uri, // file:// from the picker

4 chunkSize: 5 * 1024, // 5 MB, 256 KB aligned

5});

6await upload.start();

Docs →Repo →

Expo video player

There is no FastPix player for React Native, and there does not need to be. expo-video wraps AVPlayer on iOS and ExoPlayer on Android, and both play HLS natively. Playback is one thing: hand a FastPix stream URL to useVideoPlayer.

Where it runs · expo-video, not a FastPix player

1import { useVideoPlayer, VideoView } from "expo-video";

2

3const player = useVideoPlayer(getStreamUrl(playbackId));

4

5<VideoView player={player} nativeControls

6 allowsPictureInPicture />

Docs →

Setup

Install and configure the React Native video packages

Install the React Native video packages

Playback needs only expo-video. Uploading adds the FastPix Uploads SDK and a picker. Use expo install rather than npm install so versions match your Expo SDK.

expo install

1# Playback: works in Expo Go

2npx expo install expo-video

3

4# Uploading: needs a development build, not Expo Go

5npx expo install @fastpix/react-native-uploads expo-image-picker

6

7# Analytics wraps react-native-video, not expo-video

8npm install @fastpix/react-native-video-data

9

10# Bare React Native only, after installing

11cd ios && pod install

Configure the backend, not the app

There's no API key, and nothing FastPix issues belongs in the app. Your backend holds the Access Token ID and Secret Key and hands the device a signed upload URL.

Get your access token

your backend

1// Your backend. Anyone can extract strings from a

2// mobile binary, so the Secret Key stays here.

3FASTPIX_USERNAME=your-access-token-id

4FASTPIX_PASSWORD=your-secret-key

5

6import { Fastpix } from "@fastpix/fastpix-node";

7

8const fastpix = new Fastpix({

9 security: {

10 username: process.env.FASTPIX_USERNAME,

11 password: process.env.FASTPIX_PASSWORD,

12 },

13});

14

15// Send no X-Client-Type header from a native app. That

16// value is for browsers and fails every chunk on device.

17const { uploadUrl } = await fastpix.inputVideo.upload({

18 corsOrigin: "*",

19 pushMediaSettings: { accessPolicy: "public" },

20});

21

22// The app only ever receives uploadUrl.

An Expo project with upload and playback wired

The picker, the resumable upload with pause and resume, the backend route that signs it, and the expo-video player, in one project you can clone and run.

· Expo SDK· expo-video· expo-image-picker

· Resumable upload· Development build

Fork the example

Behind the scenes

What happens after your Expo app uploads a file

Here's what happens between the file leaving the browser and the video reaching a viewer. None of it is code you write, and none of it runs in your app.

480p

1080p

4K

Native uploader

Chunked and resumable, from the browser to a signed URL.

Import from a URL

Or pass a public video URL and FastPix pulls it in.

Ingest, encode, package

No FFmpeg, no build step, nothing in your output directory.

Chunked, resumable ingest

Transcode to a ladder

Store and version

Package HLS renditions

Thumbnails and captions

Encrypt for DRM

video.media.ready

The webhook that tells your server the video is ready.

Adaptive playback

One playback ID into the player, on-demand or live.

1

2

3

Upload

From your Expo app

Process

FastPix handles this

Play

Webhook + playback ID

Your Expo app only touches the two ends. A server call hands over a signed URL and the player takes the playback ID. In between, a video.media.ready webhook tells your server the video is ready.

FAQ