Rapid clicks navigation problem with bottom sheet in Jetpack Compose

676 views Asked by At

I have a button from which on click I navigate to bottom sheet, the problem come when I click this button multiple times very fast, I am using accompanist library for navigation, as you see below, here is my ModalBottomSheetLayout and Scaffold

val navController = rememberAnimatedNavController()
val bottomSheetNavigator = rememberFullScreenBottomSheetNavigator()
navController.navigatorProvider += bottomSheetNavigator

ModalBottomSheetLayout(
    bottomSheetNavigator = bottomSheetNavigator
) {
    Scaffold(
        scaffoldState = rememberScaffoldState(snackbarHostState = snackState),
        content = { paddingValues ->
            AnimatedNavHost(
                navController = navController,
                startDestination = "bottomsheet",
            ) {
                bottomSheet("bottomsheet") {
                    CancelOrderBottomSheetUi()
                }

            }
        },
        bottomBar = {
            BuildBottomBar(navController)
        }
    )
}

And this is my bottom sheet navigator

fun rememberFullScreenBottomSheetNavigator(
    animationSpec: AnimationSpec<Float> = SwipeableDefaults.AnimationSpec,
    skipHalfExpanded: Boolean = true,
): BottomSheetNavigator {
    val sheetState = rememberModalBottomSheetState(
        ModalBottomSheetValue.Hidden,
        animationSpec
    )

    if (skipHalfExpanded) {
        LaunchedEffect(sheetState) {
            snapshotFlow { sheetState.isAnimationRunning }
                .collect {
                    with(sheetState) {
                        val isOpening =
                            currentValue == ModalBottomSheetValue.Hidden && targetValue == ModalBottomSheetValue.HalfExpanded
                        val isClosing =
                            currentValue == ModalBottomSheetValue.Expanded && targetValue == ModalBottomSheetValue.HalfExpanded
                        when {
                            isOpening -> animateTo(ModalBottomSheetValue.Expanded)
                            isClosing -> animateTo(ModalBottomSheetValue.Hidden)
                        }
                    }
                }
        }
    }

    return remember(sheetState) {
        BottomSheetNavigator(sheetState = sheetState)
    }
}

I have one screen where there is button, and onClick of this button I want to navigate from screen 1(where the button is clicked) to screen 2(where bottom sheet is) both of this screens have different viewModels.

This is where I click cancel button

onCancel = {
    viewModel.cancelButton()
}

and in VM

fun cancelButton() {
    viewModelScope.launch {
        navigationDispatcher.navigateTo("bottomsheet")
    }
}

So the problem is just when I spam button very fast the bottom sheet appears almost on full size and then it collapse again, if I do not spam it, it appears like normal bottom sheet and I cannot click the button on background again, this bug happens only if I spam it.

PS: I tried with button bouncer, with some delays with if cycle and so on, but noting of this worked, I think I am missing something essential for navigation itself.

0

There are 0 answers