Need help in React Native
Hi, I've been working with an engineer on implementing an interactive animation. We're both struggling to understand how get a .riv file to reflect the correct inputs from its state machine in React Native. One version of the file that only had an idle + interact animation with a trigger + listener and it worked fine on their end. They only had to reference it, set up the const and call out the artboard name. I sent them another version of that same file that had the same inputs + listeners but there was a hover animation added with a boolean and two additional listeners to define the hover as true/false. They did the same set up as the first one with referencing it, setting up const and artboard name. That file they had trouble getting the interactions to follow the same order as the state machine is indicating. For example the hover animation in the other file would only play after the interact animation. Is anyone able to help me understand whats happening?
Are the new inputs part of a nested artboard? If so, the process is a little different: https://rive.app/community/doc/state-machines/docxeznG7iiK#nested-inputs
If that doesn't help, can you post a .rev and a code sample so I can take a closer look?
Here are the .revs and sample code. We've been testing other .rivs which are in there but I grayed out everything that doesn't have have to do with the one I'm talking about, which is 'igloo'. What you see in the sample code is what they used to get 'igloo' working. Currently I don't have code for 'igloo2' but what I know is that the only difference is they called out the artboard name. There are no nested artboards being used.
https://www.dropbox.com/scl/fo/ahss1nhr7g9nyr6ml53ic/AG6QdQ-Lku2zZzeQ_h26L9c?rlkey=5jk1buysdo33djgb2ojmqdd7a&st=s4ijxqrj&dl=0
The engineer can get the .riv file that only has the click input + listeners working correctly. It's the one with the hover added in that isn't firing the correct order of animations on their end. Would any of that have to do with the way the state machine is laid out on my end?
We have figured out a way to work around the hover problem! But now I want to understand how they would be able to pass information of a boolean input through their end via code. Is it as simple as telling them that a boolean input is defined as true/false? For example, I have two different sequences that would play when the state machine starts depending on if the boolean is true/false.
Yep, that's right. In the React Native code, it'll look something like this:
Here are the docs: https://rive.app/community/doc/state-machines/docxeznG7iiK