Discussions

Hello community, I am having trouble when using dynamically generated scenes.

So in my project I generate ViroARScenes dynamically, i.e. I request some configuration JSON from an external API that defines how my scene should look like. For example, my Scene component would look something like:

function parseComponents(config) {
  // Returns a list of AR objects.
  // In my case, for example, a list of ViroARImageMarkers.
  return [];
}

function Scene({config}) {
  const arComponents = parseComponents(config);
  return (
    <ViroARScene>
      {arComponents}
    </ViroARScene>
  );
}

function ARViewer({globalAppState}) {
  return <ViroARSceneNavigator 
        initialScene={{scene: Scene}} 
        viroAppProps={{globalAppState}}
      />
}

This initially works perfectly fine, the trackers are set and the objects are displayed correctly. The problem arises when I want to replace this scene with a new one.

Lets say one of this AR objects has defined an onClick event function in which I change some state which leads to a new configuration to be passed on to my Scene. I would want this action to replace the current scene configuration with the new one, for example, replace the current ViroARImageMarkers with different ones. Clearing the objects that were rendered before. Like changing scenes, except here I don't have 2 distinct scene components because they are generated dynamically.

To attempt this, I am doing something like the following:

    <ViroARImageMarker 
      target={"target"}
    >
      <ViroAmbientLight color="#ffffff"/>
      <Viro3DObject onClick={onClick} {...modelProps} />
    </ViroARImageMarker>

where:

function onClick() {
  ...
  setGlobalAppState(newGlobalAppState);
  navigator.replace({scene: Scene});  // Yes, the same Scene component.
}

Did anyone ever work with scenes that had to be generated dynamically? Does anyone have any suggestions or alternatives on how to model this type of functionality? Thanks in advance.