How To Share A Viewmodel Between Two Or More Jetpack Composables Inside A Compose Navgraph?

Consider this example. For authentication, we'll be using 2 screens - one screen to enter phone number and the other to enter OTP. Both these screens were made in Jetpack Compose a

Solution 1:

You can to pass your top viewModelStoreOwner to each destination

1. directly passing to .viewModel() call, composable("first") in my example
2. overriding LocalViewModelStoreOwner for the whole content, so each composable inside CompositionLocalProvider will have access to the same view models, composable("second") in my example

val viewModelStoreOwner = checkNotNull(LocalViewModelStoreOwner.current) {
    "No ViewModelStoreOwner was provided via LocalViewModelStoreOwner"
}
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "first") {
    composable("first") {
        val model = viewModel<SharedModel>(viewModelStoreOwner = viewModelStoreOwner)
    }
    composable("second") {
        CompositionLocalProvider(
            LocalViewModelStoreOwner provides viewModelStoreOwner
        ) {
            SecondScreen()
        }
    }
}

In the second case, you can get your model at any level of the composition tree, which is inside the CompositionLocalProvider:

@ComposablefunSecondScreen() {
    val model = viewModel<SharedModel>()
    SomeView()
}

@ComposablefunSomeView() {
    val model = viewModel<SharedModel>()
}

Solution 2:

Using Hilt you could do something like the below. But since you are using Koin I don't know the way of Koin yet.

@ComposablefunMyApp() {
    NavHost(navController, startDestination = startRoute) {
        navigation(startDestination = innerStartRoute, route = "Parent") {
            // ...
            composable("exampleWithRoute") { backStackEntry ->
                val parentEntry = remember {
                  navController.getBackStackEntry("Parent")
                }
                val parentViewModel = hiltViewModel<ParentViewModel>(
                  parentEntry
                )
                ExampleWithRouteScreen(parentViewModel)
            }
        }
    }
}

Official doc: https://developer.android.com/jetpack/compose/libraries#hilt