Preloading local rive assets

kgni commented 3 months ago

Hi there!

Has anyone implemented local rive assets preloading? I'm facing an issue where the rive asset is not loaded and cached until it has been ran one time, which causes a minor glitch (see video).

Essentially I just want to preload/cache the rive assets when the app starts - or for more granularity when the user visits a specific route.

I'm using Expo with the expo-custom-assets plugin to load the rive assets.

Sorry if this has already been asked/answered, I couldn't find anything when looking through the issues.

https://github.com/user-attachments/assets/345ffce6-fe91-4fda-ac36-47d4eb3095ab

kgni commented 3 months ago

The rive animation is supposed to fade in, but since it is not completely loaded before the animation starts playing, it just appears instantly.

MikeDevBeddo commented 1 month ago

I found workaround, for preloading asset for Rive I make a mount at App.tsx level of the desired animation for some seconds (In my case I remove the animation when bootsplash closes). If you've found a more elegant way to solve this problem, I'd be happy to see it here)

<>
  <Router />
  {
    /* Workaround to preload Rive source file */
    riveShown && (
      <>
        <Rive
          fit={Fit.Fill}
          resourceName="your_asset"
          style={Styles.flatten([
            StyleSheet.absoluteFillObject,
            {
              left: 10000,
              right: -10000,
              zIndex: -1,
            },
          ])}
        />
      </>
    )
  }
</>

rive-app / rive-react-native

Preloading local rive assets #260