React-360: Installing react-vr into an existing react-native project

Created on 13 May 2017 · 3Comments · Source: facebookarchive/react-360

Description

Hi -

I have an existing react-native project and I would like to create a feature for it using react-vr. Knowing that react-vr is built upon react-native I was hoping it would be relatively easy to install some packages and run the app. All of the examples set ReactVR as a global on the window object then use document.body in ReactVR.init() on the index.html file.

The init file create a new VRInstance() and the params for it are DOM dependent. I am really struggling here to determine how to use react-vr with an existing react-native project.

Expected behavior

I would expect that I can install the react-vr dependencies "react-vr": "^1.1.0", "three": "^0.80.1" "ovrui": "~1.0.0" into an existing react-native application and create a VR component to be used other places within my app. I have done this with just react and aframe.io for a web app.

import React, {Component} from 'react'
import {Text, View} from 'react-vr'

export default class VrViewer extends Component {
  render () {
    return (
      <View>
        <Text>hello</Text>
      </View>
    )
  }
}

Actual behavior

I get an error about react-vr not being able to resolve View. I expect this has to do with the bootstrapping process that occurs in client.js. That process seems very specific for web as its using react-vr-web, window, and document.body.

Is there a way to put react vr features into an existing react-native app?

Thanks for all the hard work on this :)

Jordan

Source

jordanpapaleo

Most helpful comment

React VR is built on React Native only in that it represents a new runtime environment, "vr, similar to the built-in "android" and "ios" environments. The runtime determines how to interpret things like View and Text, which are abstract concept as far as React is concerned, and turn them into actual pixels on your screen.
While you can share React code using these abstractions between platforms, you wouldn't be able to run an android runtime inside of an ios app. Similarly, you can't expect to run the vr runtime inside a React Native application. At this time, doing so is not supported, since the only runtime we have released is targeting the web browser.

In the future, we hope to be able to release other compatible runtimes that will allow you to embed React VR experiences into native apps, regardless of whether they are built on React Native or not. However, these things are currently experimental and not ready for public consumption.
Sorry for any confusion! In the meantime, I hope you'll explore building React VR applications that target users' web browsers.