react-native-video

A <Video> component for react-native, as seen in
react-native-login!

Requires react-native >= 0.40.0, for RN support of 0.19.0 - 0.39.0 please use a pre 1.0 version.

Add it to your project

Run npm i -S react-native-video

iOS

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

If you would like to allow other apps to play music over your video component, add:

AppDelegate.m

#import <AVFoundation/AVFoundation.h>  // import

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
  ...
}

Note: you can also use the ignoreSilentSwitch prop, shown below.

tvOS

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

react-native link don’t works properly with the tvOS target so we need to add the library manually.

First select your project in Xcode.

tvOS-step-1

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

tvOS-step-2

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

tvOS-step-3

Select RCTVideo-tvOS

tvOS-step-4

That’s all, you can use react-native-video for your tvOS application

Android

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

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

android/settings.gradle

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

android/app/build.gradle

dependencies {
   ...
   compile project(':react-native-video')
}

MainApplication.java

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()
    );
}

Windows

Make the following additions to the given files manually:

windows/myapp.sln

Add the ReactNativeVideo project to your solution.

  1. Open the solution in Visual Studio 2015
  2. Right-click Solution icon in Solution Explorer > Add > Existing Project...

UWP: Select node_modules\react-native-video\windows\ReactNativeVideo\ReactNativeVideo.csproj
WPF: Select node_modules\react-native-video\windows\ReactNativeVideo.Net46\ReactNativeVideo.Net46.csproj

windows/myapp/myapp.csproj

Add a reference to ReactNativeVideo to your main application project. From Visual Studio 2015:

  1. Right-click main application project > Add > Reference...

UWP: Check ReactNativeVideo from Solution Projects.
WPF: Check ReactNativeVideo.Net46 from Solution Projects.

MainPage.cs

Add the ReactVideoPackage class to your list of exported packages.

using ReactNative;
using ReactNative.Modules.Core;
using ReactNative.Shell;
using ReactNativeVideo; // <-- Add this
using System.Collections.Generic;
...

        public override List<IReactPackage> Packages
        {
            get
            {
                return new List<IReactPackage>
                {
                    new MainReactPackage(),
                    new ReactVideoPackage(), // <-- Add this
                };
            }
        }

...

GitHub