(Unrelated) How to create a simplest navigation

[omkar-tenkale]

So i'm working on a project where I'm building a compose navigator which gets composables from outside Composable code For this purpose the implementation is kept simple:

Maintain a list of objects with a @Composable Content( ) function and loop over it in a Box composable. However it's buggy and removing a layer doesn't remove it from UI for some reasons.

I was looking into how other compose navigation libraries do it but none fit the purpose so I was hoping if you could help me improve this implementation

Here's all the code

public class UI {
    private val layers = mutableStateListOf<Layer>()

    @Composable
    public fun drawLayers() {
        remember { layers }.forEach {
            it.draw()
        }
    }

    public fun draw(content: @Composable (Modifier) -> Unit): Layer {
        return Layer(content) {
            layers.remove(it)
        }.also {
            layers.add(it)
        }
    }

    public class Layer(public val content: @Composable (Modifier) -> Unit, internal val onDestroy: (Layer)->Unit) {

        @Composable
        public fun draw() {
            content(Modifier.fillMaxSize())
        }

        public fun destroy() {
            onDestroy(this)
        }
    }
}

I use it like this, I can add multiple layers reacting to app state this way

val ui = UI()

override fun onCreateView(){
    return ComposeView(this).also { setContent { ui.drawLayers() } }
  }
  
 fun onSomethingHappened(){
    val layer = ui.draw{
      // composable content
    }
 }

override fun onDestroy(){
    layer.destroy()
}

[omkar-tenkale]

I removed wrapping layers in remember{} and it works ok, but the whole solution looks hacky and maybe has performance issues as well, can you comment on this?

[roudikk]

Sorry I don't quite understand what you're looking to do here? Are you trying to create your own navigation model? In Guia, you can have a list of your navigation entries, which can be added to a Navigator's back stack. Then using that navigator you can render the state of those entries. You would be using the navigator itself to remove/add items to the list.

Check out the express lore in the readme.

[omkar-tenkale]

im not trying to use guia in any way, just looking for general advice

[roudikk]

Oh, I see, sorry I am not sure of your problem and cannot help you outside the context of this library unfortunately. You are welcome to check out the code, especially the containers being used, there's quite a few things to do in Compose to make sure the "Screens" behave properly, remembering a saved state, lifecycle, etc.