Need help with Preventing back gesture with a child slot component

[OsmanMusse]

Hi arkivanov, great library you've created. Just had a quick question if you don't mine. So I basically have a parent screen called PostDetail which has a child slot component integrated for displaying a bottom sheet modal. Alongside that the app I've setup such that it allows predictive back gesture IOS. The problem I'm facing is I don't know how to restrict the predictive back gesture when the child slot activates the modal, as I don't want to be able to dismiss the modal this way. Is there some way of only allowing the predictive back gesture to work when the modal is not showing.

PostDetailComponent

class PostDetailComponent( 
 private val postRepo: PostRepository,
 private val userRepo: UserRepository,
 val postID: Long,
 private val onBackPressed: () -> Unit,
 componentContext: ComponentContext){

private val modalNavigation = SlotNavigation<DialogConfig>()

var modal = childSlot(
    source = modalNavigation,
    serializer = DialogConfig.serializer(),
    handleBackButton = true
){ config, childComponentContext ->
    DefaultPagerModal(
        componentContext = childComponentContext,
        onDismissClicked = { dismissModal() }
    )
}

private val scope = coroutineScope(CoroutineScope(Dispatchers.Main).coroutineContext + SupervisorJob())

private val _state = MutableValue(PostDetailState())
val state: Value<PostDetailState> = _state

init {
    getPost(postID)
}

fun showPagerModal(){
    println("MODAL ACTIVATE CALLED ===")
    modalNavigation.activate(DialogConfig(""))
}

private fun dismissModal(){
    // delay required for modal to not interrupt animation when sliding down
    scope.launch {
        delay(500)
        modalNavigation.dismiss()
    }
}

 fun navigateBack() = onBackPressed()


@Serializable // kotlinx-serialization plugin must be applied
data class DialogConfig(
    val message: String,
)

class Factory(
    private val postRepo: PostRepository,
    private val userRepo: UserRepository
){
    fun create(
        componentContext: ComponentContext,
        postID: Long,
        onGoBack: () -> Unit
    ): PostDetailComponent = PostDetailComponent(
        componentContext = componentContext,
        postID =  postID,
        onBackPressed = onGoBack,
        postRepo = postRepo,
        userRepo = userRepo
    )
}}`

Child Slot Component

class DefaultPagerModal(
 private val componentContext: ComponentContext,
 private val onDismissClicked: () -> Unit): PagerModal, ComponentContext by componentContext {

 override fun onDismissModal() {
    println("MODAL DISMISS CALLED ===")
    onDismissClicked()
 }

}

Post Detail Screen

`

fun PostDetailScreen(component: PostDetailComponent) {

println("Post Detial Component == ${component.postID}")
val state by component.state.subscribeAsState()
val modalState by component.modal.subscribeAsState()
val postList = state.post?.postImgs

lateinit var modalComponent: DefaultPagerModal


val scope = rememberCoroutineScope()
var bottomSheetState = rememberCupertinoSheetState(presentationStyle = PresentationStyle.Fullscreen)
val verticalScroll = rememberScrollState()

modalState.child?.instance?.also {
    modalComponent = it
    scope.launch {
        bottomSheetState.show()
    }
}

  CupertinoBottomSheetScaffold(
    modifier = Modifier.fillMaxSize(),
    topBar = {
        CollapsingToolbar(
            collapsedBackgroundColor = Color(72, 134, 255),
            backgroundColor = Color.Transparent,
            toolbarHeight = toolbarHeight,
            toolbarOffset = toolbarOffsetHeightPx.value,
            onBackButtonPressed = { component.navigateBack() }
        )
    },
    scaffoldState = CupertinoBottomSheetScaffoldState(bottomSheetState),
    sheetSwipeEnabled = false,
    sheetDragHandle = null,
    sheetContent = {
        modalState.child?.instance?.also {
            PagerModal(
                onDismissClicked = {            
                    modalComponent.onDismissModal()
                     scope.launch {
                         bottomSheetState.hide()
                     }
                },
                listOfImages = postList
            )
        }
    }
)

`

[arkivanov]

Do you want to completely disable the back button or only the predictive back gesture? Can you attach a video of how does it work now (i.e. without disabling)?

[OsmanMusse]

Yes sure, regarding the gesture being disabled it actually is in that the sliding is showing, but I actually do slide from the side is perform the predictive gesture. Another issue is the PostDetailScreen freezes but some how allows the predictive back gesture Here's the accurate video https://github.com/user-attachments/assets/7a54b679-b816-45c0-94fe-283a68b9cbd9

[arkivanov]

This is something I would like to check. A reproduce would be helpful!

[OsmanMusse]

Sure I'm on it now 👍🏽

[arkivanov]

Thanks for the reproducer! After checking it, it looks like an issue with either the Cupertino widgets used inside PostDetailScreen, or with the code related to nested scrolling. The predictive back gesture gets disabled correctly because you have handleBackButton = true specified for the Child Slot. It looks like an issue with the modal widget itself.

I suggest to try reproducing the issue without Cupertino and/or with the pager. If not reproducible, then maybe file an issue in the Cupertino's repository. I couldn't try it myself because for some reason the IDE shows an internal error and the syntax highlighting is disabled (only for this project).

[OsmanMusse]

Okay thanks for the help arkivanov. I really appreciate it 👍🏽

[OsmanMusse]

Jus to follow up, I was able to disable the predictive back gesture by toggling on and off the BackCallback based on when the bottom sheet modal was activated or dismissed.

[arkivanov]

Yes, but the point is that it shouldn't be required. I tried with the main sample, handleBackButton = true for Child Slot disables the predictive back gesture.