How to prevent re-render of previous screen when navigating back – Jetpack Compose?

Issue

I have two screens – MapScreen(Google Map SDK) and Search Screen.

I navigate from MapScreen to SearchScreen by pressing the "Search" button on the top.

When I am on SearchScreen(White screen) – I press the back button to navigate back to Map Screen.

When we navigate back, the whole MapScreen(especially Google Map) re-renders, which creates delays in navigating back.

How do I prevent the Map Screen from re-rendering when navigating back?

My code for navigation:

val navController = rememberNavController()
            NavHost(
                navController = navController,
                startDestination = Route.MAP
            ) {
                composable(Route.MAP) {
                    MapScreen(onNextClick = {
                        navController.navigate(Route.SEARCH)
                    })
                }
                composable(Route.SEARCH) {
                    SearchScreen()
                }
            }

Solution

There’s nothing you can do using NavController. You’re literally telling it to destroy one screen to go to the next one. So, when you go back, it has to re-render the 1st screen.

What you would have to do instead is show the search screen on top of the map screen (you can literally just display the SearchScreen composable on top of the MapScreen, or put it in a pop-up, bottom sheet, dialog, etc)

Edit:

Answered By – user496854

Answer Checked By – Robin (FlutterFixes Admin)