How can I use in a Composable the same instance of...

# compose

[Nat Strangerweather]

How can I use in a Composable the same instance of a viewModel that I have in my MainActivity?

[Nat Strangerweather]

I use the viewModel in my MainActivity like this:

private val mainViewModel: MainViewModel by viewModels()

and in my Composable like this:

val mainViewModel: MainViewModel = viewModel()

This works as long as I do not put my Composable in the Navigation Graph. I assume a new instance of my viewModel is created in the Navigation process. I would need to keep the same instance of my MainActivity viewModel in my Composable.

[Zaki Shaikh]

Remove viewModel() and pass it to navHost and from navHost to your Composable

[Nat Strangerweather]

Thanks but how do I pass it to navHost?

[Zaki Shaikh]

You navHost is probably in mainActivity so pass it from there

[Nat Strangerweather]

Here is my NavGraph:

@Composable
fun Navigation() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = Routes.VERIFY_REMOTE_SCREEN
    ) {
        composable(Routes.VERIFY_REMOTE_SCREEN) {
            VerifyRemoteApp(
                onNavigate = {
                    navController.navigate(it.route)
                }
            )
        }
        composable(Routes.ADDRESS_LIST) {
            AddressListScreen(
                onNavigate = {
                    navController.navigate(it.route)
                }
            )
        }
        composable(
            route = Routes.ADD_EDIT_ADDRESS + "?addressId={addressId}",
            arguments = listOf(
                navArgument(name = "addressId") {
                    type = NavType.IntType
                    defaultValue = -1
                }
            )
        ) {
            AddEditAddressScreen(onPopBackStack = {
                navController.popBackStack()
            }
            )
        }
    }
}

And I get to it with this:

setContent {
            MaterialTheme {
                Navigation()
            }
        }

This is in my MainActivity. Basically I need to pass the viewModel from MainActivity to VerifyRemoteApp.

[Zaki Shaikh]

do like this

fun Navigation(viewModel: MainViewModel) {
         //your nav host code
}

[Zaki Shaikh]

in your main activity

setContent {
            MaterialTheme {
                Navigation(mainViewModel)
            }
}

[Zaki Shaikh]

now you have viewModel in your navigation composable you can pass it to any screen.

[Nat Strangerweather]

OK, I get it, thanks for this!

[Mini]

While that might work I think it could become quite bloated
I believe the reason you get a new viewmodel instance as soon as you put it inside a navigation destination is because those are `ViewModelStoreOwner`s and provide themself as a CompositionLocal LocalViewModelStoreOwner, which is used as the default argument in viewModel()

You should be able to pass the activity as the ViewModelStoreOwner to the viewModel() function instead to get the behaviour you want, something along the lines of

= viewModel(
    viewModelStoreOwner = context.getActivity() as ViewModelStoreOwner
)

[Zaki Shaikh]

@Mini thank you for sharing this idea I would follow this practice but I have found that it can be done like this as well

val mainViewModel = LocalViewModelStoreOwner.current?.let {
        viewModel<MainViewModel>(viewModelStoreOwner = it)
}