Hello, has anyone created expandable content insid...

# compose

[Huan]

Hello, has anyone created expandable content inside a LazyColumn with reverseLayout = true? 🧵

[Huan]

I have the following code, which expands/contract the Text when user clicks in Show More/Less

@SuppressWarnings("kotlin:S100", "kotlin:S107")
@Composable
internal fun ExpandableText(
    text: String,
    messageId: Long,
    expandedStateMap: Map<Long, Boolean>,
    modifier: Modifier = Modifier,
    collapsedMaxChars: Int = MAX_CHARACTERS_ALLOWED,
    onExpandedText: (Boolean, Long,Int) -> Unit,
    onHeightChange: (Int) -> Unit
) {
    var isExpanded by remember { mutableStateOf(expandedStateMap[messageId] ?: false) }
    val truncatedText = if (text.length > collapsedMaxChars && !isExpanded) {
        text.take(collapsedMaxChars) + ELLIPSIS
    } else {
        text
    }
    var textSize by remember { mutableStateOf(IntSize.Zero) }
        Column{
            Text(
                text = truncatedText,
                color = textColor(),
                style = MaterialTheme.typography.bodyLarge,
                 modifier = Modifier.onGloballyPositioned { coordinates ->
                    textSize = coordinates.size
                }
            )
            if (text.length > collapsedMaxChars) {
                val label = if (isExpanded) {
                    stringResource(id = R.string.label_show_less)
                } else {
                    stringResource(id = R.string.label_show_more)
                }.uppercase()
                    Text(
                        text = label,
                        modifier = Modifier
                            .padding(top = MaterialTheme.spacing.size2)
                            .clickable {
                                Log.e("ExpandableText", "textSize: $textSize")
                                isExpanded = !isExpanded
                                onExpandedText(isExpanded, messageId,textSize.height)
                            },
                        style = MaterialTheme.typography.labelMedium
                    )
                }
    }
}

I have implemented an expandable text component that truncates long texts and provides "Show More/Less" options to expand or contract the text. However, because we are using reverseLayout = true (I can't change that), the items expand upwards towards the top of the screen instead of downwards. I would like to keep the item in its original position, similar to how WhatsApp handles it, or at least have the items move downwards instead of upwards.