A Video component for react-native

by React Native Example

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.

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

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