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

Question: can these be statically-imported?

Open nandorojo opened this issue 3 years ago • 2 comments

Hi there! I'm new to Rive (found you guys on Twitter) and I love the concept. I was hoping to get a better understanding of how it works on the frontend.

I notice that Rive elements are imported via URL? I was hoping to use this for animated icons in a navigation tab bar and the like, a-la Lottie. But I'm concerned that users with poor internet connection might have a slow time loading multiple requests for the animations, and that it could make the tabs load slowly. Could you explain how this part works? Do they cache on the device, or could I somehow "export" the Rive assets and bundle them with the app?

Thank you!

nandorojo avatar Sep 29 '22 16:09 nandorojo

I got some insight from #123. It seems like we can add riv to metro's config and then statically import the assets with useAssets from expo-assets. I'm going to investigate this further, namely synchronously importing the assets by injecting them into the native binary.

I think this config plugin could allow for statically importing the assets synchronously: https://github.com/EvanBacon/link-native-assets-expo-config-plugin

However, it would require including the assets in the native binary, and would not work with OTA. On the other hand, useAssets from Expo would indeed work with OTA.

nandorojo avatar Sep 29 '22 16:09 nandorojo

Hi @nandorojo ! We can certain test more with expo to get better compatibility here; I believe historically it's been finicky with this project in particular. You can also include the Rive assets in the resource bundles of respective ios and android projects to avoid the url route, and use the resourceName route instead. More on that here: https://help.rive.app/runtimes/overview/react-native/loading-in-rive-files

zplata avatar Nov 29 '22 19:11 zplata