React-360: this.setState doesn't re-render when using <Scene>

[emroot]

Description

When using setState and a ternary condition inside render, the component inside the ternary condition is not displayed.

Expected behavior

On setState the component inside a ternary condition should be displayed.

Actual behavior

The component inside a ternary condition does not show up.

Logs

---

Reproduction

import React, { Component, PropTypes } from 'react';
import { asset, Pano, Scene, VrButton, View, StyleSheet, Text } from 'react-vr';

class TestScene extends Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: false,
    };
  }
  render() {
    console.log(this.state.visible);
    return (
      <Scene>
        <Pano source={asset('Sky_03.png')} />
        <VrButton
          onEnter={() => this.setState({ visible: true })}
          style={styles.button}
        >
          <Text>HOVER ME</Text>
        </VrButton>
        {this.state.visible && <Text style={styles.text}>YOLO</Text>}
      </Scene>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    width: 1,
    height: 1,
    backgroundColor: 'yellow',
    transform: [{
      translate: [-0.5, 1, -12]
    }]
  },
  text: {
    transform: [{
      translate: [-0.5, 1, -12]
    }],
    fontSize: 1,
  },
});

export default TestScene;

Solution

??

Additional Information

• react-vr package version: [0.2.0]
• react-vr-web package version: [0.2.0]
• Operating System: [Windows, Mac]
• Graphics Card: [FILL THIS OUT: NVIDA, ATI, Intel? Which Driver?]
• Browser: [Chrome, Chromium]
• VR Device: [Web browser, Rift headset]

[emroot]

cc: @mikearmstrong001

[amberroy]

this syntax works, the problem here seems to be when using <Scene> the state is not passed to the child. Replace <Scene> with <View> and it should behave as expected.

The Scene component is not needed in most situations, only for special cases like translating the camera.

[mikearmstrong001]

Scene purposefully has a static container which prevents changes to the scene (which can control the camera) propagating up the tree. The premise is that everytime you change the camera you do not want to re-render the whole hierarchy.

I'd recommend using the <View> as @amberroy mentions

[emroot]

Awesome! Thanks.

[steverob]

@mikearmstrong001 so If I need to transform the camera, do I simply wrap the View inside a top level Scene or should we just add a standable Scene element inside the View?

[thisbejim]

On the same lines as @stevemao, how can you change the state of the app while also having control of the camera? For example you cannot use the teleport outlined in this issue if you also want to maintain state.

NVM: Just compose your stateful components within the scene, e.g.

<Scene>
  <ComponentWithState />
</Scene>