Backhandler not working in jetpack compose

Question

Hey I am using BackHandler from this stackoverflow. When I am pressing back button it's not working. Can someone guide me on this.

ResultScreen.kt

@Composable
fun ResultScreen(navController: NavHostController, nearestResultList: List<NearestResult>?) {
    SportsResultTheme {
        MainScaffold {
            BackHandler {
                navController.popBackStack()
            }
            LazyColumn {
                if (nearestResultList != null) {
                    items(nearestResultList) { nearestResult ->
                        Text(
                            text = nearestResult.event
                        )
                    }
                }
            }
        }
    }
}

NavigationGraph.kt

@Composable
internal fun NavigationGraph() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = ScreenRoute.Home.route) {
        composable(ScreenRoute.Home.route) {
            SetupMainActivityView { nearestResult ->
                val nearestResultJson = Uri.encode(Json.encodeToString(nearestResult))
                navController.navigate(ScreenRoute.Result.route + "/$nearestResultJson")
            }
        }

        composable(
            ScreenRoute.Result.route + "/{$NEAREST_RESULT_JSON}",
            arguments = listOf(
                navArgument(NEAREST_RESULT_JSON) { type = NearestResultParamType() }
            )
        ) { backStackEntry ->
            ResultScreen(navController, backStackEntry.arguments?.getParcelableArrayList(NEAREST_RESULT_JSON))
        }
    }
}

If you want to see more please visit my repository.

UPDATE

You can see my video link. Anyone know when I back press why my scren flicks ?

UPDATE 2

I added splash screen in my navigation

@Composable
internal fun NavigationGraph() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = ScreenRoute.Splash.route) {

        composable(route = ScreenRoute.Splash.route) {
            SplashScreen(navController = navController)
        }

        composable(ScreenRoute.Home.route) {
            SetupMainActivityView { nearestResult ->
                val nearestResultJson = Uri.encode(Json.encodeToString(nearestResult))
                navController.navigate(ScreenRoute.Result.route + "/$nearestResultJson") {
                    popUpTo(navController.graph.findStartDestination().id) {
                        saveState = true
                    }
                    launchSingleTop = true
                    restoreState = true
                }
            }
        }

        composable(
            ScreenRoute.Result.route + "/{$NEAREST_RESULT_JSON}",
            arguments = listOf(
                navArgument(NEAREST_RESULT_JSON) { type = NearestResultParamType() }
            )
        ) { backStackEntry ->
            ResultScreen(navController, backStackEntry.arguments?.getParcelableArrayList(NEAREST_RESULT_JSON))
        }
    }
}

UPDATE 3

navController.navigate(ScreenRoute.Result.route + "/$nearestResultJson") {
                    popUpTo(ScreenRoute.Home.route) {
                        saveState = true
                    }
                    launchSingleTop = true
                    restoreState = true
                }

Back is not working when I added splash screen

UPDATE 4

@Composable
internal fun NavigationGraph() {
    val navController = rememberNavController()
    var home by remember {
        mutableStateOf<String?>(null)
    }
    NavHost(navController = navController, startDestination = home ?: ScreenRoute.Splash.route) {

        composable(route = ScreenRoute.Splash.route) {
            home = ScreenRoute.Home.route
            SplashScreen(navController = navController)
        }

        composable(ScreenRoute.Home.route) {
            SetupMainActivityView { nearestResult ->
                val nearestResultJson = Uri.encode(Json.encodeToString(nearestResult))
                navController.navigate(ScreenRoute.Result.route + "/$nearestResultJson") {
                    popUpTo(navController.graph.findStartDestination().id) {
                        saveState = true
                    }
                    launchSingleTop = true
                    restoreState = true
                }
            }
        }

        composable(
            ScreenRoute.Result.route + "/{$NEAREST_RESULT_JSON}",
            arguments = listOf(
                navArgument(NEAREST_RESULT_JSON) { type = NearestResultParamType() }
            )
        ) { backStackEntry ->
            ResultScreen(navController, backStackEntry.arguments?.getParcelableArrayList(NEAREST_RESULT_JSON))
        }
    }
}

My splash screen not working when initial application load. It direct open my home screen after going to result screen back button again not working.

Answer 1

try navController.navigateUp() probably the stack has many entries, try using singleton navigation to that stack is not full of undesired entries like

navController.navigate("destination") {
                    popUpTo(navController.graph.findStartDestination().id) {
                        saveState = true
                    }
                    launchSingleTop = true
                    restoreState = true
                }

try to use dynamic start destination like

var home by remember {
        mutableStateOf<String?>(null)
    }
NavHost(
        navController = navController,
        startDestination = home?:"splash_destination",
        modifier = modifier
    ) {
composable("splash) {
            home = "home_destination"
          ....
        }
.....
}

then go with previous approach