Support lottie-react-native for RNW vNext

[namrog84]

https://github.com/react-native-community/lottie-react-native

Used by 62k repos and about 12k stars.

Lottie component for React Native (iOS and Android)

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile!

[chrisglein]

This would be a great thing to do after we have our view managers story up and running (after M3).

[chrisglein]

Details on WinUI's support of Lottie:
https://docs.microsoft.com/en-us/uwp/toolkits/winui/release-notes/winui-2.1
https://docs.microsoft.com/en-us/windows/communitytoolkit/animations/lottie
https://docs.microsoft.com/en-us/uwp/api/microsoft.ui.xaml.controls.animatedvisualplayer?view=winui-2.2

[namrog84]

Everything in there seems to be for C# .NET and I don't really see a C++/WinRT way of using that.

[chrisglein]

Accidental close

[chrisglein]

Partner is currently unblocked with their existing lottie implementation. We will need to wait for some improvements from Composition before lottie support can be added without either codegen or the overhead of .NET. Moving to M5 as we no longer need this to exist M4.

[jonthysell]

Using some weird workarounds (like taking the json they loaded from disk, and resaving it back to disk, to be reloaded by LottieWindows, and doing too much on the UI thread), but this is their sample app: 😃

[jonthysell]

PR started here: lottie-react-native/lottie-react-native#692

[simeoncran]

The developer passes in integer start frame and end frame. I can convert those into progress percentages given a total number of frames, which I'm currently doing by multiplying the duration in seconds by a hard-coded framerate.

But with rounding, there's no guarantee that the exact specified frames will be played back.

I don't think it should matter. Frames are floating point numbers so they're already subject to rounding elsewhere in the system. Do you have any repros where it's definitely displaying the wrong thing so that I can investigate?

[simeoncran]

Using some weird workarounds (like taking the json they loaded from disk, and resaving it back to disk, to be reloaded by LottieWindows, and doing too much on the UI thread), but this is their sample app: 😃

You should be able to pass a stream to LottieVisualSource. That API was hidden due to a missing attribute, but that has been fixed and will be available in V7.0 (preview expected this week).
Is the problem with too much work on the UI thread something in LottieVisualSource or is it something you can fix? LottieVisualSource does most of it's loading on a separate thread. Maybe more needs to moved off.

[jonthysell]

Using some weird workarounds (like taking the json they loaded from disk, and resaving it back to disk, to be reloaded by LottieWindows, and doing too much on the UI thread), but this is their sample app: 😃

You should be able to pass a stream to LottieVisualSource. That API was hidden due to a missing attribute, but that has been fixed and will be available in V7.0 (preview expected this week).
Is the problem with too much work on the UI thread something in LottieVisualSource or is it something you can fix? LottieVisualSource does most of it's loading on a separate thread. Maybe more needs to moved off.

Looking at the 7.0.0-preview4 now. The UI threading issues has nothing to do with LottieWindows and were just how I wrote my prototype - explicitly dispatching everything on the UI thread to avoid thread mismatch issues and just prove I could get their example app up and running. I have since then gone through and redone the threading properly.

[aschultz]

@jonthysell I took a stab at a C++/WinRT implementation.
lottie-react-native/lottie-react-native#714

[jonthysell]

@aschultz I'm glad to see another implementation, I'll take a look at it.

I think, unfortunately, there's no solution that meets everyone's needs:

Requirement	C#	C++/WinRT
Dynamically load assets at runtime	✔	❌
Codepush / bundle-only updates	✔	❌
Non-managed code	❌	✔

Until there's a full C++ implementation of lottie, with loading json at runtime, I think we'll need both solutions, and let app developers pick which version works best for them. For some customers, requiring them to publish a native app update to change assets is a deal-breaker. For other customers, introducing managed code (especially having to switch to a managed app) is a deal-breaker.

[aschultz]

@jonthysell I was thinking that the C++/WinRT version might work for both scenarios. It defers the loading of the IAnimatedVisualSource back to the app (via ILottieSourceProvider), so devs can choose whether to use codegen or LottieWindows to fulfill the requests.

interface ILottieSourceProvider
{
    Microsoft.UI.Xaml.Controls.IAnimatedVisualSource GetSourceFromName(String name);
    Microsoft.UI.Xaml.Controls.IAnimatedVisualSource GetSourceFromJson(String json);
}

A C++ app could elect to only implement GetSourceFromName for now, and then add support for JSON once a better dynamic loader is available to them.

This also allows use of both modes in the same app -- codegen for built-in animations, JSON for remotely fetched content -- based on whether the React code passes in a string or JSON for a source.

[chrisglein]

@jonthysell @aschultz Do we think that we'll be able to have a canonical C++/WinRT version that works for both scenarios? If not, how can we guide people looking for lottie to an option that works for them? Do we need a fork? Does one get merged with a readme presenting the other as an option? How do we get this more discoverable than 2 in progress PRs? (#714 and #700)

[emilioicai]

hey guys, lottie-react-native 4.0.0 has been finally released. Sorry for the delay, it has been very painful to test and still I think there may be some issues so I would appreciate if you could give it a try.

BTW, react-native-safe-modules 1.0.1 has also been released including @jonthysell changes

[jonthysell]

I've signed off on lottie-react-native/lottie-react-native#714, hopefully this will make it easier for people to take the dependency on it.