├── .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 |
--------------------------------------------------------------------------------