Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bottom sheet route #145

Open
amv-bamboo opened this issue Sep 25, 2023 · 6 comments
Open

Bottom sheet route #145

amv-bamboo opened this issue Sep 25, 2023 · 6 comments

Comments

@amv-bamboo
Copy link

amv-bamboo commented Sep 25, 2023

I'm trying to implement bottom sheet destination similar to Accompanist with Precompose, but it seems that I cannot extend Navigator, and floating destination doesn't work properly. Is it possible to implement bottom sheet route on the app side, or do I need to create a PR for the library?

Before switching to multiplatform, I used separate NavHost inside ModalBottomSheet. But now it seems that that there can be only one NavHost

@Tlaster
Copy link
Owner

Tlaster commented Sep 26, 2023

Is it possible to implement bottom sheet route on the app side

Theoretically, yes. You can have an empty floating route and wrap your NavHost with ModalBottomSheetLayout, when Navigator.currentEntry is your bottom sheet route you can show the bottom sheet.
A built in should be better. I'm considering making Navigator extendable, and not only being used in Compose(maybe SwiftUI?)

@FunkyMuse
Copy link

Is there any update regarding this?

@amv-bamboo
Copy link
Author

amv-bamboo commented Dec 1, 2023

Turns out that Compose Multiplatform didn't have ModalBottomSheet then, so I did a workaround with BottomSheetScaffold and toggling its bottom sheet state instead of navigating to destination

@FunkyMuse
Copy link

Turns out that Compose Multiplatform doesn't have ModalBottomSheet for now, so I did a workaround with BottomSheetScaffold and toggling its bottom sheet state instead of navigating to destination

It does have Modal bottom sheet

@amv-bamboo
Copy link
Author

Oh, maybe it's there now, but I couldn't find it when I opened the issue

@bartwell
Copy link

My current solution just is:

    fun RouteBuilder.bottomSheet(
        navigator: Navigator,
        route: String,
        content: @Composable (BackStackEntry) -> Unit,
    ) = dialog(route) { backStackEntry ->
        val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
        val scope = rememberCoroutineScope()
        ModalBottomSheet(
            sheetState = sheetState,
            onDismissRequest = { scope.launch { navigator.popBackStack() } },
            dragHandle = null,
            content = { content(backStackEntry) },
        )
    }

It can be used in navigation graph like:

bottomSheet(navigator, routeToSheet()) { backStackEntry ->
            SomeSheet(...)
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants