## Table of Contents
* [Installation](#installation)
* [iOS](#ios-installation)
* [tvOS](#tvos-installation)
* [Android](#android-installation)
* [Windows](#windows-installation)
* [Examples](#examples)
* [iOS](#ios-example)
* [Android](#android-example)
* [Windows](#windows-example)
* [Usage](#usage)
* [iOS App Transport Security](#ios-app-transport-security)
* [Audio Mixing](#audio-mixing)
* [Android Expansion File Usage](#android-expansion-file-usage)
* [Updating](#updating)
* [Contributing](#contributing)
## Installation
Using npm:
```shell
npm install --save react-native-video
```
or using yarn:
```shell
yarn add react-native-video
```
Then follow the instructions for your platform to link react-native-video into your project:
### iOS installation
iOS details
#### 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](examples/basic/ios/Podfile#L5)
#### Using CocoaPods (required to enable caching)
Setup your Podfile like it is described in the [react-native documentation](https://facebook.github.io/react-native/docs/integration-with-existing-apps#configuring-cocoapods-dependencies).
Depending on your requirements you have to choose between the two possible subpodspecs:
Video only:
```diff
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](docs/caching.md)):
```diff
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
```
### tvOS installation
tvOS details
`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
### Android installation
Android details
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.
Or if you have trouble, make the following additions to the given files manually:
#### **android/settings.gradle**
Add player source in build configuration
```gradle
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:
```diff
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):
```gradle.properties
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.
/examples/basic/android/app/src/main/java/com/videoplayer/MainApplication.java
##### For manual linking
On top, where imports are:
```java
import com.brentvatne.react.ReactVideoPackage;
```
Add the `ReactVideoPackage` class to your list of exported packages.
```java
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ReactVideoPackage()
);
}
```
### Windows installation
Windows RNW C++/WinRT details
#### 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 instuctions for React Native Windows 0.62 above, but substitute _ReactNativeVideoCPP61_ for _ReactNativeVideoCPP_.
## 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
```
## Usage
```javascript
// Load the module
import Video from 'react-native-video';
// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.