facebookarchive / react-360

Create amazing 360 and VR content using React
https://facebook.github.io/react-360
Other
8.73k stars 1.23k forks source link

Promise function does not resolve value #220

Closed Tr4in closed 7 years ago

Tr4in commented 7 years ago

Description

For example: I want to import "TV" from the Native Module PromiseClass into the React Component Product! I decided to use the $promiseFunction(resolve, reject) for that but I get the error that resolve is not a function. How can I fix that error so that everything is working correctly?

Code:

client.js

`// Auto-generated content. import {VRInstance} from 'react-vr-web'; import {Module} from 'react-vr-web'; import * as THREE from 'three';

function init(bundle, parent, options) { var promise = new PromiseClass()

const vr = new VRInstance(bundle, 'VRShop', parent, { // Add custom options here cursorVisibility: 'visible', nativeModules: [promise] }); vr.render = function() { // Any custom behavior you want to perform on each frame goes here

}; // Begin the animation loop vr.start(); return vr; }

class PromiseClass extends Module {

constructor() { super("PromiseClass") }

$promiseFunction(resolve, reject) { resolve("TV") } }

window.ReactVR = {init};`

product.js:

The part where I want to get the value "TV" in the Product component !

async getTV() { try { var output = await NativeModules.PromiseClass.promiseFunction() console.log(output) // SHOULD BE TV } catch(e) { console.log(e); }

}
andrewimm commented 7 years ago

That's because it's actually not a function, it's a unique callback identifier. If you look at our native module implementations (like https://github.com/facebook/react-vr/blob/master/ReactVR/js/Modules/History.js#L49), you need to trigger the callback like rnctx.invokeCallback(resolve, ['TV']), where rnctx is a reference to the internal React Native Context, available at vr.rootView.context. The easiest way to set this is to initialize your module without a context, and then set it on your module once the new VRInstance has been created.

Tr4in commented 7 years ago

Nice now it works ! :D

nbabanov commented 7 years ago

Those things should have proper documentation...

andrewimm commented 7 years ago

@nbabanov there's actually an entire example that demonstrates the various ways to build native modules: https://github.com/facebook/react-vr/blob/master/Examples/NativeModules/vr/BrowserInfo.js

And as always, a reminder that this repo is open source. If you feel that something should be better documented, feel free to submit a PR.