Installation

Using npm:

npm install --save react-native-video

or using yarn:

yarn add react-native-video

Then follow the instructions for your platform to link react-native-video into your project.

Specific Platform Installation

iOS

Standard Method

Run pod install in the ios directory of your project.

⚠️ From version 6.0.0, the minimum iOS version required is 13.0. For more information, see the updating section.

Enable Custom Features in the Podfile

Sample configurations are available in the sample app. See the sample pod file.

Video Caching

To enable video caching, add the following line to your Podfile: (more info here)

# Enable Video Caching
$RNVideoUseVideoCaching=true

Google IMA

Google IMA is the SDK for client-side ads integration. See the Google documentation for more details.

To enable Google IMA, add the following line to your Podfile:

$RNVideoUseGoogleIMA=true

If you are using Expo, you can use the Expo plugin.

Note: If you are enabling video caching (using $RNVideoUseVideoCaching), you must add the following to your Gemfile:

rubyCopy

gem "cocoapods-swift-modular-headers"

Then, install dependencies using:

shCopy

bundle install
bundle exec pod install

This enables Swift modular headers for Swift dependencies.

Android

From version >= 6.0.0, your application must use Kotlin version >= 1.8.0.

buildscript {
    ...
    ext.kotlinVersion = '1.8.0'
    ext.compileSdkVersion = 34
    ext.targetSdkVersion = 34
    ...
}

Enable Custom Features in the Gradle File

If you are using Expo, you can use the Expo plugin.

You can enable or disable the following features by setting the corresponding variables in your android/build.gradle file:

• useExoplayerIMA - Enable Google IMA SDK (ads support)
• useExoplayerRtsp - Enable RTSP support
• useExoplayerSmoothStreaming - Enable SmoothStreaming support
• useExoplayerDash - Enable Dash support
• useExoplayerHls - Enable HLS support

Each enabled feature increases the APK size, so only enable what you need.

By default, the enabled features are:

• useExoplayerSmoothStreaming
• useExoplayerDash
• useExoplayerHls

Example:

buildscript {
  ext {
    ...
    useExoplayerIMA = true
    useExoplayerRtsp = true
    useExoplayerSmoothStreaming = true
    useExoplayerDash = true
    useExoplayerHls = true
    ...
  }
}

See the sample app.

Windows

Autolinking

React Native Windows 0.63 and above

Autolinking should automatically add react-native-video to your app.

Manual Linking

React Native Windows 0.62

Make the following manual additions:

windows\myapp.sln

Add the ReactNativeVideoCPP project to your solution:

1. Open your solution in Visual Studio 2019.
2. Right-click the Solution icon in Solution Explorer > Add > Existing Project...
3. Select node_modules\react-native-video\windows\ReactNativeVideoCPP\ReactNativeVideoCPP.vcxproj.

windows\myapp\myapp.vcxproj

Add a reference to ReactNativeVideoCPP to your main application project:

1. Open your solution in Visual Studio 2019.
2. Right-click the main application project > Add > Reference...
3. Check ReactNativeVideoCPP from Solution Projects.

pch.h

Add:

#include "winrt/ReactNativeVideoCPP.h"

app.cpp

Add:

PackageProviders().Append(winrt::ReactNativeVideoCPP::ReactPackageProvider());

before InitializeComponent();.

React Native Windows 0.61 and below

Follow the manual linking steps for React Native Windows 0.62, but use ReactNativeVideoCPP61 instead of ReactNativeVideoCPP.

tvOS

react-native link react-native-video does not work properly with the tvOS target, so the library must be added manually.

Steps:

1. Select your project in Xcode.

2. Select the tvOS target of your application and open the "General" tab.

3. Scroll to "Linked Frameworks and Libraries" and click the + button.

4. Select RCTVideo-tvOS.

visionOS

Run pod install in the visionos directory of your project.

Web

No additional setup is required. Everything should work out of the box.

However, only basic video support is available. HLS, Dash, ads, and DRM are not currently supported.