In Jetpack Compose, how can you check to see if a screen has re-composed?

Question

I want to be able to set accessibility focus on a Text object, but only once it becomes visible (through mutable state boolean that is remembered). This means that the screen needs to finish re-composing before we can do anything else to it.

I've set up my code as follows:

    var isVisible by remember { mutableStateOf(false) }
    var focusRequester = remember { FocusRequester() }
    if (isVisible) {
        Text(text = "Text", modifier = Modifier
            .focusRequester(focusRequester)
            .focusable())
        focusRequester.requestFocus()
    }
    
    Button(onClick = { isVisible = true  }) {
        Text(text = "Make text appear and focused")
    }

This fails when we reach focusRequester.requestFocus() because the Text object isn't yet visible on the screen yet.

Is there a way to check if the screen has re-composed? So that I can do something like this:

    if (isVisible) {
        Text(text = "Text", modifier = Modifier
            .focusRequester(focusRequester)
            .focusable())
        if (isRecomposed) {
             focusRequester.requestFocus()
        }
    }

Answer 1

You can use LaunchedEffect which triggers its block when your Compoable enters composition.

@Preview
@Composable
private fun RecompositionSample() {

    var isVisible by remember { mutableStateOf(false) }
    val focusRequester = remember { FocusRequester() }

    Column {
        if (isVisible) {
            Text(
                text = "Text",
                modifier = Modifier
                    .focusRequester(focusRequester)
                    .focusable(true)
            )

            LaunchedEffect(Unit) {
                awaitFrame()
                focusRequester.requestFocus()
            }
        }

        Button(onClick = { isVisible = true }) {
            Text(text = "Make text appear and focused")
        }
    }
}