constructor(props) {
   super(props);

   this.state = {
    initialized: false,
    arVisible: true,
  };

  this._onInitialized = this._onInitialized.bind(this);
}

onBack = () => {
  this.setState({
    arVisible: false,
  }, () => {
    this.props.navigation.goBack();
  });
}

_onInitialized(state, reason) {
  if (state === ViroConstants.TRACKING_NORMAL || state === ViroConstants.TRACKING_LIMITED) {
    if (!this.state.initialized) {
      this.setState({
        initialized: true,
      });
    }
  }
}

_renderARScene = () => {
  const {initialized, position} = this.state;

  return (
    <ViroARScene onTrackingUpdated={this._onInitialized}>
      {initialized && position !== undefined && (
        <ViroButton
          source={{
            uri: this.state.nearTreasure.getARThumb(),
          }}
          position={position}
          height={2}
          width={2}
          scale={[1, 1, 1]}
          transformBehaviors={['billboard']}
          onClickState={(state) => {
            if (state === 3) {
              this.onClickTreasure();
            }
          }}
          onClick={this.onClickTreasure}
        />
      )}
    </ViroARScene>
  );
}

render() {
  const {nearTreasure, arVisible} = this.state;

  return (
    <View style={styles.container}>
      <SafeAreaView style={{backgroundColor: 'white'}}>
        <View style={styles.statusBar}>
          <StatusBar backgroundColor="white" translucent barStyle="dark-content" />
        </View>
        <View style={{height: NAVIGATION_BAR_HEIGHT, alignItems: 'center', flexDirection: 'row', paddingHorizontal: 11}}>
          {...}
        </View>
      </SafeAreaView>
      {arVisible && (
        <ViroARSceneNavigator
          style={{flex: 1}}
          worldAlignment="GravityAndHeading"
          initialScene={{
            scene: this._renderARScene,
          }}
        />
      )}
      <SafeAreaView style={{position: 'absolute', bottom: 0, left: 0, right: 0, paddingVertical: 14}}>
        <View style={{paddingHorizontal: 14, marginHorizontal: 14, paddingBottom: 32, paddingTop: 18, alignItems: 'center'}}>
          {...}
        </View>
      </SafeAreaView>
    </View>
  );
}