JSPM – react-android-360-video@0.0.6

Package Exports

react-android-360-video

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-android-360-video) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-android-360-video

A React Native wrapper for Google VrVideoView (for android) for playing 360 video

Supports Android API 19+

Add it to your project via npm

Run npm install react-android-360-video

Android

Make the following additions to the given files manually:

android/settings.gradle

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

android/app/build.gradle

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

MainActivity.java

On top, where imports are:

import android.app.Activity;
import android.util.Log;
import android.os.Bundle;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.bridge.LifecycleEventListener;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.react.common.LifecycleState;

import com.vrvideocomponent.VrVideoViewPackage; // // VrVideoViewPackage component

Add the VrVideoViewPackage react-native android module like below:

@Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    ReactRootView mReactRootView = new ReactRootView(this);

    ReactInstanceManager mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new VrVideoViewPackage(this)) //<----------  VrVideoViewPackage component          
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    /* replace VrVideoComponent by your root react component name */
    mReactRootView.startReactApplication(mReactInstanceManager, "VrVideoComponent", null);

    setContentView(mReactRootView);
  }

Usage

Import VrVideoComponent module in js file,

import VrVideoComponent from 'react-android-360-video';

<VrVideoComponent
  style={{height:300,width:300,backgroundColor:'#000000'}}
  video={{ uri:'https://d2v9y0dukr6mq2.cloudfront.net/video/preview/eG7t61g/underwater-coral-reef-360-vr_S94kBUa0__WM.mp4',
           type: 'stereo'}}
  displayMode={'fullscreen'}
  volume={1.0}
  enableFullscreenButton={true}
  enableCardboardButton={true}
  enableTouchTracking={true}
  hidesTransitionView={false}
  enableInfoButton={true} />