My understanding of recomposition might be really poor, but I’m unable to understand why the value o...

# compose

[lilypuchi]

My understanding of recomposition might be really poor, but I’m unable to understand why the value of bounce isn’t changing when I trigger bounce.animateTo(..) in onClick
Would really appreciate some help here 🙇

@Composable
fun Bouncy(modifier: Modifier = Modifier) {
    val bounce = animatedFloat(initVal = 0f)

    Box(modifier = modifier
            .size(width = 150.dp, height = 50.dp)
            .clip(shape = GenericShape {
                val height = it.height * bounce.value
                relativeMoveTo(0f, 0f)
                relativeLineTo(it.width / 2, height)
                relativeLineTo(it.width / 2, -height)
            })
            .background(color = Color.Red)
            .clickable(onClick = {
                bounce.animateTo(
                        targetValue = 1f,
                        anim = spring(
                                dampingRatio = Spring.DampingRatioMediumBouncy,
                                stiffness = Spring.StiffnessLow
                        ),
                )
            })
    )
}

[Jeisson Sáchica]

It migh be because the initial height is 0f causing there to not be any clickable area and so the onClick never gets called

[Jeisson Sáchica]

I tried giving a min height of 10.dp and it does animate correctly when clicked so I think that's the issue

[Doris Liu]

Looking at the code, it looks like the clickable target area has a 0-height, as pointed out above. 🙂 You could consider moving .clickable(..) to immediately after .size(...) to ensure it has a reasonable touch area.

[lilypuchi]

Oh! That makes sense! Thanks a lot!! @Jeisson Sáchica @Doris Liu 🙇