How can I solve this problem..?? even though the d...

# android

[chanjungskim]

How can I solve this problem..?? even though the data changes the values in composable function remains when I use the same composable function consecutively..
https://stackoverflow.com/questions/75680245/how-can-i-give-different-idor-key-for-new-compose-function-but-same-function

[Pablichjenkov]

What happens if you use remember (key1 = data) {...} instead of rememberSavable?
I believe your NodeLayouts are being reused from recomposition to recomposition.

[chanjungskim]

I thought using coroutine can be dangerous so changed to animation. And removed remember part.

And now, I have this code.

val transition = updateTransition(targetState = text, label = text)
    val caretIndex by transition.animateInt(
        transitionSpec = {
            tween(durationMillis = duration.toInt()*text.length)
        },
        label = "caretIndex"
    ) { targetText ->
        Log.d("aos", "targetText: $targetText")
        targetText.length
    }

But this one also doesn't clear the previous value.

[chanjungskim]

here's the full code:

@Composable
fun TypeAnimationText(
    text: String,
    duration: Long,
    modifier: Modifier = Modifier,
    style: TextStyle = TextStyle.Default,
    color: androidx.compose.ui.graphics.Color = Color.Black,
) {
    val transition = updateTransition(targetState = text, label = text)
    val caretIndex by transition.animateInt(
        transitionSpec = {
            tween(durationMillis = duration.toInt()*text.length)
        },
        label = "caretIndex"
    ) { targetText ->
        Log.d("aos", "targetText: $targetText")
        targetText.length
    }

    // decompose caretIndex to 0


    Text(
        text = buildAnnotatedString {
            withStyle(style = SpanStyle(color = color)) {
                append(text.substring(0, caretIndex))
            }
            withStyle(style = SpanStyle(color = Color.Transparent)) {
                append(text.substring(caretIndex, text.length))
            }
        },
        style = style,
        modifier = modifier
    )
}

[Pablichjenkov]

I am on the phone now, will give it a try later. Sounds like it is tricky

[chanjungskim]

Now, i am trying this... but still the same problem.

@Composable
fun TypeAnimationText(
    text: String,
    speed: Int,
    modifier: Modifier = Modifier,
    style: TextStyle = TextStyle.Default,
    color: androidx.compose.ui.graphics.Color = Color.Black,
) {
    if(text.isEmpty()) return

    val animatable = remember { Animatable(0f) }

    LaunchedEffect(key1 = text) {
        animatable.animateTo(
            targetValue = text.length.toFloat(),
            animationSpec = tween(durationMillis = speed * text.length)
        )
    }

    val index = animatable.value.toInt()

    Text(
        text = buildAnnotatedString {
            withStyle(style = SpanStyle(color = color)) {
                append(text.substring(0, index.toInt()))
            }
            withStyle(style = SpanStyle(color = Color.Transparent)) {
                append(text.substring(index.toInt(), text.length))
            }
        },
        style = style,
        modifier = modifier
    )
}