How to add Lottie Animation in SwiftUI

Using Lottie, we can bring more dynamism to our apps, which will result in an improved user experience. Lottie is a mobile library created by Airbnb, which allows us to render After Effects animations in native apps for iOS, macOS, Android and React Native in real-time. These animations are then exported in the JSON format and the library is open source and can be found on GitHub.

Lottie Files it’s a collection of animations that you can download directly from their website https://lottiefiles.com

From lottiefiles.com

The first step to install Lottie is to clone or download the Lottie iOS repository on GitHub https://github.com/airbnb/lottie-ios . Once this is done, open up the toolbar and click on File / Add Packages. Enter the URL in the input field and click Next for the next two modal and then, Finish.

Finally, put your Lottie animation files inside a folder called Lottie and drag and drop the folder next to Info.plist.

Create a new Swift File named LottieView.swift. Let’s first import Lottie into this file and then create a UIViewRepresentable. We will create two functions to satisfy UIViewRepresentable makeUIView and updateUIView. And after that, let’s add the customisation.

import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {
    let loopMode: LottieLoopMode

    func updateUIView(_ uiView: UIViewType, context: Context) {

    }

    func makeUIView(context: Context) -> Lottie.LottieAnimationView {
        let animationView = LottieAnimationView(name: "plane")
        animationView.play()
        animationView.loopMode = loopMode
        animationView.contentMode = .scaleAspectFit
        return animationView
    }
}

And after all, we need to go to the ContentView and add LottieView( ) for display our animation.

import SwiftUI

struct ContentView: View {
    var body: some View {
        LottieView(loopMode: .loop)
            .scaleEffect(0.4)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

And we are DONE!

I hope this was helpful. Thanks for reading.