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:
// // VrVideoViewPackage component
Add the VrVideoViewPackage
react-native android module like below:
@Override protected void { super.; ReactRootView mReactRootView = new ReactRootView(this); ReactInstanceManager mReactInstanceManager = ReactInstanceManager. . . . . . //<---------- VrVideoViewPackage component . . .; /* replace VrVideoComponent by your root react component name */ mReactRootView.; ; }
Usage
Import VrVideoComponent module in js file,
;
<VrVideoComponent style=height:300width:300backgroundColor:'#000000' video= uri:'https://d2v9y0dukr6mq2.cloudfront.net/video/preview/eG7t61g/underwater-coral-reef-360-vr_S94kBUa0__WM.mp4' type: 'stereo' displayMode='fullscreen' volume=10 enableFullscreenButton=true enableCardboardButton=true enableTouchTracking=true hidesTransitionView=false enableInfoButton=true />