[HOLD for payment 2023-11-21] Implement web support in lottie-react-native

[roryabraham]

Problem

We recently sponsored support for .lottie files in lottie-react-native. However, we currently use react-native-web-lottie to provide a unified interface for lottie across native and web.

However, react-native-web-lottie is unmaintained, and the patch we have for it is basically a complete rebuild of this simple lib.
Now we'd like to start using .lottie files, and there is an existing dotlottie player for web, but at this point I don't think it makes sense to continue with react-native-web-lottie.

Solution

Let's build web support into lottie-react-native for both lottie JSON and .lottie file formats.

[melvin-bot]

Triggered auto assignment to @adelekennedy (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[roryabraham]

cc @wojtus7

[wojtus7]

Hi!

I would like to take care of this task 🥰

Overall my idea is to:

• Create web examples in lottie-react-native repo
• Add web implementations to make web versions of the example app work the same as android/iOS/windows equivalents

Then create PR for lottie-react-native and after it is hopefully merged use it in Expensify (also removing react-native-web-lottie library)

[kosmydel]

Hey, @roryabraham as I am working with @wojtus7 on this task I have some questions about this issue:

1. I want to make sure, that we are on the same page: We want to add the dotlottie library to the lottie-react-native library (as a dependency), and then use it to support the web version.
2. Do we need plain .json support? The dotlottie library supports only .lottie files. I can use lottie-react library, to support JSON files as well.

[roryabraham]

I want to make sure, that we are on the same page: We want to add the dotlottie library to the lottie-react-native library (as a dependency), and then use it to support the web version.

Yes

Do we need plain .json support? The dotlottie library supports only .lottie files. I can use lottie-react library, to support JSON files as well.

Yes, we need plain .json support as well to upstream our efforts.

---

Thanks!

[roryabraham]

@wojtus7 @kosmydel what's the latest here?

[kosmydel]

@wojtus7 @kosmydel what's the latest here?

Hey, I'm currently busy with other tasks. But here is an update:

We have some working draft prepared here. We still have to do some cleanup, refactoring, and make all props (that are possible) to work on the web.

[kosmydel]

Hey @roryabraham, short update:
I've prepared a draft of the PR for the upstream.
I think that we should first upgrade the lottie-react-native library in the App to the latest version (6.3.1) because it has some breaking changes. We have to do that anyway, so the sooner is better. In that way, I will be able to focus only on the web implementation, instead of upgrading the library.

FYI I'm going to be OOO next week, so @wojtus7 will handle this issue during my absence.