Awesome

React Native Android Video

react-native-android-video

Android ExoPlayer <AndroidVideo /> component for react-native.

Why did we create this package?

We found tons of issues with the popupler react-native-video package when running on Android. We have received reports from our users that on some Android devices the video just won't play and on others it does play, however on "seek()" operations for example, it would break down and stop working.

We took a deep dive into react-native-video native Android code and found lots of legacy code and use of many deprecated ExoPlayer methods.

Therefore we decided to create this new package for a light-weight, easy to use solution that enables react-native developers to integrate video ExoPlayer in their app for Android platform with 10x better performance than react-native-video.

Installation

Using npm:

$ npm install --save react-native-android-video

Or using yarn:

$ yarn add react-native-android-video

Android

1. Append the following lines to android/settings.gradle:

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

2. Insert the following lines inside the dependencies block in android/app/build.gradle:

compile project(':react-native-android-video')

3. Open MainApplication.java:

• Import the package on top of the file:

import com.cherrypick.androidvideo.RNAndroidVideoPackage;

• Add the RNAndroidVideoPackage class to your list of exported packages:

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

Usage

// Import the module
import AndroidVideo from 'react-native-android-video'

...

// In your render function
<AndroidVideo
  ref={(ref) => {
    this.player = ref
  }}
  style={styles.video}
  source={this.props.videoUrl}
  paused={!this.props.isPlaying}
  rate={this.props.playerRate}
  onPlayerReady={this._onVideoReady}
  onPlayerLoading={this._onVideoPlayerLoading}
  onProgress={this._onVideoPlayerProgress}
  onPlayerError={this._onVideoError}
/>

Configurable props

Event props

onPlayerReady

Callback function that is called when the media is loaded and the player is ready to play.

Payload:

onPlayerLoading

Callback function that is called when the player is start or stop buffering.

Payload: true / false.

onProgress

Callback function that is called every 250 mili seconds with info about which position the media is currently playing.

Payload:

onPlayerError

Callback function that is called when error is occurs.

Payload:

Methods

seek

Seek to the specified position represented by seconds.

Example:

this.player.seek(450)

Authors

• Alon Shprung - Initial code

See also the list of contributors who participated in this project.

Contributing

Pull requests are welcome.