Jetpack Compose Preview not working when using Koin for Dependency Injection

Question

I want to use Jetpack Compose in my App. I am already using Koin for DI. Because I have a lot of convenience methods in my BaseFragment I want to inherit from it and build the corresponding view with compose.

Now the Problem is that when using DI in the BaseFragment and inheriting from it the preview of the composable wont be shown and following error Message appears:

and following exception is thrown:

java.lang.IllegalStateException: KoinApplication has not been started
    at org.koin.core.context.GlobalContext.get(GlobalContext.kt:36)
    at org.koin.java.KoinJavaComponent.getKoin(KoinJavaComponent.kt:122)
    at org.koin.java.KoinJavaComponent.get(KoinJavaComponent.kt:87)
    at org.koin.java.KoinJavaComponent.get$default(KoinJavaComponent.kt:81)
    at org.koin.java.KoinJavaComponent.get(KoinJavaComponent.kt)
    ...

My BaseFragment looks something like this

public abstract class BaseFragment {


    private final ActiveViewIdInteractor activeViewIdInteractor =
            new ActiveViewIdInteractor(KoinJavaComponent.get(ActiveViewIdService.class));
...

and my Fragment which inherits looks something like this

class ComposeDemoFragment: BaseFragment() {
   ...

   @Composable
    fun ComposeDemoFragmentContent() {
        Text(text = "Hello World",
            Modifier
                .fillMaxWidth()
                .background(Color.Cyan)
        )
    }

    @Preview
    @Composable
    private fun Preview() {
        ComposeDemoFragmentContent()
    }

If using the exact same preview in a Fragment which doesn't inherit from BaseFragment everything works fine. I already included the dependency for "Koin for Compose" and also tried using CoKoin. At this Point I don't know what to do with the error Message or if the error Message is even barely related to the actual Problem.

Is this a Bug or is there a way to bypass this error?

Answer 1

Your @Preview code is being run as-is by Android Studio, looking at your example there is nothing in your ComposeDemoFragmentContent() that is using Koin. However, I'm guessing this is just sample code.

In my app we inject koin components into our main PrimaryTheme{ } which used to break when used with @Preview, we got the same error as you're seeing.

One way around this is to provide a default value to the field being injected, and then put your koin code inside a check for LocalInspectionMode e.g.

val someField = remember { mutableStateOf("Default")}

if (!LocalInspectionMode.current) {
  // We're _not_ executing in an Android Studio Preview.

  // Use your injected Koin instance here e.g.
  val myUseCase: CustomUseCase = get()
  someField.value = myUseCase.getSomeValue()         
}

Text(
  text = someField.value
)

So your previews will use the default value, but your real app will use the koin injected value.

Answer 2

This happens because your @Preview function is inside your Activity. And you probably have an injected member there.

Move it to the root of the file, outside the activity class, and the preview will be rendered without errors.

Answer 3

Based on @Andrew's answer. I've created an extension to koin's getViewModel function.

@Composable
inline fun <reified T : ViewModel> getViewModel(
    qualifier: Qualifier? = null,
    viewModelStoreOwner: ViewModelStoreOwner = checkNotNull(LocalViewModelStoreOwner.current) {
        "No ViewModelStoreOwner was provided via LocalViewModelStoreOwner"
    },
    key: String? = null,
    extras: CreationExtras = defaultExtras(viewModelStoreOwner),
    noinline parameters: ParametersDefinition? = null,
    preview: Any
): T {
    if (LocalInspectionMode.current) {
        return preview as T
    }
    return koinViewModel(qualifier, viewModelStoreOwner, key, extras, getKoinScope(), parameters)
}

So you can provide a custom implementation for preview mode:

@Composable
fun MyComposable(viewModel: MyViewModel = getViewModel(preview = MyViewModelPreview())) { ... }

Answer 4

There is a fairly easy workaround for this at the current time of writing with the latest version of Koin.

If you just want to preview a composable with a single VM, use state hoisting and preview the composable that just depends on the state. I had a more complex scenario where I had composable within my screen that had it's own view model so this wasn't an option.

First, define a preview Koin module and create an instance of the view mode:

val previewModule = module {
    single { MyViewModel(SavedStateHandle(emptyMap()), get(), ...) }
    ...
}

Then, create your preview using KoinApplication and your preview module:

@Preview
@Composable
fun MyPreview() {
    // If you need Context
    val context = LocalContext.current

    KoinApplication(application = {
        // If you need Context
        androidContext(context)
        modules(my + other + modules + previewModule)
    }) {
        MyComposable()
    }
}

Unfortunately it doesn't work for multiple previews because you can only add KoinApplication once, but you can add a check for an existing Koin context (as KoinApplication does internally), such as this example which amends the above to create light and dark previews:

@Preview
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun MyPreview() {
    if (KoinPlatformTools.defaultContext().getOrNull() == null) {
        // If you need Context
        val context = LocalContext.current

        KoinApplication(application = {
            // If you need Context
            androidContext(context)
            modules(my + other + modules + previewModule)
        }) {
            MyComposable()
        }
    } else {
        MyComposable()
    }
}