Are templates capable of nested scrolling within a bottom sheet?

[CalamityDeadshot]

We are trying to implement Giphy into our messaging app, having very limited success so far. The main issue is that templates (GiphyDialogFragment, GiphyDialogView) refuse to play nicely with established gesture guidelines, which is even present in demos (DemoActivity and ComposeActivity) - bottom sheet is scrolled independently of the actual content, so users cannot fling the sheet closed or carry a swipe from content list into the bottom sheet. What makes our experience even worse is our app is written entirely in Compose, and material3 bottom sheet just consumes all drag deltas, leaving nothing for GiphyDialogView. There is a solution for this, which we tried with no success: This is an AndroidView implementation of GiphyDialogView.

@Composable
fun GiphySelectionDialog(
    modifier: Modifier = Modifier,
    onMediaSelected: (Media, GPHContentType) -> Unit
) {
    AndroidView(
        modifier = modifier
            .padding(
                top = WindowInsets.statusBars
                    .asPaddingValues()
                    .calculateTopPadding()
            ),
        factory = {
            Giphy.configure(it, BuildConfig.GIPHY_API_KEY, true)
            GiphyDialogView(it).apply {
                setup(
                    settings = GPHSettings(
                        theme = GPHTheme.Light,
                        mediaTypeConfig = arrayOf(
                            GPHContentType.gif,
                            GPHContentType.sticker
                        )
                    )
                )
                listener = object : GiphyDialogView.Listener {
                    override fun didSearchTerm(term: String) {}

                    override fun onClosed(selectedContentType: GPHContentType) {}

                    override fun onFocusSearch() {}

                    override fun onGifSelected(
                        media: Media,
                        searchTerm: String?,
                        selectedContentType: GPHContentType
                    ) = onMediaSelected(media, selectedContentType)
                }
            }
        }
    )
}

And this is what we tried:

@Composable
fun GiphySelectionBottomSheet(
    sheetState: SheetState = rememberSheetState(),
    onDismissRequest: () -> Unit,
    onMediaSelected: (Media, GPHContentType) -> Unit
) {
    ModalBottomSheet(
        sheetState = sheetState,
        onDismissRequest = onDismissRequest,
        content = {
            Box(
                modifier = Modifier
                    .nestedScroll(rememberNestedScrollInteropConnection())
            ) {
                GiphySelectionDialog(
                    modifier = Modifier
                        .fillMaxSize()
                        .verticalScroll(rememberScrollState()),
                    onMediaSelected = onMediaSelected
                )
            }
        },
        dragHandle = {}
    )
}

Which results in gifs not even showing up:

In the meantime we're seeing the following logs. As they are present regardless of content showing up or not, this might be unrelated.

id unknown gifRecyclerView
id unknown gifMediaSelector
id unknown gifSearchBarContainer

We can't even inherit from GiphyDialogView because it is final.

At this time we are unwilling to ship a solution presented in ComposeActivity since it also doesn't respect gesture guidelines, but maybe you fine folks, being most familiar with this SDK, have got any ideas on how it can be achieved in terms of templates, without going full custom?

[ALexanderLonsky]

hey @CalamityDeadshot, Yes, we have distinguished the swipe gestures between the content and the dialog, so implementing what you're asking for won't be straightforward. Both our Demo and Compose examples have a handlebar that users can use to swipe the dialog/view down.

We might be able to expose a drag offset as a callback for the GiphyDialogView, allowing you to utilize it in your Compose application, however, I'll need to look into this more.

So far the easiest way is to go with the custom solution.

[CalamityDeadshot]

Thanks for the response. I would appreciate if you would keep me posted on the drag offset callback

[ALexanderLonsky]

Hey @CalamityDeadshot, Unfortunately, due to our current SDK setup, we can't support this request now. However, I'll pass this on to my team and keep the issue open.