react-native-video/docs/pages/installation.md

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

iOS

Standard Method

React Native 0.60 and above

Run npx pod-install. Linking is not required in React Native 0.60 and above.

React Native 0.59 and below

Run react-native link react-native-video to link the react-native-video library.

Enable Static Linking for dependencies in your ios project Podfile

Add use_frameworks! :linkage => :static just under platform :ios in your ios project Podfile.

See the example ios project for reference

Using CocoaPods (required to enable caching)

Setup your Podfile like it is described in the react-native documentation.

Depending on your requirements you have to choose between the two possible subpodspecs:

Video only:

  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  `pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'`
  end

Video with caching (more info):

  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'`
  end

Enable custom feature in podfile file

Google IMA

Google IMA is the google SDK to support Client Side Ads Integration (CSAI), see google documentation for more information.

To enable google IMA usage define add following line in your podfile:

$RNVideoUseGoogleIMA=true

Android

Android

Autolinking

Linking is not required in React Native 0.60 and above.

If your project is using React Native < 0.60, run react-native link react-native-video to link the react-native-video library.

If you have trouble, make the following additions to the given files manually:

android/settings.gradle

Add player source in build configuration

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

android/app/build.gradle

From version >= 5.0.0, you have to apply these changes:

dependencies {
   ...
    compile project(':react-native-video')
+   implementation "androidx.appcompat:appcompat:1.0.0"
-   implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"

}

android/gradle.properties

Migrating to AndroidX (needs version >= 5.0.0):

android.useAndroidX=true
android.enableJetifier=true

MainApplication.java

If using com.facebook.react.PackageList to auto import native dependencies, there are no updates required here. Please see the android example project for more details.

For manual linking

On top, where imports are:

import com.brentvatne.react.ReactVideoPackage;

Add the ReactVideoPackage class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new ReactVideoPackage()
    );
}

Enable custom feature in gradle file

Enable client side ads insertion

To enable client side ads insertion CSAI with google IMA SDK, you need to enable it in your gradle file.

buildscript {
  ext {
    ...
    RNVUseExoplayerIMA = true
    ...
  }
}

Windows

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 additions to the given files manually:

windows\myapp.sln

Add the ReactNativeVideoCPP project to your solution (eg. windows\myapp.sln):

1. Open your solution in Visual Studio 2019
2. Right-click 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 (eg. windows\myapp\myapp.vcxproj):

1. Open your solution in Visual Studio 2019
2. Right-click 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 instructions for React Native Windows 0.62 above, but substitute ReactNativeVideoCPP61 for ReactNativeVideoCPP.

tvOS

tvOS

react-native link react-native-video doesn’t work properly with the tvOS target so we need to add the library manually.

First select your project in Xcode.

After that, select the tvOS target of your application and select « General » tab

Scroll to « Linked Frameworks and Libraries » and tap on the + button

Select RCTVideo-tvOS

Examples

Run yarn xbasic install in the root directory before running any of the examples.

iOS Example

yarn xbasic ios

Android Example

yarn xbasic android

Windows Example

yarn xbasic windows