AnimatedVisibility does not work in Compose

Question

My code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var visibile by remember {
                mutableStateOf(false)
            }
            Column(modifier = Modifier.fillMaxSize()) {
                Text(text = if (visibile) "visible" else "hide", modifier = Modifier.clickable {
                    visibile = !visibile
                })
                if (visibile) {
                    AnimatedVisibility(
                        visible = visibile,
                        enter = slideInHorizontally { fullWidth ->
                            fullWidth
                        },
                        exit = slideOutHorizontally { fullWidth ->
                            fullWidth
                        }
                    ) {
                        Box(modifier = Modifier.fillMaxSize()) {

                            var textState by remember { mutableStateOf(TextFieldValue("Hello World")) }
                            BasicTextField(value = textState, onValueChange = {
                                textState = it
                            })
                        }

                    }

                } else {
                    AnimatedVisibility(
                        visible = !visibile,
                        enter = slideInHorizontally { fullWidth ->
                            fullWidth
                        },
                        exit = slideOutHorizontally { fullWidth ->
                            fullWidth
                        }
                    ) {
                        Box(modifier = Modifier.fillMaxSize()) {

                            Image(
                                painter = painterResource(id = R.drawable.ic_test),
                                contentDescription = null
                            )
                        }

                    }
                }

            }
        }
    }
}

When the BasicTextField is displayed, I want it to enter from the right side of the screen; when the Image is displayed, I want it to enter from the right side of the screen.

But, in this code, the expected effect is not appearing at all.

How can I achieve it?

Answer 1

You need to remove the if (visible) { ... } else { ... } so that both the AnimatedVisibility(...) statements are executed on each recomposition. The visibility of the content is already being controlled by the visibile=... parameter to each of them.