react-android-360-video

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} />