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

[roryabraham]

Still in development. @kosmydel was OOO

[wojtus7]

@roryabraham Since I'm going OOO for two weeks and @kosmydel already kinda took lead in this task I think this is reasonable to change assigned person ☺️

[kosmydel]

Hey @roryabraham,
I'm sorry for the delay. I was catching up with my other tasks.

During our internal SWM review, I got a suggestion, that I can use expo to create a webpack.config.js file for the web instead of writing a custom one. It would be shorter and cleaner like here, and it might support hot library reloading in the demo. If we have time, I can have a look at it tomorrow and see how much time it would take. Otherwise, if it is urgent, we can continue with our current approach.

[roryabraham]

@kosmydel I don't to see how that's relevant to this task at all. This ticket is focused on building a web implementation in lottie-react-native.

[roryabraham]

Upstream PR was merged three days ago

[roryabraham]

6.4.0 was released with web support yesterday, thanks @kosmydel and @matinzd!

[ishpaul777]

@roryabraham Coming from #27611, this issue requires a patch to react-native-web-lottie specifically to be able to use methods like play() etc. but looks like we are real close to depriciating the package, Can you update when can we expect lottie-react-native package upgrade?

[kosmydel]

Hey @ishpaul777, a PR with the lottie-react-native upgrade to 6.4.0 is prepared and waiting for a review. I think it is possible that it will be merged by the end of next week.

[ishpaul777]

Thank you for the update @kosmydel

[roryabraham]

#30772 was merged, so once that goes to production this issue can be considered complete

[ishpaul777]

The animation container changes size after user is navigatied to the page tested on mweb safari

Screen.Recording.2023-11-03.at.1.08.49.AM.mov

Root cause:
Aspect ration style is only applied to the LottieView when we set the auto play to be true, means (animation is playing) so animation changes it aspect ratio when it starts playing. when animation is still (not playing) the style is not applied.
setted autoplay to false and min-height to animation container(unrelated)

cc @kosmydel

[kosmydel]

@ishpaul777 thanks for noticing that! A PR with a fix.

[ishpaul777]

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

[melvin-bot]

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

[melvin-bot]

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)

[melvin-bot]

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.