kotlinandroid-jetpack-compose

How to resolve ClickableText deprecation related to LinkAnnotation in Jetpack Compose?


I have the following component in compose:

private const val GROUP_NAME_TAG = "groupName"

@Composable
fun ExpenseHeaderGroupWithDateText(
    modifier: Modifier = Modifier,
    date: ShimmerInformation<String>,
    groupName: String,
    groupNameClick: () -> Unit,
) {
    date.ToContent(
        loadingModifier = modifier
            .height(15.dp)
            .width(50.dp),
    ) { safeDate ->
        val annotatedText = buildAnnotatedString {
            withStyle(
                style = SpanStyle(
                    color = Black300,
                    fontSize = 14.sp,
                    fontWeight = FontWeight.W400,
                )
            ) {
                append("$safeDate ${stringResource(id = R.string.in_connector)} ")
            }
            pushStringAnnotation(
                tag = GROUP_NAME_TAG,
                annotation = groupName
            )
            withStyle(
                style = SpanStyle(
                    color = Black300,
                    fontSize = 14.sp,
                    fontWeight = FontWeight.W400,
                    textDecoration = TextDecoration.Underline
                )
            ) {
                append(groupName)
            }
            pop()
        }
        ClickableText(
            modifier = modifier,
            text = annotatedText,
            overflow = TextOverflow.Ellipsis,
            maxLines = 1,
            onClick = { offset ->
                annotatedText.getStringAnnotations(
                    tag = GROUP_NAME_TAG,
                    start = offset,
                    end = offset
                ).firstOrNull()?.let { _ ->
                    groupNameClick()
                }
            },
        )
    }
}

I'm reciving the following warning about my ClickableText composable: Use Text or BasicText and pass an AnnotatedString that contains a LinkAnnotation

I have already tried with Text and BasicText but I didn't find a parameter to put this LinkAnnotation.


Solution

  • I changed the ClickableText for the following (it works):

    Text(
        modifier = modifier.clickable {
            // Get the annotation where the click occurred
            val annotation = annotatedText.getStringAnnotations(
                tag = GROUP_NAME_TAG,
                start = 0,
                end = annotatedText.length
            ).firstOrNull()
    
            if (annotation != null) {
                groupNameClick()
            }
        },
        text = annotatedText,
        style = TextStyle.Default,
        overflow = TextOverflow.Ellipsis,
        maxLines = 1
    )
    

    My final code:

    @Composable
    fun ExpenseHeaderGroupWithDateText(
        modifier: Modifier = Modifier,
        date: ShimmerInformation<String>,
        groupName: String,
        groupNameClick: () -> Unit,
    ) {
        date.ToContent(
            loadingModifier = modifier
                .height(15.dp)
                .width(50.dp),
        ) { safeDate ->
            val annotatedText = buildAnnotatedString {
                withStyle(
                    style = SpanStyle(
                        fontSize = 14.sp,
                        fontWeight = FontWeight.W400,
                    )
                ) {
                    append("$safeDate ${stringResource(id = R.string.in_connector)} ")
                }
                pushStringAnnotation(
                    tag = GROUP_NAME_TAG,
                    annotation = groupName
                )
                withStyle(
                    style = SpanStyle(
                        fontSize = 14.sp,
                        fontWeight = FontWeight.W400,
                        textDecoration = TextDecoration.Underline
                    )
                ) {
                    append(groupName)
                }
                pop()
            }
    
            Text(
                modifier = modifier.clickable {
                    // Get the annotation where the click occurred
                    val annotation = annotatedText.getStringAnnotations(
                        tag = GROUP_NAME_TAG,
                        start = 0,
                        end = annotatedText.length
                    ).firstOrNull()
    
                    if (annotation != null) {
                        groupNameClick()
                    }
                },
                text = annotatedText,
                style = TextStyle.Default,
                overflow = TextOverflow.Ellipsis,
                maxLines = 1
            )
        }
    }