Hi, everyone is there any new about lottie support or skia for lottie animations?

# multiplatform

[Dmytro Boiko]

Hi, everyone is there any new about lottie support or skia for lottie animations?

[लातों वाला भूत]

You have to go with expect/actual implementation for now
I have done the same, works fine
There is no multiplatform lottie library right now

[Dmytro Boiko]

thx, i know this. Also i have tried with Skottie and Skia it doesn’t work. For expect/actual - Android works but iOS doesn’t. Do u have some code for iOS which u can share?

[लातों वाला भूत]

Skottie and Skia would also work but cause intermittent crashes
https://github.com/JetBrains/compose-multiplatform/issues/3149
This solution can work but always causes drawing crashes in my case for iOS

[लातों वाला भूत]

This is what works for me in iOS

@OptIn(ExperimentalForeignApi::class)
@Composable
actual fun Lottie(
    modifier: Modifier,
    animationRes: AssetResource,
    isPlaying: Boolean,
    isInfinite: Boolean,
    contentScale: ContentScale,
    speed: Float,
    onComplete: (() -> Unit)?
) {

    var animation by remember { mutableStateOf<CompatibleAnimation?>(null) }

    LaunchedEffect(Unit) {
        animation = CompatibleAnimation(
            name = animationRes.fileName,
            subdirectory = null,
            animationRes.bundle
        )
    }

    when (val value = animation) {
        null -> {}
        else -> {
            UIKitView(
                modifier = modifier,
                factory = {
                    UIView().apply {
                        backgroundColor = UIColor.clearColor
                        opaque = true
                        setClipsToBounds(true)
                    }
                },
                background = MaterialTheme.colorScheme.surface,
                update = {
                    val view = CompatibleAnimationView()
                    view.translatesAutoresizingMaskIntoConstraints = false
                    it.addSubview(view)

                    NSLayoutConstraint.activateConstraints(
                        listOf(
                            view.widthAnchor.constraintEqualToAnchor(it.widthAnchor),
                            view.heightAnchor.constraintEqualToAnchor(it.heightAnchor)
                        )
                    )

                    view.setAnimationSpeed(speed.toDouble())
                    view.setCompatibleAnimation(value)
                    view.setLoopAnimationCount(if (isInfinite) -1.0 else 1.0)
                    view.setContentMode(UIViewContentMode.UIViewContentModeScaleAspectFit)
                    view.playWithCompletion { completed ->
                        if (completed) onComplete?.invoke()
                    }
                }
            )
        }
    }

}

[लातों वाला भूत]

I must warn you since UIKitView has an issue of having a white background
It causes blinking in dark mode

[लातों वाला भूत]

@Elijah Semyonov has been very kind to provide a workaround recently, however I have not been able to try it out.
Here: https://github.com/JetBrains/compose-multiplatform/issues/3154#issuecomment-1812572826

[Dmytro Boiko]

@लातों वाला भूत thx, i will try it out tomorrow somehow

[लातों वाला भूत]

Let me know if you are able to get rid of the blinking

[Dmytro Boiko]

what pods library are u using for iOS?

[लातों वाला भूत]

pod("lottie-ios") {
            version = "4.3.3"
            moduleName = "Lottie"
            extraOpts += listOf("-compiler-option", "-fmodules")
        }

[लातों वाला भूत]

Asset loading is done via Moko

[Dmytro Boiko]

the same for me

[Dmytro Boiko]

@लातों वाला भूत do y have some additional settings for gradle or iOS for lottie?

ld: Undefined symbols:
  _OBJC_CLASS_$__TtC6Lottie19CompatibleAnimation, referenced from:
       in ComposeApp[arm64][2](ComposeApp.framework.o)
  _OBJC_CLASS_$__TtC6Lottie23CompatibleAnimationView, referenced from:
       in ComposeApp[arm64][2](ComposeApp.framework.o)
clang: error: linker command failed with exit code 1 (use -v to see invocation)

** BUILD FAILED **

[लातों वाला भूत]

framework {
            baseName = "shared"
            isStatic = true
        }

Do you have isStatic = true?

[Dmytro Boiko]

yes

listOf(
        iosX64(),
        iosArm64(),
        iosSimulatorArm64()
    ).forEach {
        it.binaries.framework {
            baseName = "ComposeApp"
            isStatic = true
            binaryOption("bundleId", "...")
        }
    }

[लातों वाला भूत]

Not sure about this.
I had faced this issue
But isStatic had fixed it

[Dmytro Boiko]

@लातों वाला भूत вот versions of kotlin and compose do u have?

[लातों वाला भूत]

1.9.20 kotlin
1.5.10
Try resyncing since this is agnostic to compose and kotlin version

[Dmytro Boiko]

the same… can u share the gradle file without bunde ids?

[लातों वाला भूत]

Have you done pod install?

[Dmytro Boiko]

do u have podfile?

[लातों वाला भूत]

Yes

[Dmytro Boiko]

cocoapods {
        summary = "ComposeApp KMM"
        homepage = ""
        version = "11.0"
        ios.deploymentTarget = "16.2"

        noPodspec()
        pod("lottie-ios") {
            source = git("<https://github.com/airbnb/lottie-ios>") {
                branch = "master"
            }
            moduleName = "Lottie"
            extraOpts += listOf("-compiler-option", "-fmodules")
        }
    }

[लातों वाला भूत]

Can you specify lottie version?

[Dmytro Boiko]

The same error =(

ld: warning: Could not find or use auto-linked framework 'Lottie': framework 'Lottie' not found
ld: Undefined symbols:
  _OBJC_CLASS_$__TtC6Lottie19CompatibleAnimation, referenced from:
       in composeApp[arm64][2](composeApp.framework.o)
  _OBJC_CLASS_$__TtC6Lottie23CompatibleAnimationView, referenced from:
       in composeApp[arm64][2](composeApp.framework.o)
clang: error: linker command failed with exit code 1 (use -v to see invocation)

[Dmytro Boiko]

@लातों वाला भूत there is Podfile:

target 'iosApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for iosApp
  platform :ios, '16.2'
  pod 'composeApp', :path => '../composeApp'
end

[लातों वाला भूत]

Looks good. I'm not sure why this would cause it.

[Dmytro Boiko]

@लातों वाला भूत do u have koin as DI?

[लातों वाला भूत]

Yes

[Dmytro Boiko]

i have added poffile + install the pods. For now Lottie is avaliable, but Helper.kt for koin init can’t be seen by the app

[लातों वाला भूत]

Were you able to solve this?

[Dmytro Boiko]

nope, the lottie is visible for now and shard module doesn’t. Do you use compose UI for both android and iOS?

[Ahmed Elzeiny]

@Dmytro Boiko Do you have sample for how to use lottie pods in compose iOS and how to pass the animation and file name ?

[लातों वाला भूत]

Go for Kottie or Compottie if you are using CMP

[Ahmed Elzeiny]

It doesn't support rendering base64 images in the Lotte files

[लातों वाला भूत]

Can't you convert them into lottie files?

[Ahmed Elzeiny]

It's Lottie file already that contain base 64 images