4

enter image description here

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()
                }
            }
Biali
  • 103
  • 1
  • 6

1 Answers1

2

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:

user496854
  • 6,461
  • 10
  • 47
  • 84
  • Thank you so much for clarifying the nature of NavController! How would I put one screen on top of the other one? – Biali Sep 22 '22 at 02:42
  • it's not technically a "screen", they're both just composables -- so you can arrange them any way you like. You can put them both in a box, with Modifier.fillMaxSize(), and `SearchScreen` below the `MapScreen`, but only show the `SearchScreen` when you want it. – user496854 Sep 22 '22 at 03:23
  • Because of you, I have made a lot of progress! Thank you so much! – Biali Sep 22 '22 at 06:14