using a LottieView inside navigationBarItems

Question

I have a struct called LottieView to show lottie icons and then I have a view called NavTest with a NavigationBar using a lottie icon in the center of the screen. The Lottie icon shows up in the center but not inside the navigationBarItem.

I have tried out some things, including testing if replacing the lottie view with UIImage works for the navigationBarItem (by setting the useLottie variable to true in LottieView). When doing this the UIImage is shown.

I am using the following: XCode13, swift 5, simulator iOS 8 Plus with ios 15 and 14.4, lottie-ios version 3.2.3.

Any idea what I'm missing?

import SwiftUI
import Lottie

struct NavTest: View {
    var body: some View {
        NavigationView {
            VStack {
                LottieView(name: "anyLocalLottieFile")
            }
            .navigationBarTitle(Text("Menu"), displayMode: .inline)
            .edgesIgnoringSafeArea(.leading)
            .edgesIgnoringSafeArea(.bottom)
            .transition(.move(edge: .bottom))
            .navigationBarItems(trailing:
                LottieView(name: "anyLocalLottieFile")
            )
        }
        .navigationViewStyle(.stack)
    }
}

struct LottieView: UIViewRepresentable {
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    var name: String!
    
    func playOnce() {
        self.animationView.play()
    }
    
    var animationView = AnimationView()

    class Coordinator: NSObject {
        var parent: LottieView
    
        init(_ animationView: LottieView) {
            self.parent = animationView
            super.init()
        }
    }

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView()

        let useLottie = true  //can be set to false to see a UIImage working
        if useLottie {
            animationView.animation = Animation.named(name)
            animationView.contentMode = .scaleAspectFit
            animationView.loopMode = .loop
            animationView.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview(animationView)
            NSLayoutConstraint.activate([
                animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
                animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
            ])
        }
        else {
            let im = UIImage(systemName: "pencil")
            let imv = UIImageView(image: im)
            view.addSubview(imv)
            NSLayoutConstraint.activate([
                imv.widthAnchor.constraint(equalTo: view.widthAnchor),
                imv.heightAnchor.constraint(equalTo: view.heightAnchor)
            ])
        }

        return view
    }

    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
        animationView.play(
        fromProgress: 0,
        toProgress: 1,
        loopMode: LottieLoopMode.playOnce,
        completion: { (finished) in

        })
    }
}

"The Lottie icon shows up in the center but not inside the navigationBarItem." Could you show that with a screenshot to make your point? — El Tomato, Sep 30 '21 at 02:10
Isn't it true that your lottie guy is actually placed over the navigation bar but that its view is so large that it looks as if it were not there? Just guessing... — El Tomato, Sep 30 '21 at 02:41
Then the same would happen when setting useLottie variable to false — DevB2F, Sep 30 '21 at 02:50

score 0 · Answer 1 · answered Sep 30 '21 at 19:29

0

_{Solution from OP migrated from question to an answer:}

Adding this to the LottieView("anyLocalLottieFile"):
.frame(minWidth: 40, maxWidth: .infinity, minHeight: 40)
fixed it

answered Sep 30 '21 at 19:29

TylerH

20,799
66
75
101

using a LottieView inside navigationBarItems

1 Answers1