How to use a ViroReact function in other components?

Question

I'm trying to use viroReact to find an image and then display some media content.

I want to make it so after the anchor is found i can go to a custom react view since it is not possible to display basic react elements in an AR scene with viro.

I have considered calling a function from the app.js class (main class) to get the job done, like so:

<ViroARImageMarker target={"fleur"}
        onAnchorFound={this.mainClass.navigateTowherever}

Will this work? Or is there a better way?

Answer 1

Consider Using ViroFlexView to render the content you need like you would use a normal View like so :

<ViroFlexView style={{flexDirection: 'row', padding: .1}} 
              width={5.0} height={5.0} 
              position={[-5.0, 0.0, -2.0]}
              rotation={[0, 45, 0]} >
  <ViroImage source={require('./res/myImage1.jpg')} style={{flex: .5}} />
  <ViroImage source={require('./res/myImage2.jpg')} style={{flex: .5}}/>
</ViroFlexView>

check the docs for it: https://docs.viromedia.com/docs/viroflexview