PredictiveBackGesture slide animation not working trying to pop

[OsmanMusse]

Hello @arkivanov hope you're doing great. I've got an issue with the PredictiveBackGesture slide animation when I try to push a new screen it works, but when I try to slide it it won't allow me. It will only slide back when a button is clicked though.

Root Screen (App.kt)

fun App(rootComponent: RootComponent) {
val childStack = rootComponent.routerState

Children(
    stack = childStack,
    modifier = Modifier.fillMaxSize(),
    content = { child ->
        println("Child Created == ")
       when(val childCreated = child.instance){
           is RootComponent.RootChild.LandingRoot -> Unit
           is RootComponent.RootChild.MainRoot -> MainScreen(childCreated.mainComponent)
       }
    }

)}

Main Screen

 fun BottomNavigationView( component: HomeScreenComponent, scope: CoroutineScope,bottomSheetState:CupertinoSheetState) {

 NativeChildren(
     stack = component.fullScreenStack,
     modifier = Modifier.fillMaxSize(),
     animation = predictiveBackAnimation(
         backHandler = component.backHandler,
         onBack = {
             println("DO SOMETHING")
         }
     ),
     backDispatcher = component.backDispatcher
 ) {
     when(it.instance) {
          is HomeScreenComponent.FullScreenChild.None -> {
              CupertinoBottomSheetScaffold(
                  modifier = Modifier.fillMaxSize(),
                  scaffoldState = CupertinoBottomSheetScaffoldState(bottomSheetState),
                  bottomBar = {
                      val grayTitleColor = Color(158, 158, 158)
                      val grayIconColor = Color(190, 190, 190)
                      val primaryColor = Color(72, 134, 255)

                      val tabStack by component.tabStack.subscribeAsState()

                      CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
                          CupertinoNavigationBar(isTranslucent = false) {
                              TabComponent.Tab.values().forEach { specificTab ->
                                  val (title, icon) = when (specificTab) {
                                      TabComponent.Tab.Home -> "Home" to MR.images.home_icon_lineal
                                      TabComponent.Tab.Account -> "Account" to MR.images.account_icon
                                      TabComponent.Tab.Post -> "Post" to MR.images.camera_icon_linear
                                      TabComponent.Tab.Saved -> "Saved" to MR.images.favourite_icon
                                      TabComponent.Tab.Settings -> "Settings" to MR.images.setting_icon_linear
                                  }

                                  val bottomTabsOffset = when (specificTab) {
                                      TabComponent.Tab.Account, TabComponent.Tab.Post -> 4.dp
                                      TabComponent.Tab.Saved, TabComponent.Tab.Settings -> 3.dp
                                      else -> 4.5.dp
                                  }

                                  NavigationBarItem(
                                      icon = {
                                          Icon(
                                              painter = painterResource(icon),
                                              contentDescription = null,
                                              modifier = Modifier.fillMaxSize(if (specificTab == TabComponent.Tab.Saved) 0.45F else 0.50F)
                                                  .offset(y = bottomTabsOffset),
                                              tint = Color.Unspecified,
                                          )
                                      },
                                      onClick = {
                                          component.onTabSelected(tab = specificTab)
                                      },
                                      selected = false,
                                      label = {
                                          Text(
                                              text = "${title}",
                                              fontSize = 12.5.sp,
                                              color = if (tabStack.active.instance.tab == specificTab) primaryColor else grayTitleColor
                                          )
                                      }
                                  )

                              }

                          }
                      }
                  },
                  sheetDragHandle = {},
                  sheetSwipeEnabled = false,
                  sheetContent = {
                      CupertinoBottomSheetContent {
                          CupertinoButton(
                              modifier = Modifier.padding(top = 50.dp),
                              onClick = {
                                  scope.launch {
                                      bottomSheetState.hide()
                                  }

                              }
                          ) {
                              Text(
                                  text = "Hello world",
                              )
                          }
                      }

                  },
              ) {
                  Children(
                      stack = component.tabStack,
                      modifier = Modifier,
                  ) { child ->
                      TabView(child.instance)
                  }
              }
          }
          is HomeScreenComponent.FullScreenChild.PostScreen ->
              CupertinoScaffold(modifier = Modifier.fillMaxSize().background(Color.Blue), hasNavigationTitle = true){
                  CupertinoButton(
                      modifier = Modifier.offset(y = 50.dp),
                      onClick = {
                          println("BACK BUTTON CLICKED ===")
                          component.onBack()
                      }
                  ){
                      Text("Go Back",color = Color.White)
                  }
              }

          }
     }

 }

The video below demonstrates

RPReplay-Final1714042947-3-2.mp4

[arkivanov]

Might be a silly question, but what platform is it? Also it would be nice to see HomeScreenComponent.

[OsmanMusse]

understood, how about if I need the backAnimation not in the root but for example HomeScreenComponent

[arkivanov]

I think in this case you just specify predictiveBackAnimation for Children(...) {} at the home level (e.g. in @Composable fun HomeContent()), not at the root level. Here is an example, though in that particular example that's only used on Android (but there should be no difference for iOS).

[OsmanMusse]

Hi arkivanov, hope your having a great weekend, Here's my latest reproducer without any API https://github.com/OsmanMusse/Iguhallee_IOS.

Problem: doesn't allow me to drag from going to the post screen via the predictive gesture(blue screen) only works if I click the go back button

[arkivanov]

Thanks for the reproducer! It looks like you haven't followed the guide completely. In particular, you missed the step #2.

Create the root DefaultComponentContext and pass the previously created BackDispatcher as backHandler argument.

Here is the patch that you need to apply:

Index: composeApp/src/iosMain/kotlin/MainViewController.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/composeApp/src/iosMain/kotlin/MainViewController.kt b/composeApp/src/iosMain/kotlin/MainViewController.kt
--- a/composeApp/src/iosMain/kotlin/MainViewController.kt	(revision 5059f4221a7e963d3a2e0cf333249e66aeadb474)
+++ b/composeApp/src/iosMain/kotlin/MainViewController.kt	(date 1714297199412)
@@ -31,7 +31,7 @@
     ){
         val root = remember {
             DefaultRootComponent(
-                componentContext = DefaultComponentContext(lifecycle = ApplicationLifecycle()),
+                componentContext = DefaultComponentContext(lifecycle = ApplicationLifecycle(), backHandler = backDispatcher),
                 homeScreenFactory = getKoinA.get()
             )
         }

[OsmanMusse]

Thanks your a star @arkivanov. This fixed the issue can't believe is was a silly mistake by me. Also thanks for replying fast

[arkivanov]

Glad that helped!