Changing between ViroARImageMarker

[leandro2219]

Environment:

1. Development OS: Windows,
2. Device OS & Version: Android (8.0 and 11.0)
3. Version: "@viro-community/react-viro": "^2.20.2", "react": "17.0.2", "react-native": "0.65.1"
4. Device(s): Nexus 6P and Motorola Edge30

Description Hi, We are creating an App which people can use it on our magazine, pointing to some areas and hearing some sound, viewing videos and viewing 3dObject. My problem is when I point to the first ViroARImageMarker I can see the video, then I point to the second ViroARImageMarker and I can see a 3dObject + Sound and the video disappears (this is perfect), but when I tried to go back to the video I can't see it, I have to move my cell phone from the magazine from a while and then point again to see the video again (and sometimes does not work). Same problem if I start with the sound and go to the video.

Next is a example code to reproduce it (is not the same but the problem is)

Thanks.

Reproducible Demo ` import React, {useState} from 'react'; import {ViroARScene, ViroARSceneNavigator, Viro3DObject, ViroAmbientLight, ViroARTrackingTargets, ViroARImageMarker, ViroVideo, ViroNode, ViroSound, ViroImage} from '@viro-community/react-viro';

const MagazineSceneAR = () => { const [actualModal, setActualModal] = useState(null); const [initSound, setInitSound] = useState(true); const [pauseUpdates, setPauseUpdates] = useState(false);

ViroARTrackingTargets.createTargets({ sn1 : { source : {uri : 'https://www.revistalagunas.com/app/assets/1/tapa/tapa-1.jpg'}, orientation : 'Up', physicalWidth : 0.21 }, vd1 : { source : {uri : 'https://www.revistalagunas.com/app/assets/1/portada/portada.jpg'}, orientation : 'Up', physicalWidth : 0.1224 } })

function onInitialized(state, reason) {}

function _onAnchorFound(objId) { console.log(objId, actualModal); if (actualModal !== objId) { console.log('Changing to ' + objId); setActualModal(objId); setPauseUpdates(false); } }

function _startLoadingImg(){ setInitSound(true); }

function _endLoadingImg(){ setInitSound(false); setPauseUpdates(true); }

return ( <ViroARScene onTrackingUpdated={onInitialized}> <ViroAmbientLight color="#ffffff" /> <ViroARImageMarker target={'sn1'} key={"targ-sn1"} onAnchorFound={(e) => _onAnchorFound('sn1')} pauseUpdates={pauseUpdates}> {actualModal == 'sn1' ? <ViroNode> <ViroSound source={{uri : 'https://www.revistalagunas.com/app/assets/1/tapa/sonido.wav'}} paused={initSound} />

          <Viro3DObject
              source={require('./src/joe/Joe.vrx')}
              resources={[
                      require('./src/joe/50b772da-ec7a-4070-9245-22985d6d1ee9_image.png'),
                      require('./src/joe/6866fa54-c546-43c8-a98d-e61f5e545a5a_image.png')]}
              type="VRX"
              scale={[0.00001, 0.00001, 0.00001]}
              rotation={[90, 0, 0]}
              onLoadStart={() => _startLoadingImg('sn1')}
              onLoadEnd={() => _endLoadingImg('sn1')}
          />              
      </ViroNode>
  : null}
  </ViroARImageMarker >

  <ViroARImageMarker target={'vd1'} key={"targ-vd1"} onAnchorFound={(e) => _onAnchorFound('vd1')} pauseUpdates={pauseUpdates}>
    {actualModal == 'vd1' ? 
        <ViroNode>
            <ViroVideo 
                source={{uri : 'https://www.revistalagunas.com/app/assets/1/portada/portada.mp4'}} 
                loop={true} 
                scale={[0.4,0.4,0.4]}
                rotation={[-50, 0, 0]}
                width={0.406}
                height={0.720}
            />
        </ViroNode>
    : null}
</ViroARImageMarker >
</ViroARScene>

); };

export default () => { return ( <ViroARSceneNavigator autofocus={true} initialScene={{ scene: MagazineSceneAR, }} style={{flex: 1}} /> ); }; `