Set up Koin in modularized Android project for Compose previews

Question

I'm setting up an Android project, where I've separated the code into different modules to have a bit of a cleaner structure. The modules are presentation, domain, data, di and app. I am including a diagram of the dependencies between them.

When I write a new screen using Compose in the presentation layer, I am including a preview. Of course, these screens need a viewmodel, and since Compose previews do not start the application, Koin is not running to inject this. Thus, the preview fails to inflate.

Koin provides a solution for this, allowing you to run it in the preview with whatever modules you want, so you can include a fake/dummy one if you want to. It looks something like this:

@Preview
@Composable
fun ConnectAccountScreenPreview() {
    KoinApplicationPreview(application = { modules(onboardingModule) }) {
        ConnectAccountScreen(onNavigateBack = {}, onNavigateToNext = {})
    }
}

The issue I have with this is that I cannot create a fully fake module in the presentation layer, because it can't see the data layer, so the implementation of the repositories and the datasources are not available.

I could of course create a fake module in the DI layer, or use the real one, but the presentation layer has no visibility of the DI layer, and I cannot reference it, because it would create a circular dependency.

What is the cleanest way to solve this? Does my modularization setup just suck? Should I get rid of the previews? Can I include a fake module or a dependency that I'm not thinking of? If you need any further code to assist, just let me know. Thanks!

Gabe Sechan · Accepted Answer · 2025-09-19 13:18:01Z

2

The usual way to do this is to remove the need for the viewmodel to preview.

@Composable 
fun MyComposable() {
   val viewModel = ....
   MyInnerComposable(viewModel.foo, viewModel.bar)
}

@Composable
private fun MyInnerComposable(val foo: String, val bar: String) {
   //actual implementation
}

@Preview
fun MyPreview() {
    MyInnerComposable("my foo value", "my bar value")
}

There you remove the dependency on the View Model from the actual test. This also makes it easier to write unit tests for your composable.

answered Sep 19 at 13:18

Gabe Sechan

94.7k9 gold badges92 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

binkypv Sep 19 at 13:21

If I need to call viewmodel methods from the composables (an action when tapping a button, for example), should I pass those as parameters to the inner composable as well? The list of parameters is going to be long then, since there's a tad of functionality there.

Gabe Sechan Sep 19 at 13:29

You can bundle them into a data class if you prefer, to reduce the number. You'll need to pass something in for a function call, but it doesn't need to be the actual function (Previews are rarely functional, so a noop would be enough)

binkypv Sep 22 at 6:49

Alright, got it. I don't know why I thought it would be enough not to pass the viewmodel as a parameter, when what you explained is the state hoisting I was supposed to do. Thanks a lot for the small example, it really helped, appreciate it a lot.

Collectives™ on Stack Overflow

Set up Koin in modularized Android project for Compose previews

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related