React Native viro react VR SkyBox is not working

Question

I am developing a VR application using ViroReact, https://viromedia.com/viroreact. But I am having problem with using SkyBox (Cubemap) VR scene. Everything is working fine when I used Viro360Image view.

This is my VR scene using Viro360Image view

export default class HotelRoomVRScene extends Component {
    constructor() {
        super();
        this.state = {} // Set initial state here
    }

    render() {
      return (
        <ViroScene>
          <Viro360Image source={require('./res/hotel-room.jpg')} />
        </ViroScene>
      )
    }
}


module.exports = HotelRoomVRScene;

The above scene is working fine. I can view the VR experience in the VR headset as well. But when I changed it to the Skybox version as below. It stopped working.

export default class HotelRoomVRScene extends Component {
    constructor() {
        super();
        this.state = {} // Set initial state here
    }

    render() {
      return (
        <ViroScene>
          <ViroSkybox source={{nx: require('./res/px.jpg'),
                       px: require('./res/px.jpg'),
                       ny: require('./res/px.jpg'),
                       py: require('./res/px.jpg'),
                       nz: require('./res/px.jpg'),
                       pz: require('./res/px.jpg')}} />
        </ViroScene>
      )
    }
}

module.exports = HotelRoomVRScene;

The above code is throwing the following error.

So why is the Skybox version not working?

Answer 1

On your render method:

render() {
  return (
    <ViroScene>
      <ViroSkybox source={{nx: require('./res/px.jpg'),
                   px: require('./res/px.jpg'),
                   ny: require('./res/px.jpg'),
                   py: require('./res/px.jpg'),
                   nz: require('./res/px.jpg'),
                   pz: require('./res/px.jpg')}} />
    </ViroScene>
  )
}

you have a typo for the skybox, its instead of

referring to: https://docs.viromedia.com/docs/viroskybox1

and also you are exporting the same class two times, one in:

export default class HotelRoomVRScene extends Component {

the other one in :

module.exports = HotelRoomVRScene;

I suggest you remove the latter one.