Hi I have a Stack-Component with a HomeScreen and a SubScreen. Inside each Screen there is a Button....

# decompose

[Jan]

Hi I have a Stack-Component with a HomeScreen and a SubScreen. Inside each Screen there is a Button. I have defined different colors for different Button-States. Initial its working fine, but when I push something to the stack or go back my colors are not correctly displayed afterwards. Could it be related to the `Children`Decompose library?

[Jan]

@Composable
fun CustomButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    colorSet: ButtonColorSet,
    enabled: Boolean = true,
    content: @Composable RowScope.() -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()

    val containerColor =
        if (isPressed) colorSet.selected.background else colorSet.active.background
    val contentColor =
        if (isPressed) colorSet.selected.text else colorSet.active.text
    val borderColor =
        if (isPressed) colorSet.selected.border else colorSet.active.border

    Column{
        Button(
            modifier = modifier,
            colors = ButtonDefaults.buttonColors(
                containerColor = containerColor,
                contentColor = contentColor,
                disabledContainerColor = colorSet.disabled.background,
                disabledContentColor = colorSet.disabled.text,
            ),
            interactionSource = interactionSource,
            border = BorderStroke(1.dp, borderColor),
            shape = ButtonShape,
            onClick = onClick,
            enabled = enabled,
            content = {
                content()
            })
    }
}

[Jan]

Sample.mov

Sample.mov

[Jan]

As you can see in the Video initial the text changed from white to black. If I pushed something or go back its broken. Its working again If I moved my app to background/foreground again.

[Arkadii Ivanov]

It seems you are hitting this issue on the Compose side. https://github.com/arkivanov/Decompose/issues/330

[Arkadii Ivanov]

What Decompose version are you using? And could you share your Children code?

[Jan]

Decompose-Version: 2.0.0-compose-experimental-alpha-02

[Jan]

@Composable
fun RootContent(
    component: RootComponent,
    modifier: Modifier = Modifier
) {
    Children(
        stack = component.childStack,
        modifier = modifier,
        animation = stackAnimation { _, _, direction ->
            if (direction.isFront) {
                slide() + fade()
            } else {
                scale(frontFactor = 1F, backFactor = 0.7F) + fade()
            }
        },
    ) {
        when (val instance = it.instance) {
            is IRootComponent.Screen.Home -> HomeScreen(
                component = instance.component,
                modifier = Modifier.fillMaxSize()
            )

            is IRootComponent.Screen.Sub -> SubScreen(
                component = instance.component,
                modifier
            )
        }
    }
}

[Arkadii Ivanov]

Ok. You are using the stackAnimation variant that uses movableContentOf under the hood. And so most likely you are hitting https://issuetracker.google.com/issues/270656235

You can try updating Compose to a newer version. Or use stackAnimation without selector lambda for now.

[Arkadii Ivanov]

If you are using Multiplatform Compose, the following version should have this fixed: https://github.com/JetBrains/compose-multiplatform/releases/tag/v1.4.1-rc01

[Jan]

yes, I am using compose-multiplatform

[Jan]

release 4hour ago 😄

[Jan]

hm updated to 1.4.1-rc01 but still not fixed

[Jan]

I am using this template: https://github.com/JetBrains/compose-multiplatform-ios-android-template#readme

[Jan]

I changed compose.version from 1.4.0 to 1.4.1-rc01 in gradle.properties

[Arkadii Ivanov]

Could you try commenting out the animation?

[Jan]

sure

[Jan]

its working then

[Arkadii Ivanov]

Thanks. It appears that the issue is not fixed in that release. https://kotlinlang.slack.com/archives/CJLTWPH7S/p1687531003922929?thread_ts=1686858296.520069&cid=CJLTWPH7S

Please use the stackAnimation variant without selector lambda for now.

[Arkadii Ivanov]

Or maybe try a dev version of Multiplatform Compose 1.5.x, if you dare. 😀It could be fixed.

[Jan]

so instead of

stackAnimation { _, _, direction ->
            if (direction.isFront) {
                slide() + fade()
            } else {
                scale(frontFactor = 1F, backFactor = 0.7F) + fade()
            }
        }

I use:

stackAnimation { _ ->
            slide() + fade()
        }

[Jan]

?

[Arkadii Ivanov]

No, there is variant without lambda at all

[Jan]

but its seems to be working with the above mentioned change

[Jan]

the one without lambda is a simple fade animation, right?

[Arkadii Ivanov]

It could work, but it will be equivalent to the variant without lambda.

[Arkadii Ivanov]

stackAnimation(slide() + fade())

[Jan]

btw: I think it was not fixed in a compose-multiplatform dev build

[Jan]

but thanks, at least now I know 😉

[Arkadii Ivanov]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1687532307615279?thread_ts=1686858296.520069&cid=CJLTWPH7S

[Jan]

do you know in which jetpack compose this bug is fixed? Could not find any information on the google issue tracker

[Arkadii Ivanov]

Not sure, but I believe the latest version should already have the fix: https://developer.android.com/jetpack/androidx/releases/compose-runtime#1.5.0-beta02

[Arkadii Ivanov]

And perhaps some earlier versions too

[Jan]

ok, thanks.