rive-react-native icon indicating copy to clipboard operation
rive-react-native copied to clipboard

[Feature Request] onLoad callback

Open ridwansameer opened this issue 2 years ago • 9 comments

Description

I've noted the web version has an onLoad callback when loading files over the URL. I dug through the code and I think this may not be even exposed from native iOS/Android level?

Would be great for us to have this functionality so we could show some sort of loaders while waiting for the Rive animation to be loaded. If this can be done on the native side I would be happy to write the bindings on React native's JS layer :)

Provide a Repro

N/A

Expected behavior

Have an onLoad Callback

ridwansameer avatar Dec 20 '23 07:12 ridwansameer

I agree, I'm implementing animations with state, and it's quite complicated to find a way to understand the right time to set the initial state

For the moment this is the workaround but it seems very complicated to maintain

const BlobAnimation = () => {
  const [mood, setMood] = useState(-2);
  const [riveRef, setRiveRef] = useState<RiveRef | null>(null);

  useEffect(() => {
    if (!riveRef) return;

    setTimeout(() => {
      riveRef.setInputState(blobStateMachineName, 'mood', mood);
    }, 300);
  }, [mood, riveRef]);

  return (
    <>
      <Rive
        ref={setRiveRef}
        autoplay
        url={blobUrl}
        stateMachineName={blobStateMachineName}
        style={{ width: 200, height: 200 }}
      />
      <Button onPress={() => setMood((value) => value + 1)} label="mood + 1" />
    </>
  );
};

cosimochellini avatar Feb 09 '24 11:02 cosimochellini