'Jetpack compose file manager transition

I have a composable in my app that can render the contents of a directory:

    EntriesListing(
        directoryListing,
        renderUpButton = uiState.value.directory != Path.Empty,
        navigateUp = {
            uiState.value = UiState(
                lastDirectory = uiState.value.directory,
                directory = uiState.value.directory.parent(),
            )
        },
        navigateDown = {
            uiState.value = UiState(
                uiState.value.dirStack + listOf(uiState.value.directory.join(it.name)!!),
                lastDirectory = uiState.value.directory,
                directory = uiState.value.directory.join(it.name),
            )
        },
        selectNote = {

        },
    )

This view works as expected. Now I want to animate this view when the user selects a directory or goes to the parent directory. I tried a Box with two AnimatedContents:

    Box {
        key(uiState.value.lastDirectory) {
            AnimatedVisibility(visible = false) {
                DirView(uiState, uiState.value.lastDirectory)
            }
        }
        key(uiState.value.directory) {
            AnimatedVisibility(visible = true) {
                DirView(uiState, uiState.value.directory)
            }
        }
    }

But it's not working. Only the current directory content is displayed without any transitions. How do I implement that?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source