Hi, everyone is there any new about lottie support...
# multiplatform
d
Hi, everyone is there any new about lottie support or skia for lottie animations?
u
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
d
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?
u
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
Copy code
@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
d
@लातों वाला भूत thx, i will try it out tomorrow somehow
🙌 1
u
Let me know if you are able to get rid of the blinking
d
what pods library are u using for iOS?
u
Copy code
pod("lottie-ios") {
            version = "4.3.3"
            moduleName = "Lottie"
            extraOpts += listOf("-compiler-option", "-fmodules")
        }
Asset loading is done via Moko
d
the same for me
1
@लातों वाला भूत do y have some additional settings for gradle or iOS for lottie?
Copy code
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 **
u
Copy code
framework {
            baseName = "shared"
            isStatic = true
        }
Do you have isStatic = true?
d
yes
Copy code
listOf(
        iosX64(),
        iosArm64(),
        iosSimulatorArm64()
    ).forEach {
        it.binaries.framework {
            baseName = "ComposeApp"
            isStatic = true
            binaryOption("bundleId", "...")
        }
    }
u
Not sure about this. I had faced this issue But isStatic had fixed it
d
@लातों वाला भूत вот versions of kotlin and compose do u have?
u
1.9.20 kotlin 1.5.10 Try resyncing since this is agnostic to compose and kotlin version
d
the same… can u share the gradle file without bunde ids?
u
Have you done pod install?
d
do u have podfile?
u
Yes
d
Copy code
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")
        }
    }
u
Can you specify lottie version?
d
The same error =(
Copy code
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)
@लातों वाला भूत there is Podfile:
Copy code
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
u
Looks good. I'm not sure why this would cause it.
d
@लातों वाला भूत do u have koin as DI?
u
Yes
d
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
u
Were you able to solve this?
d
nope, the lottie is visible for now and shard module doesn’t. Do you use compose UI for both android and iOS?
a
@Dmytro Boiko Do you have sample for how to use lottie pods in compose iOS and how to pass the animation and file name ?
u
Go for Kottie or Compottie if you are using CMP
a
It doesn't support rendering base64 images in the Lotte files
u
Can't you convert them into lottie files?
a
It's Lottie file already that contain base 64 images
115 Views