onAnchorFound not triggered in ViroARImageMarked, only in Scene (parent)

[kimvdmeulen]

Environment:

Development OS: Mac
Android Version 11, API Level 30

Versions:
"@viro-community/react-viro": "^2.20.2",
"react": "17.0.2",
"react-native": "0.66.3",

Issue on OnePlus 7 Pro, OnePlus 6T and Samsung A70

Description

The onAnchorFound function is not triggered when placed in the ViroARImageMarker like this:

but it is only triggered when placed in the ViroARScene like this:

causing the body of the ViroARImageMarker not to be rendered when the anchor is found. I would like to render the child components of the ViroARImageMarker when the target is found (as displayed in the ViroReact demos).

Reproducible Demo

import React, { useEffect, useState } from 'react';

const {
  ViroARScene,
  ViroARImageMarker,
  ViroARTrackingTargets,
  ViroAnimations,
  ViroOmniLight,
  ViroNode,
  ViroVideo,
  ViroMaterials,
  ViroSpotLight,
  ViroQuad
} = require('@viro-community/react-viro');


const NewViroTracker = () => {
  const videoPath = require('@assets/videos/wham.mp4');
  const [videoAnimationName] = useState('showVideo');
  const [playAnim, setPlayAnim] = useState(false);
  const [pauseUpdates, setPauseUpdates] = useState(false);


function _onAnchorFound() {
  console.log('Anchor :')
 setPauseUpdates(true);
 setPlayAnim(true);
}

function _onLoadStart(){
    alert('Image recognisition process started')
}

    return (
      <ViroARScene >
        <ViroARImageMarker
            target={"inviteCard"}
            onAnchorFound={_onAnchorFound} 
            pauseUpdates={pauseUpdates}>

            <ViroNode
                animation={{ name: 'showVideo', run: playAnim }}>
                   <ViroVideo
          dragType="FixedToPlane"
          animation={{
            name: videoAnimationName,
            run: playAnim,
          }}
          source={videoPath}
          materials={['chromaKeyFilteredVideo']}
          position={[0, 0, -5]}
          scale={[2, 2, 1]}
          onLoadStart={_onLoadStart}
        />
               
            </ViroNode>

            <ViroOmniLight
                intensity={300}
                position={[-10, 10, 1]}
                color={"#FFFFFF"}
                attenuationStartDistance={20}
                attenuationEndDistance={30} />

            <ViroOmniLight
                intensity={300}
                position={[10, 10, 1]}
                color={"#FFFFFF"}
                attenuationStartDistance={20}
                attenuationEndDistance={30} />

            <ViroOmniLight
                intensity={300}
                position={[-10, -10, 1]}
                color={"#FFFFFF"}
                attenuationStartDistance={20}
                attenuationEndDistance={30} />

            <ViroOmniLight
                intensity={300}
                position={[10, -10, 1]}
                color={"#FFFFFF"}
                attenuationStartDistance={20}
                attenuationEndDistance={30} />

            <ViroSpotLight
                position={[0, 8, -2]}
                color="#ffffff"
                direction={[0, -1, 0]}
                intensity={50}
                attenuationStartDistance={5}
                attenuationEndDistance={10}
                innerAngle={5}
                outerAngle={20}
                castsShadow={true}
            />
            <ViroQuad
                rotation={[-90, 0, 0]}
                position={[0, -1.6, 0]}
                width={5} height={5}
                arShadowReceiver={true}
            />
        </ViroARImageMarker>
        </ViroARScene>
    );
}


ViroARTrackingTargets.createTargets({
  inviteCard: {
    source: require('@assets/images/invite-card.png'),
    orientation: 'Up',
    physicalWidth: 0.12 // real world width in meters
  }
});

ViroMaterials.createMaterials({
  chromaKeyFilteredVideo: {
    chromaKeyFilteringColor: '#00FF00'
  }
});


ViroAnimations.registerAnimations({
  showVideo: {
    properties: { scaleX: 1, scaleY: 1, scaleZ: 1 },
    duration: 1000
  },
  closeVideo: {
    properties: { scaleX: 0, scaleY: 0, scaleZ: 0 },
    duration: 1
  }
});

export default NewViroTracker;

App.tsx:

const { ViroARSceneNavigator } = require('@viro-community/react-viro');
import styled from 'styled-components/native';
import NewViroTracker from 'components/NewViroTracker';

const App = () => {
  return (
    <ViroWrapper
      autofocus={true}
      initialScene={{
        scene: NewViroTracker
      }}
    />
  );
};

export default App;

const ViroWrapper = styled(ViroARSceneNavigator)`
  flex: 1;
`;