How to share a viewmodel between two or more Jetpack composables inside a Compose NavGraph?

Question

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 and the for the NavGraph, we are using compose navigation.

Also I have to mention that DI is being handled by Koin.

val navController = rememberNavController()

NavHost(navController) {
    navigation(
        startDestination = "phone_number_screen",
        route = "auth"
    ) {
        composable(route = "phone_number_screen") {
            // Get's a new instance of AuthViewModel
            PhoneNumberScreen(viewModel = getViewModel<AuthViewModel>())
        }

        composable(route = "otp_screen") {
            // Get's a new instance of AuthViewModel
            OTPScreen(viewModel = getViewModel<AuthViewModel>())
        }
    }
}

So how can we share the same viewmodel among two or more composables in a Jetpack compose NavGraph?

Phil Dukhov · Accepted Answer · 2021-09-11T07:55:11.027

You can to pass your top viewModelStoreOwner to each destination

directly passing to .viewModel() call, composable("first") in my example
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:

@Composable
fun SecondScreen() {
    val model = viewModel<SharedModel>()
    SomeView()
}

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

Does SaveStateHandle do the same job? So we can use the ViewModel in the last saved state in another screen ?? — EliodeBeirut, Dec 07 '22 at 11:50
@EliodeBeirut did you mean `SavedStateHandle`? it only contains navigation item bundle, it doesn't control the current screen. Not sure how it can do the same job — Phil Dukhov, Dec 08 '22 at 10:07

Rafiul · Answer 2 · 2021-10-20T14:25:01.023

12

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

@Composable
fun MyApp() {
    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

edited Oct 20 '21 at 14:25

answered Aug 26 '21 at 18:41

Rafiul

1,560
7
19

2

This is the recommended method by Google and it works perfectly. Just take this into consideration "Any ViewModel objects created in this way live until the associated NavHost and its ViewModelStore are cleared or until the navigation graph is popped from the back stack." – Nasser Ghodsian Jan 09 '22 at 21:49
@Rafiul, how can apply for this one https://stackoverflow.com/q/71942247/13614484? – Apr 20 '22 at 19:10

score 0 · Answer 3 · answered Oct 12 '22 at 18:31

0

Here is an other way with Koin.

It strictly do the same than the validated answer but simpler to write. It will have exactly the same viewModelStoreOwner without having to write it explicitly. Please tell me if i'm wrong.

val navController = rememberNavController()

val sharedViewModel = getViewModel()

NavHost(navController = navController, startDestination = "first") {
    composable("first") {
        // You can use sharedViewModel
    }
    composable("second") {
        // You can use sharedViewModel
    }
}

answered Oct 12 '22 at 18:31

DamienL

577
1
5
14

1

I think the difference to the accepted answer is that with Phil Dukhov's answer, you can get the same viewmodel instance directly within every composable. With your approach, you need to pass the viewmodel instance into the composable as a parameter. The latter is not recommended from the [official documentation](https://developer.android.com/jetpack/compose/interop/compose-in-existing-arch): `You should never pass down ViewModel instances to other composables, pass only the data they need and functions that perform the required logic as parameters.` – BenjyTec Jan 06 '23 at 12:29

How to share a viewmodel between two or more Jetpack composables inside a Compose NavGraph?

3 Answers3

Linked