Setting initial state

Description

I'm trying to make an Avatar component with Rive. There may be several avatars on the screen at once, each with different outfits. This requires hiding and showing layers via inputs on state machines. The issue with this approach is that there is a "flash of unstyled content". Each avatar is shown for 1 frame in a default state after which the ref is initialized and I can trigger the state machines to instantly show/hide parts to make it look appropriate.

It would be ideal if there was a way to declaratively specify states so that the animation can be loaded in the correct state instead of needing to transition first from a default state.

I can probably work around this by having the root be 0% opacity until I trigger the state update after load but this seems like a sub-optimal solution.

Provide a Repro

//this results in a default state being shown on frame1 after which the "real" state is imperatively set via useEffect
//it would be better if we could specify input states in a declarative way via props so animations can load initialized to correct values
const RiveInstance = observer(function RiveInstance({ num }: { num: number }) {
    const riveRef = React.useRef<RiveRef>(null)

    useEffect(() => {
        if (riveRef.current) {
            riveRef.current.setInputState("ShowHatHeavy", "HatHeavyVariant", (num % 5) + 1)
            riveRef.current.setInputState("ShowShield", "ShieldVariant", (num % 5) + 1)
        }
    }, [num, riveRef.current])

    return (
        <View key={num}>
            <Rive autoplay={false} ref={riveRef} style={{ width: 50, height: 50 }} resourceName={"test_avatar"} />
        </View>
    )
})

const TestRive = observer(function TestRive() {
    return (
        <ScrollView style={{ width: "100%", height: 150 }}>
            {_.range(10).map((i) => (
                <RiveInstance num={i} key={i} />
            ))}
        </ScrollView>
    )
})

Source .riv/.rev file

avatar_test.rev.zip

Start by tracing the Rive component's initialization and ref-based setInputState calls shown in the reproduction, then identify how state-machine inputs are applied during loading. Done means callers can provide initial input values declaratively and the avatar renders in the requested state without showing the default state for a frame.