[Feature] Support loading Rive animations from Expo Assets

[nderscore]

This is a follow-up to #123 and #185 - please refer to these issues for additional context.

---

Description

This issue seeks to add support for Expo Assets to the React Native Rive integration.

Expo Assets enables developers to load custom assets asynchronously without needing to explicitly bundle them into the native app code. This enables features like hot-reloading during local development, as well as the ability to deploy updates through EAS update

Without this, there is a lot of friction that discourages the use of Rive on an Expo project:

• During local development, you can't hot-reload Rive animations. You need to do a full build of your custom dev client.

• After deployment, it is not possible to update the Rive animations embedded in the app without a new native build being published to the app store. There is no way to update the animations over EAS Update.

Current behavior

On iOS, it is already possible to use Expo Assets using the instructions found in the initial issue (#123)

On Android, this does not work. The Rive adaptor chokes when it receives a file:// URL.

Expected behavior

I can pass in a file:// URL from Expo Asset into the Rive adapter for React Native, and it works on all platforms.

[kevin-ashton]

We are considering using Rive in our Expo app. Our current two options are

a) Download the rive assets with urls, which isn't a great user experience especially on startup.
b) Do a new dev build every time we update something (5-6 minutes), which is not a great developer experience.

Neither option seems that great.

This feature seems critical if you are going to get any wider adoption in react-native.

[D1no]

Glad I found this issue. Thank you. Will be sticking with Lottie

[tslater]

I finally have a solution. Hope this makes its way into Rive eventually...but it requires 2 steps:

1. edit your metro config so that it knows to bundle *.riv files:

config.resolver["assetExts"] = [
  ...(config.resolver.assetExts || []),
  // for rive animations
  "riv",
];

2. Write a wrapper around the default Rive component in order to convert the required asset:

import React, { forwardRef } from 'react';
import Rive, { RiveRef } from "rive-react-native";
// @ts-ignore
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

type RiveComponentProps = Omit<React.ComponentProps<typeof Rive>, 'url' | 'resourceName'> & {
  source: any
}

// detects if it is an http or file url
const stringIsUrl = (uri: string) => {
  return uri.startsWith('http') || uri.startsWith('file');
}

export const RiveAnimation = forwardRef<RiveRef, RiveComponentProps>(
  (props, ref) => {

    const { source, ...riveProps } = props;
    const resolved = resolveAssetSource(source);
    const uriIsUrl = stringIsUrl(resolved.uri);

    return (
      <Rive
        ref={ref}
        {...riveProps}
        resourceName={!uriIsUrl ? resolved.uri : undefined}
        url={uriIsUrl ? resolved.uri : undefined}
      />
    );
  }
);

This works just like images in expo and react-native. In development, the file is served by metro, so it's super fast and dynamic to change images. In production, the asset is bundled and the appropriate local uri is handled for you. It just works. I just tested in both environments and it works great. SOOOO much better than every other solution I've seen here on github.

*note that this is edited. The original code was missing the resourceName prop for bundled Android apps and was only working in dev mode

[anatoleblanc]

Hey @tslater

Thanks a lot for the code snippet!
We implemented the same and it works great on IOS. On Android though it only works in development mode ; not in production. Does this work for you?

[guval-gh]

Thanks @tslater for the code 👍

It's seems code crash when I used an external URL in the source property of <RiveAnimation />.

This version works for me on iOS (simu) and Android (emu):

import React, { forwardRef, useMemo } from "react";
import Rive, { RiveRef } from "rive-react-native";
// @ts-ignore
import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";

type RiveComponentProps = Omit<
  React.ComponentProps<typeof Rive>,
  "url" | "resourceName"
> & {
  source: string | number;
};

const isValidUrl = (uri: string | undefined): boolean => {
  if (!uri) return false;
  return uri.startsWith("http") || uri.startsWith("file");
};

export const RiveAnimation = forwardRef<RiveRef, RiveComponentProps>(
  (props, ref) => {
    const { source, ...riveProps } = props;

    const riveConfig = useMemo(() => {
      if (typeof source === "string" && isValidUrl(source)) {
        return { url: source };
      }

      const resolved = resolveAssetSource(source);
      const uri = resolved?.uri;
      const isUrl = isValidUrl(uri);

      return {
        resourceName: !isUrl && uri ? uri : undefined,
        url: isUrl ? uri : undefined,
      };
    }, [source]);

    return <Rive ref={ref} {...riveProps} {...riveConfig} />;
  }
);

Then I can use these three types of source:

// Import
import truckV7 from "../assets/animations/truck_v7.riv";
// ...
<RiveAnimation source={truckV7} />;

// Require
<RiveAnimation source={require("../assets/animations/truck_v7.riv")} />

// Remote URL
<RiveAnimation source={"https://public.uat.rive.app/community/runtime-files/148-325-tape.riv"} />

Also, when .riv files are loaded locally like that, It looks like there is a graphic white blink on iOS (simu) when animationName is set but maybe it's just my implementation that's incorrect.

blink_on_iOS.mp4

[tslater]

@guval-gh If you look at the react native docs, when you use a remote url, you should use the url prop.
Link to the docs: https://help.rive.app/runtimes/overview/react-native#id-3.-add-the-rive-component
Here's the example:

import Rive from 'rive-react-native';

function App() {
  return <Rive
      url="https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv"
      artboardName="Avatar 1"
      stateMachineName="avatar"
      style={{width: 400, height: 400}}
  />;
}

Can you try that and let me know if it works or not?

[guval-gh]

@tslater
Yes, when we use the classical <Rive />component, we can use url property.
But I spoke about your custom component <RiveAnimation />.
If I would like to use it and pass to the source custom property (an import, require or remote url), I needed to modify the <RiveAnimation /> code a bit.

[tslater]

@guval-gh I'm unsure of what you mean. Have you tried using the url prop with the wrapped component code I provided? I forwards all the props, so it should work. What error or behavior do you see if you use the url prop?

Did you get it working with modifications? Do you want to share those?

[guval-gh]

@tslater I mean, of course I can use the url props but, if I use the custom <RiveAnimation /> component dynamically, I need that the custom property source works no matter what.

With your code, if the source pass is a remote url, the code crash.
So I just modify it a little bit to handle the three possibilities (source as import, require or remote url).

Yes, it works, I share it just above #241 (comment)