Difficulty binding to a view model

[leemhenson]

(I'm cross posting this from the Rive community forum as I suspect there's not too much nitro usage yet)

I’m having trouble getting the new Nitro-based react native library to data bind to my view model. My rive file has multiple artboards, the one I’m rendering for my animation is called: “XP Level up” and it’s bound to a ViewModel called “LevelUpViewModel”:

This view model has a few properties, a trigger, and also a nested view model:

I’m trying to set some initial values for these props but it’s not having any effect. I’m doing this:

const { riveFile } = useRiveFile(require(filePath));
const { riveViewRef, setHybridRef } = useRive();

function onVmiInit(vmi: ViewModelInstance) {
    console.log({
      name: [vmi.name](http://vmi.name/),
      instanceName: vmi.instanceName,
    });

    vmi.stringProperty(“levelAfter”)!.value = String(level + 1);
    vmi.stringProperty(“levelBefore”)!.value = String(level);
}

const vmi = useViewModelInstance(riveFile, {
  name: "LevelUpViewModel",
  onInit: onVmiInit,
});

const { trigger: transition } = useRiveTrigger(“transition,” vmi);

// …

return (
  <RiveView 
    artboardName="XP Level up"
    autoPlay
    file={riveFile}
    fit={Fit.Cover}
    hybridRef={setHybridRef}
    style={style}
  />
);

When I view my console I can see the log message from onInit which is showing:

{"instanceName": "Instance", "name": "ViewModelInstance"}

I was expecting the name to be “LevelUpViewModel” but perhaps I’m misunderstanding what that “name” refers to.

Can you give me any pointers about how to correctly access the right view model instance?

Thanks!

[mfazekas]

const vmi = useViewModelInstance(riveFile, {
  name: "LevelUpViewModel",
  onInit: onVmiInit,
});

Sorry this seems to be a bug with the useViewModelInstance when you pass in a riveFile the name options is not used. It'll just do defaultArtboardViewModel().createDefaultInstance()

[leemhenson]

If I understand it correctly, the default artboard is the artboard attached to the default state machine. Our file has multiple state machines and multiple artboards, so using defaultArtboardViewModel() will always do "the wrong thing" for n - 1 of our n artboards. Is it possible to add an additional optional artboard prop like this:

const vmi = useViewModelInstance(riveFile, {
  artboard: "XP Level up",
  name: "LevelUpViewModel",
  onInit: onVmiInit,
});

[leemhenson]

@mfazekas I've tried v0.2.1, but it doesn't seem to change the outcome. I've tried:

const vmi = useViewModelInstance(riveFile, {
  artboardName: "XP Level up",
  instanceName: "Instance",
  onInit: onVmiInit,
});

const vmi = useViewModelInstance(riveFile, {
  viewModelName: "LevelUpViewModel",
  instanceName: "Instance",
  onInit: onVmiInit,
});

in either case, inside onInit the argument passed contains:

{"instanceName": "Instance", "name": "ViewModelInstance"}

which seems to be the wrong view model name.

But, if i try to get the instance by index via manually interacting with the riveFile:

    const vm = riveFile.viewModelByName("LevelUpViewModel");

    console.log({
      modelName: vm?.modelName,
      instanceCount: vm?.instanceCount,
      instanceName: vm?.createInstanceByIndex(0)?.instanceName,
    });

I get this which looks correct:

{"instanceCount": 1, "instanceName": "Instance", "modelName": "LevelUpViewModel"}

So why doesn't:

const vmi = useViewModelInstance(riveFile, {
  viewModelName: "LevelUpViewModel",
  instanceName: "Instance",
  onInit: onVmiInit,
});

work?

[mfazekas]

@leemhenson

So here

const vmi = useViewModelInstance(riveFile, {
  viewModelName: "LevelUpViewModel",
  instanceName: "Instance",
  onInit: onVmiInit,
});

{"instanceName": "Instance", "name": "ViewModelInstance"}

which seems to be the wrong view model name.

Note that name in this case is the HybridObject's name so it's expected to be ViewModelInstance for every instance . I understand this is confusing, as we have useViewModelInstance(riveFile, {name: ...}).

As a good way to verify that you're seeing the correct instance is reading a property that identifies the instance.

 onInit: (vmi) => {
    const id = vmi.stringProperty("_id");                                                                       
    console.log(id);
 }

In my testing things were working fine. Let me know if you don't agree and I'll include the .riv file and the code I've tested with.