Transparent background not working in IOS

[Jamshed Alam Qaderi]

Hello @ismai117 ,

I am trying to set transparent background to lottie animation but it's always white. I think you've added necessary parameter to be able to set transparent background in ios.

Column(modifier = Modifier.fillMaxSize().background(Color.Green)) {
    val composition = rememberKottieComposition(
        spec = KottieCompositionSpec.File(Res.getUri("files/animation.json"))
    )
    val animationState by animateKottieCompositionAsState(
        composition = composition,
        speed = 1f,
        iterations = iterations
    )
    KottieAnimation(
        modifier,
        composition,
        progress = { animationState.progress },
        backgroundColor = Color.Transparent
    )
}

By the way, thank you for this awesome library

[ismai117]

Hi @JamshedAlamQaderi make sure the backgroundColor matches the container background color

Column(modifier = Modifier.fillMaxSize().background(Color.Green)) {
    val composition = rememberKottieComposition(
        spec = KottieCompositionSpec.File(Res.getUri("files/animation.json"))
    )
    val animationState by animateKottieCompositionAsState(
        composition = composition,
        speed = 1f,
        iterations = iterations
    )
    KottieAnimation(
        modifier,
        composition,
        progress = { animationState.progress },
        backgroundColor = Color.Green
    )
}

or

Column(modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {
    val composition = rememberKottieComposition(
        spec = KottieCompositionSpec.File(Res.getUri("files/animation.json"))
    )
    val animationState by animateKottieCompositionAsState(
        composition = composition,
        speed = 1f,
        iterations = iterations
    )
    KottieAnimation(
        modifier,
        composition,
        progress = { animationState.progress },
        backgroundColor = MaterialTheme.colorScheme.background
    )
}

[Jamshed Alam Qaderi]

@ismai117 I know that. But I have a loading animation which will show on top of the screen and need to show only animation

[ismai117]

@JamshedAlamQaderi can you show me the android version so I can see what you're trying to achieve

[Erick Sorto]

@ismai117 Hey I am having the same problem too.

This is how it looks on IOS

This is how it looks on Android

[ismai117]

Unfortunately, transparent background doesn't work at the moment, you can check out

JetBrains/compose-multiplatform#3154

[Jamshed Alam Qaderi]

@ismai117 i have used skiko implementation from desktop module. I think you should use skiko implementation until this issue has been fixed.

[ismai117]

@JamshedAlamQaderi I will look into it. If you want to contribute, feel free to make a pull request.

[Erick Sorto]

@ismai117 Is there any workarounds for this issue? I am not sure how to go about fixing this issue.

[ismai117]

@ErickSorto Unfortunately No, for simple lottie animations you can do the following

 MaterialTheme {
        Box(
            modifier = modifier
                .fillMaxSize()
                .background(MaterialTheme.colorScheme.background),
            contentAlignment = Alignment.Center
        ) {

            KottieAnimation(
                composition = composition,
                progress = { animationState.progress },
                modifier = modifier
                    .fillMaxWidth()
                    .height(200.dp),
                backgroundColor = MaterialTheme.colorScheme.background
            )

        }
    }