What level of performance can be expected on react-native?

[evelant]

Description

What level of performance can be expected from Rive on react-native? Specifically:

• How many Rive components can be loaded at once on an midrange Android or iOS device without dropping frames?
• Will Rive animations play smoothly even on low end Android phones on react-native?
• Does the Rive component have significant impact on the JS thread in react-native?
• Any other performance issues or potential bottlenecks to look out for?

Thanks for any insight!

[evelant]

I did a little test. I rendered various numbers of <Rive /> elements in my app using the example truck_v7.riv file. I built the app and ran it on a Samsung Galaxy S9+ which is a 2018 flagship phone so likely midrange by today's standards.

One instance of truck_v7 was smooth. 10 instances dropped framerate to ~3-4fps. 20 instances prevented scrolling. More than 20 crashed the app.

Is it safe to say that Rive is designed only to show one or two animations at any given time? Or perhaps there are some performance considerations that aren't yet documented?

[evelant]

If any of the maintainers @duncandoit @mjtalbot @zplata could chime in on this issue it would be greatly appreciated, thanks!

[evelant]

@zplata @chreck I see there's movement on this repo, would you kindly take a look at the issues list?

[zplata]

Hey @evelant, sorry for the delay on this! I was able to repro your issue you mentioned around 20 instances really slowing down the frame rate on the current version on an Android emulator. It's not intentional to show only 1 or 2 at a given time, so we'll invest more time in including examples that show more Rives on a screen in our example app to track performance better, and being more transparent about perf as well in our docs over time.

We have a big update to align this runtime with our downstream native runtimes (iOS and Android) that may provide better results, but we'll update here when we find these.

The JS layer that makes up this runtime is very lightweight, and is meant to port properties and callbacks/touch events to the underlying APIs of RiveAnimationView in Android and RiveRuntime in iOS, so there shouldn't be much work done on the JS side, and the bulk of the logic and rendering is done in the native modules

[evelant]

@zplata thanks for the response! What sort of performance do you see in plain Android apps with multiple instances of Rive on screen at once?

My use case here is a gamified todo-list with social features written in react-native where there could be ~10-20 "characters" on a screen at once. I'd love to be able to use Rive to animate those characters. It would really bring them to life compared to the very basic animations you can do with plain react-native.

[evelant]

@zplata If you've got a minute I'd love to hear your thoughts on performance for my use case above. Also, have you made any improvements to performance on react-native since the last update here?

[zplata]

Hi @evelant! Performance gains I expect, should come from performance improvements at the native iOS/Android level. I'll try and get to doing some testing with the truck example you mentioned earlier in the issue for an Android emulator with our new major version to see if that's improved with multiple instances, since it's been bumped quite a bit.

There's been some recent work on the rive-android side fixing how allocated native objects are created and cleaned up in Kotlin, so we can follow up here. At the very least, I wouldn't expect that 10-20 instances should crash your app. Even better performance if you're able to manage pausing and playing the Rive instances as they come on/off screen, so that you only have the relevant on-screen animations running their own animation loop.

[evelant]

@zplata Did you get a chance to look into performance on react-native android? My team would love to use Rive if we can.

[zplata]

Hey @evelant - I was able to try the truck example again that you ran into issues with a while back (where 10+ instances on screen would crash the app). While I don't have a Samsung Galaxy S9+ handy at the moment, you may try again with the latest version. Rendering a simple ListView with 11 instances of truck_v7 runs ~60 fps on UI/JS thread on a Pixel emulator in dev mode (and that's before using the recommended FlatList or SectionList that RN recommends in docs). Improvements here are due to recent updates on the native rive-android view side, so there shouldn't be anything bottlenecked at the react-native level. However, if you do find any other major issues on your end, we'd love to know about them.

[evelant]

@zplata Awesome, thanks for checking it out again! I'll try it on my test device and see how it does with the newer versions.

Not really related to this ticket, but are there plans to enable dynamic assets in Rive files?

The two things we really need to be able to use Rive in our app are

1. input strings (to make animated dialogs, rewards, etc) and
2. input image urls (to load user's choices of avatar customization overlays).

Our app has avatars that I'd love to animate with Rive but we have hundreds of cosmetic items (and thus millions of combinations) for users to choose from. It wouldn't be possible for us to embed all of the assets in Rive file at once and maintain reasonable size/perf. We optimize now by rendering the overlaid images with Skia then snapshotting the canvas into a base64 encoded png we store alongside the user data. If we had some way to get this dynamically created image into Rive we could do so many awesome things!

I was actually surprised to find out that Rive supports no inputs at all at the moment! I see that text inputs are coming soon. How about image url inputs? A possibility soon or perhaps not planned at all?

[zplata]

@evelant Definitely planned! Text is in progress at the moment as you mention, and dynamic image assets are also a highly-requested feature on the roadmap as well

[ev01ve]

Will dynamic image assets be coming to the RN build soon? I see it's already available for most of the other platforms, listed here https://help.rive.app/runtimes/loading-assets

Eagerly awaiting this for RN!