Binding Lottie (or any other Swift framework with UI) in MAUI
Tags: csharp, maui, lottie
Published: 2022-07-12 06:57:23

> This post is part of [#MAUIUIJuly](https://goforgoldman.com/2022/05/19/maui-ui-july.html). It's a great initiative to share helpful content with the community.

## What is Lottie?

> Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!
> For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.

## Why bind?

When I wrote my app which needed Lottie animations, I found [LottieXamarin](https://github.com/Baseflow/LottieXamarin) library, but that only works with Xamarin.Forms not with MAUI. I tried to update [it](https://github.com/Baseflow/LottieXamarin/pull/379), however I've run into multiple issues and at the same time I've realised only older Lottie versions can be binded, because from March of 2019, [Lottie is a Swift library](https://github.com/airbnb/lottie-ios/releases/tag/3.0.0), which means it can't be binded easily. With the binding solution I'll show below you can bind the latest version.

The other option is [Skottie](https://platform.uno/blog/skottie-now-available-for-skiasharp/) which was released after I'd already done my Lottie binding. I think Skottie is a viable alternative, based on your project needs can you select the best option.

## Getting Started

I have two great resources for binding a library:

{% embed https://www.youtube.com/watch?v=bgK_6anwMcw %}

[Swift binding walkthrough](https://docs.microsoft.com/en-us/xamarin/ios/platform/binding-swift/walkthrough)

To bind Lottie I chose slim binding approach, please check the video for the details.

This post would like to give a high level overview how view binding can be done, for the details please check the resources above and [LottieMaui](https://github.com/Csaba8472/LottieMaui) repo.

## Let's start with Android

### LottieProxy

LottieAnimationViewWrapper does what the name suggest. It wraps LottieAnimationView which means, it initializes, exposes the View and makes the caller able to set the animation. The class itself is in an android library.

In the video above there is a script which downloads all the dependencies. [Here](https://github.com/Csaba8472/LottieMaui/blob/main/LottieProxy/mylibrary/build.gradle#L45-L90) you can find it, so you can easily paste it in your gradle.

{% embed https://gist.github.com/Csaba8472/dddfee79c1a8c7d5b16c6e96f164c960 %}

### Lottie.Proxy.Binding

Nothing to see here, this is to connect the .net world with the android library. This project simplifies our job with not forcing us to bind 100% of any library, but only what we need (and already wrote in LottieProxy).

{% embed https://gist.github.com/Csaba8472/8deeb5882ce390b0eab988230dd2ca71 %}

## Then make it work on iOS

### LottieProxyiOS

On iOS side to keep it clean, I've used [Carthage](https://github.com/Carthage/Carthage) to get Lottie. The wrapping is pretty much the same, the goal is to make sure we can set the animation and get the view.

{% embed https://gist.github.com/Csaba8472/faaa311fbd3dabf9ce1a1f01bbb9125f %}

I've borrowed the [build script](https://github.com/Csaba8472/LottieMaui/blob/main/LottieProxyiOS/build.fat.sh) from the Swift binding walkthrough. 

### LottieProxyiOS.Binding

After you run [sharpie](https://docs.microsoft.com/en-us/xamarin/ios/platform/binding-swift/walkthrough#prepare-metadata) you'll get an interface close to this:

{% embed https://gist.github.com/Csaba8472/4629f90554a7220d10a00b10de4c0928 %}

The good thing is you have 100% control over what will be binded, so if you run any issue, it's much easier to fix as you would do the binding against the whole Lottie framework.

Don't forget to include all the frameworks and you see absolute paths here because relative paths don't always work for me.

{% embed https://gist.github.com/Csaba8472/ec3f90653ab63689c088f42e0c88e54a %}


## Common

### Lottie.Maui

Okay, we have the Lottie binding, now what? Let's use one of the greatest addition of MAUI, handlers. You'll find in this post the steps for LottieMaui, and please find [here](https://github.com/dotnet/maui/wiki/Porting-Custom-Renderers-to-Handlers#example) the detailed description.

First step is to define our interface:

{% embed https://gist.github.com/Csaba8472/08ff588f6de438536e8720a4510420d8 %}

Then implement the interface:

{% embed https://gist.github.com/Csaba8472/2a789d4589cd2dcb9095d767d8d87431 %}

Then create the LottieHandler with mappers. This is a partial class, the most interesting things will be happening in the Platform folder. Basically, there will be connected the binded C# libraries with our cross-platform app. As you see below I've only implemented what I needed. I wanted to show an animation loop, so I only implemented those parts. Later, anything else can be easily added.

Don't forget to add the handler:
```
handlers.AddHandler(typeof(ILottieView), typeof(LottieHandler));
```

{% embed https://gist.github.com/Csaba8472/99b0394b5216b6f65b886322fbbe02b7 %}

### Lottie.Maui iOS handler

{% embed https://gist.github.com/Csaba8472/6ed0a8bd39cae20ecbad8e95693d4c45 %}

### Lottie.Maui Android handler

{% embed https://gist.github.com/Csaba8472/a4514814cba547f004a7d6dfa98c19a5 %}

And last but not least, you can add LottieView to your app, and you'll have the looping animation:

{% embed https://gist.github.com/Csaba8472/48d8ccffa30258b0476cf4f7e42b103d %}

![app animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh8zwzg1jcuog9ub3ne7.gif)

If you made it here, you're awesome! I hope this post is going to be helpful.

I mentioned above, I implemented all this for my app, which is a Microsoft To Do client for Apple Watch and Wear OS devices. You can download from the [AppStore](https://apps.apple.com/us/app/wrist-list-for-microsoft-to-do/id1566765622) and from [Play Store](https://play.google.com/store/apps/details?id=com.hcsaba.mstodo)

You can find all the code here: https://github.com/Csaba8472/LottieMaui