For my react 360 project, I have the following code in my client.js
file:
import { ReactInstance } from 'react-360-web';
import AsteroidsModule from './AsteroidsModule';
import * as THREE from 'three';
function init(bundle, parent, options = {}) {
const scene = new THREE.Scene();
const r360 = new ReactInstance(bundle, parent, {
// Add custom options here
fullScreen: true,
nativeModules: [
new AsteroidsModule(scene),
],
Problem
***************************************
frame: () => {
AsteroidsModule.printOut('hello');
},
***************************************
...options,
});
........code...
Next, I have the following code in a seperate AsteroidsModule
file. The code is from a presentation on reactvr and has the following contents:
import { Module } from 'react-360-web';
import * as THREE from 'three';
export default class AsteroidsModule extends Module {
constructor(scene) {
// The name of the module in NativeModules
super('AsteroidsModule');
this.scene = scene;
this.time = 0;
this.meshes = [];
}
printOut(string) {
console.log(string);
}
populate() {
....code....
}
render() {
....code......
}
}
React 360 on initialization has a frame:
option that allows me to perform code on every frame render. The code that I want to perform in this case for testing purposes is the AsteroidsModule.printOut('hello')
method call. In the console this leads to the error:
Uncaught TypeError: _AsteroidsModule2.default.printOut is not a function
I don't understand why I'm getting this error. I have imported the needed module on top of the file. I've tried to pick at this apart piece by piece but I don't know why it's not rendering. Could someone assist me with what could be the possible problem?