Issue with using react components with react viro

[markfrance]

I am trying to create a basic AR app by editing the hello world app and adding 2D UI components using react native.

The basic demo uses: _getARNavigator() { return ( <ViroARSceneNavigator {...this.state.sharedProps} initialScene={{scene: InitialARScene}} /> ); } Which works fine, however once I start to add react components, AR disappears and just shows a blank screen. Here I basically just wrapped it in a view and added a simple image. The image is shown, but the camera or AR features aren't:

_getARNavigator() {
    return (
      <View style={localStyles.outer} >
        <ViroARSceneNavigator {...this.state.sharedProps}
        initialScene={{scene: InitialARScene}}  />

<Image source={require("./public/images/test.png")} style={{width: 50, height: 50}}/>

      </View>
    );
  }

Am I doing anything wrong, or is this a bug?

[dam00n]

Try this..

<View style={localStyles.outer} >
      <ViroARSceneNavigator {...this.state.sharedProps}
      initialScene={{scene: InitialARScene}}  />
        <View style={{position: 'absolute',  left: 0, right: 0, bottom: 77, alignItems: 'center'}}>
          <Image source={require("./public/images/test.png")} style={{width: 50, height: 50}}/>
        </View>
      </View>

And change the outer style to:

outer : { flex : 1,
},