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

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.

@adelekennedy

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

@wojtus7

cc @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)

@roryabraham

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

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.
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.

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!

@wojtus7

@wojtus7 @kosmydel what's the latest here?

@wojtus7

@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.

@roryabraham

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.

@kosmydel

@kosmydel another issue applying changes from #30901, just incase you haven't noticed yet there's too much gap between animation and Hero Text

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

@kosmydel

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.98-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Fix Lottie animations height when not playing #30901

If no regressions arise, payment will be issued on 2023-11-21. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

@kosmydel does not require payment (Contractor)

@kosmydel

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@kosmydel] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
[] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

Navigation Menu

Repository navigation

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

Problem

Solution

22 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Problem

Solution

Activity

melvin-bot commented on Sep 6, 2023

roryabraham commented on Sep 6, 2023

wojtus7 commented on Sep 6, 2023

kosmydel commented on Sep 12, 2023

roryabraham commented on Sep 13, 2023

roryabraham commented on Sep 19, 2023

kosmydel commented on Sep 19, 2023

kosmydel commented on Sep 22, 2023

22 remaining items

ishpaul777 commented on Nov 6, 2023

melvin-bot commented on Nov 10, 2023

melvin-bot commented on Nov 14, 2023

melvin-bot commented on Nov 14, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions