├── .babelrc ├── .buckconfig ├── .gitignore ├── README.md ├── __tests__ ├── index.android.js └── index.ios.js ├── android ├── .gitignore ├── build.gradle ├── libs │ ├── audio.aar │ ├── base.aar │ ├── common.aar │ ├── commonwidget.aar │ ├── controller.aar │ ├── panowidget.aar │ └── videowidget.aar ├── proguard-rules.pro └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── com │ └── cdslabs │ └── rnvr │ └── reactnativevr │ ├── ReactNativeVrModule.java │ ├── ReactNativeVrPackage.java │ ├── ReactNativeVrView.java │ └── ReactNativeVrViewManager.java ├── example └── usage.js ├── index.js └── package.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } -------------------------------------------------------------------------------- /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | *.iml 28 | .idea 29 | .gradle 30 | local.properties 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | 37 | # BUCK 38 | buck-out/ 39 | \.buckd/ 40 | android/app/libs 41 | *.keystore 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Virtual Reality 2 | 3 | ### Setup 4 | 5 | Install the module using `npm i -S react-native-vr` and link it using 6 | `react-native link react-native-vr`. Also make sure you have the following lines 7 | in your `android/build.gradle`: 8 | 9 | ```gradle 10 | allprojects { 11 | repositories { 12 | ... 13 | // IMPORTANT: Make sure you have the following line 14 | flatDir { dirs "$rootDir/../node_modules/react-native-vr/android/libs" } 15 | } 16 | } 17 | ``` 18 | 19 | ### Usage 20 | 21 | The following example is everything you can do for now. 22 | 23 | ```javascript 24 | import Vr from 'react-native-vr' 25 | 26 | ... 27 | 28 | render() { 29 | return 38 | } 39 | ``` 40 | -------------------------------------------------------------------------------- /__tests__/index.android.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.android.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /__tests__/index.ios.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.ios.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /android/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.library' 2 | 3 | android { 4 | compileSdkVersion 25 5 | buildToolsVersion "25.0.1" 6 | defaultConfig { 7 | minSdkVersion 19 8 | targetSdkVersion 25 9 | versionCode 1 10 | versionName "1.0" 11 | } 12 | } 13 | 14 | repositories { 15 | mavenCentral() 16 | jcenter() 17 | flatDir { 18 | dirs 'libs' 19 | } 20 | } 21 | 22 | dependencies { 23 | compile fileTree(dir: 'libs', include: ['*.jar']) 24 | compile(name: 'audio', ext: 'aar') 25 | compile(name: 'base', ext: 'aar') 26 | compile(name: 'common', ext: 'aar') 27 | compile(name: 'commonwidget', ext: 'aar') 28 | compile(name: 'controller', ext: 'aar') 29 | compile(name: 'panowidget', ext: 'aar') 30 | compile(name: 'videowidget', ext: 'aar') 31 | compile 'com.facebook.react:react-native:+' 32 | compile 'com.google.android.exoplayer:exoplayer:r1.5.10' 33 | compile 'com.google.protobuf.nano:protobuf-javanano:3.0.0-alpha-7' 34 | } -------------------------------------------------------------------------------- /android/libs/audio.aar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bsiddiqui/react-native-vr/8a09de468633b0829b63f6f30992e3f4134c97fe/android/libs/audio.aar -------------------------------------------------------------------------------- /android/libs/base.aar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bsiddiqui/react-native-vr/8a09de468633b0829b63f6f30992e3f4134c97fe/android/libs/base.aar -------------------------------------------------------------------------------- /android/libs/common.aar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bsiddiqui/react-native-vr/8a09de468633b0829b63f6f30992e3f4134c97fe/android/libs/common.aar -------------------------------------------------------------------------------- /android/libs/commonwidget.aar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bsiddiqui/react-native-vr/8a09de468633b0829b63f6f30992e3f4134c97fe/android/libs/commonwidget.aar -------------------------------------------------------------------------------- /android/libs/controller.aar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bsiddiqui/react-native-vr/8a09de468633b0829b63f6f30992e3f4134c97fe/android/libs/controller.aar -------------------------------------------------------------------------------- /android/libs/panowidget.aar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bsiddiqui/react-native-vr/8a09de468633b0829b63f6f30992e3f4134c97fe/android/libs/panowidget.aar -------------------------------------------------------------------------------- /android/libs/videowidget.aar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bsiddiqui/react-native-vr/8a09de468633b0829b63f6f30992e3f4134c97fe/android/libs/videowidget.aar -------------------------------------------------------------------------------- /android/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /Users/alanhoff/.android-sdk/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /android/src/main/java/com/cdslabs/rnvr/reactnativevr/ReactNativeVrModule.java: -------------------------------------------------------------------------------- 1 | package com.cdslabs.rnvr.reactnativevr; 2 | 3 | import android.widget.Toast; 4 | 5 | import com.facebook.react.bridge.ObjectAlreadyConsumedException; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.bridge.ReactContextBaseJavaModule; 8 | import com.facebook.react.bridge.ReactMethod; 9 | 10 | import com.google.vr.sdk.widgets.common.VrWidgetView; 11 | import com.google.vr.sdk.widgets.video.VrVideoView; 12 | 13 | import java.util.HashMap; 14 | import java.util.Map; 15 | 16 | public class ReactNativeVrModule extends ReactContextBaseJavaModule { 17 | 18 | private static final String DURATION_SHORT_KEY = "SHORT"; 19 | private static final String DURATION_LONG_KEY = "LONG"; 20 | private static final String TEST_KEY = "TEST"; 21 | 22 | public ReactNativeVrModule(ReactApplicationContext reactContext) { 23 | super(reactContext); 24 | } 25 | 26 | @Override 27 | public String getName() { 28 | return "RNVrModule"; 29 | } 30 | 31 | @Override 32 | public Map getConstants() { 33 | final Map constants = new HashMap<>(); 34 | final Map displayModes = new HashMap<>(); 35 | final Map types = new HashMap<>(); 36 | final Map formats = new HashMap<>(); 37 | 38 | displayModes.put("EMBEDDED", VrVideoView.DisplayMode.EMBEDDED); 39 | displayModes.put("FULLSCREEN_MONO", VrVideoView.DisplayMode.FULLSCREEN_MONO); 40 | displayModes.put("FULLSCREEN_STEREO", VrVideoView.DisplayMode.FULLSCREEN_STEREO); 41 | 42 | types.put("MONO", VrVideoView.Options.TYPE_MONO); 43 | types.put("STEREO_OVER_UNDER", VrVideoView.Options.TYPE_STEREO_OVER_UNDER); 44 | 45 | formats.put("DEFAULT", VrVideoView.Options.FORMAT_DEFAULT); 46 | formats.put("HLS", VrVideoView.Options.FORMAT_HLS); 47 | 48 | constants.put("DISPLAY_MODE", displayModes); 49 | constants.put("TYPE", types); 50 | constants.put("FORMAT", formats); 51 | 52 | return constants; 53 | } 54 | } -------------------------------------------------------------------------------- /android/src/main/java/com/cdslabs/rnvr/reactnativevr/ReactNativeVrPackage.java: -------------------------------------------------------------------------------- 1 | package com.cdslabs.rnvr.reactnativevr; 2 | 3 | import com.facebook.react.ReactPackage; 4 | import com.facebook.react.bridge.JavaScriptModule; 5 | import com.facebook.react.bridge.NativeModule; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.uimanager.ViewManager; 8 | 9 | import java.util.ArrayList; 10 | import java.util.Arrays; 11 | import java.util.Collections; 12 | import java.util.List; 13 | 14 | public class ReactNativeVrPackage implements ReactPackage { 15 | @Override 16 | public List> createJSModules() { 17 | return Collections.emptyList(); 18 | } 19 | 20 | @Override 21 | public List createViewManagers(ReactApplicationContext reactContext) { 22 | return Arrays.asList( 23 | new ReactNativeVrViewManager() 24 | ); 25 | } 26 | 27 | @Override 28 | public List createNativeModules(ReactApplicationContext reactContext) { 29 | List modules = new ArrayList<>(); 30 | 31 | modules.add(new ReactNativeVrModule(reactContext)); 32 | 33 | return modules; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /android/src/main/java/com/cdslabs/rnvr/reactnativevr/ReactNativeVrView.java: -------------------------------------------------------------------------------- 1 | package com.cdslabs.rnvr.reactnativevr; 2 | 3 | import android.util.Log; 4 | 5 | import com.facebook.react.bridge.Arguments; 6 | import com.facebook.react.bridge.LifecycleEventListener; 7 | import com.facebook.react.bridge.ReactContext; 8 | import com.facebook.react.bridge.WritableMap; 9 | import com.facebook.react.uimanager.events.RCTEventEmitter; 10 | import com.google.vr.sdk.widgets.video.VrVideoEventListener; 11 | import com.google.vr.sdk.widgets.video.VrVideoView; 12 | 13 | public class ReactNativeVrView extends VrVideoView implements LifecycleEventListener { 14 | private final ReactContext context; 15 | 16 | public ReactNativeVrView(ReactContext context) { 17 | super(context.getBaseContext()); 18 | 19 | this.context = context; 20 | this.context.addLifecycleEventListener(this); 21 | } 22 | 23 | @Override 24 | public void onHostResume() { 25 | this.resumeRendering(); 26 | this.playVideo(); 27 | } 28 | 29 | @Override 30 | public void onHostPause() { 31 | this.pauseRendering(); 32 | this.pauseVideo(); 33 | } 34 | 35 | @Override 36 | public void onHostDestroy() { 37 | this.pauseRendering(); 38 | this.shutdown(); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /android/src/main/java/com/cdslabs/rnvr/reactnativevr/ReactNativeVrViewManager.java: -------------------------------------------------------------------------------- 1 | package com.cdslabs.rnvr.reactnativevr; 2 | 3 | import android.net.Uri; 4 | import android.os.AsyncTask; 5 | import android.util.Log; 6 | 7 | import com.facebook.react.bridge.ReadableMap; 8 | import com.facebook.react.uimanager.SimpleViewManager; 9 | import com.facebook.react.uimanager.ThemedReactContext; 10 | import com.facebook.react.uimanager.annotations.ReactProp; 11 | import com.google.vr.sdk.widgets.video.VrVideoView; 12 | import com.google.vr.sdk.widgets.video.VrVideoView.Options; 13 | 14 | public class ReactNativeVrViewManager extends SimpleViewManager { 15 | 16 | public static final String REACT_CLASS = "RCTVrVideoView"; 17 | 18 | @Override 19 | public String getName() { 20 | return REACT_CLASS; 21 | } 22 | 23 | @Override 24 | protected ReactNativeVrView createViewInstance(ThemedReactContext reactContext) { 25 | return new ReactNativeVrView(reactContext); 26 | } 27 | 28 | @ReactProp(name = "src") 29 | public void setSrc(VrVideoView view, ReadableMap src) { 30 | Uri uri = Uri.parse(src.getString("uri")); 31 | VideoLoader loader = new VideoLoader(); 32 | Options options = new Options(); 33 | 34 | options.inputType = src.getInt("type"); 35 | options.inputFormat = src.getInt("format"); 36 | 37 | loader.setUri(uri); 38 | loader.setOptions(options); 39 | loader.setView(view); 40 | 41 | loader.execute(); 42 | } 43 | 44 | @ReactProp(name = "displayMode") 45 | public void setDisplayMode(VrVideoView view, Integer mode) { 46 | view.setDisplayMode(mode); 47 | } 48 | 49 | @ReactProp(name = "paused") 50 | public void setPaused(VrVideoView view, Boolean paused) { 51 | if (paused == true) { 52 | view.pauseVideo(); 53 | } else { 54 | view.playVideo(); 55 | } 56 | } 57 | 58 | private class VideoLoader extends AsyncTask { 59 | private Uri uri = null; 60 | private VrVideoView view = null; 61 | private Options options = null; 62 | 63 | public void setUri(Uri uri) { 64 | this.uri = uri; 65 | } 66 | 67 | public void setView(VrVideoView view) { 68 | this.view = view; 69 | } 70 | 71 | public void setOptions(Options options) { 72 | this.options = options; 73 | } 74 | 75 | protected Boolean doInBackground(Void... _) { 76 | try { 77 | this.view.loadVideo(this.uri, this.options); 78 | } catch (Exception e) { 79 | e.printStackTrace(); 80 | } 81 | 82 | return null; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /example/usage.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react' 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View 13 | } from 'react-native' 14 | import Button from 'react-native-button' 15 | 16 | import Vr from 'react-native-vr' 17 | 18 | export default class example extends Component { 19 | constructor (props) { 20 | super(props) 21 | 22 | this.state = { 23 | paused: false, 24 | displayMode: Vr.constants.DISPLAY_MODE.EMBEDDED 25 | } 26 | } 27 | 28 | render () { 29 | return ( 30 | 31 | 32 | Welcome to React Native! 33 | 34 | 35 | To get started, edit index.android.js 36 | 37 | 38 | Double tap R on your keyboard to reload,{'\n'} 39 | Shake or press menu button for dev menu 40 | 41 | 53 | 54 | 57 | 60 | 61 | 62 | ) 63 | } 64 | } 65 | 66 | const styles = StyleSheet.create({ 67 | container: { 68 | flex: 1, 69 | justifyContent: 'center', 70 | alignItems: 'center', 71 | backgroundColor: '#F5FCFF' 72 | }, 73 | welcome: { 74 | fontSize: 20, 75 | textAlign: 'center', 76 | margin: 10 77 | }, 78 | instructions: { 79 | textAlign: 'center', 80 | color: '#333333', 81 | marginBottom: 5 82 | } 83 | }) 84 | 85 | AppRegistry.registerComponent('example', () => example) 86 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import React, {PropTypes} from 'react' 2 | import {requireNativeComponent, View, NativeModules} from 'react-native' 3 | 4 | class RCTVrVideoView extends React.Component { 5 | static get defaultProps () { 6 | return { 7 | displayMode: NativeModules.RNVrModule.DISPLAY_MODE.EMBEDDED, 8 | paused: false 9 | } 10 | } 11 | 12 | static get propTypes () { 13 | return { 14 | src: PropTypes.shape({ 15 | uri: PropTypes.string.isRequired, 16 | format: PropTypes.oneOf(Object.values(NativeModules.RNVrModule.FORMAT)).isRequired, 17 | type: PropTypes.oneOf(Object.values(NativeModules.RNVrModule.TYPE)).isRequired 18 | }).isRequired, 19 | displayMode: PropTypes.oneOf(Object.values(NativeModules.RNVrModule.DISPLAY_MODE)), 20 | paused: PropTypes.bool, 21 | ...View.propTypes 22 | } 23 | } 24 | } 25 | 26 | const native = requireNativeComponent('RCTVrVideoView', RCTVrVideoView) 27 | native.constants = NativeModules.RNVrModule 28 | 29 | export default native 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-vr", 3 | "version": "0.0.1", 4 | "description": "GoogleVR SDK for React native", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node node_modules/react-native/local-cli/cli.js start", 8 | "test": "jest" 9 | }, 10 | "devDependencies": { 11 | "babel-jest": "17.0.2", 12 | "babel-preset-react-native": "1.9.0", 13 | "jest": "17.0.3", 14 | "jest-react-native": "17.1.0", 15 | "react-test-renderer": "~15.4.0-rc.4", 16 | "standard": "^8.6.0" 17 | }, 18 | "jest": { 19 | "preset": "react-native" 20 | }, 21 | "author": "Estate Team ", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/estate/react-native-vr/issues" 25 | }, 26 | "homepage": "https://github.com/estate/react-native-vr" 27 | } 28 | --------------------------------------------------------------------------------