https://kotlinlang.org logo
Channels
Powered by
#multiplatform
Title
# multiplatform
d

Dmytro Boiko

11/15/2023, 7:02 PM
Hi, everyone is there any new about lottie support or skia for lottie animations?
u

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

11/16/2023, 5:06 PM
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

Dmytro Boiko

11/16/2023, 5:11 PM
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

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

11/16/2023, 5:20 PM
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

Dmytro Boiko

11/16/2023, 5:24 PM
@लातों वाला भूत thx, i will try it out tomorrow somehow
🙌 1
u

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

11/16/2023, 5:25 PM
Let me know if you are able to get rid of the blinking
d

Dmytro Boiko

11/16/2023, 5:25 PM
what pods library are u using for iOS?
u

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

11/16/2023, 5:27 PM
Copy code
pod("lottie-ios") {
            version = "4.3.3"
            moduleName = "Lottie"
            extraOpts += listOf("-compiler-option", "-fmodules")
        }
Asset loading is done via Moko
d

Dmytro Boiko

11/16/2023, 5:27 PM
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

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

11/16/2023, 6:41 PM
Copy code
framework {
            baseName = "shared"
            isStatic = true
        }
Do you have isStatic = true?
d

Dmytro Boiko

11/16/2023, 6:59 PM
yes
Copy code
listOf(
        iosX64(),
        iosArm64(),
        iosSimulatorArm64()
    ).forEach {
        it.binaries.framework {
            baseName = "ComposeApp"
            isStatic = true
            binaryOption("bundleId", "...")
        }
    }
u

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

11/16/2023, 11:05 PM
Not sure about this. I had faced this issue But isStatic had fixed it
d

Dmytro Boiko

11/17/2023, 8:56 AM
@लातों वाला भूत вот versions of kotlin and compose do u have?
u

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

11/17/2023, 9:37 AM
1.9.20 kotlin 1.5.10 Try resyncing since this is agnostic to compose and kotlin version
d

Dmytro Boiko

11/17/2023, 9:38 AM
the same… can u share the gradle file without bunde ids?
u

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

11/17/2023, 9:38 AM
Have you done pod install?
d

Dmytro Boiko

11/17/2023, 9:40 AM
do u have podfile?
u

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

11/17/2023, 9:42 AM
Yes
d

Dmytro Boiko

11/17/2023, 9:44 AM
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

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

11/17/2023, 9:45 AM
Can you specify lottie version?
d

Dmytro Boiko

11/17/2023, 9:48 AM
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

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

11/17/2023, 10:10 AM
Looks good. I'm not sure why this would cause it.
d

Dmytro Boiko

11/17/2023, 10:30 AM
@लातों वाला भूत do u have koin as DI?
u

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

11/17/2023, 10:34 AM
Yes
d

Dmytro Boiko

11/17/2023, 10:35 AM
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

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

11/18/2023, 8:29 PM
Were you able to solve this?
d

Dmytro Boiko

11/19/2023, 7:51 AM
nope, the lottie is visible for now and shard module doesn’t. Do you use compose UI for both android and iOS?
Powered by