Hello, <@UHAJKUSTU>! Do you have plans to support ...

# decompose

[Pavel Shnyakin]

Hello, @Arkadii Ivanov! Do you have plans to support built-in mechanism of "screen drag" (back navigation) on compose ios?

This feature is typical for the iOS platform. I would like it to be built into the decompose too.
Flutter, for example, supports such a feature when building an application for iOS.

IMG_2046.MP4

[Arkadii Ivanov]

This should be already doable with the latest version 2.1.0-compose-experimental-alpha-02

See https://arkivanov.github.io/Decompose/extensions/compose/#predictive-back-gesture-on-other-platforms

[Pavel Shnyakin]

Thank you! It works! Almost like i wanted
is there a way to make the predictive back animation also like a drag?

Simulator Screen Recording - iPhone 14 - 2023-06-23 at 15.38.43.mp4

[Arkadii Ivanov]

You can try customizing these two modifiers: https://github.com/arkivanov/Decompose/blob/b6f3f2b01d4f7bc2f21e6aa7f1790c7c0d967584/extensions-compose-jetbrains/src/commonMain/kotlin/com/arkivanov/decompose/extensions/compose/jetbrains/stack/animation/PredictiveBackAnimation.kt#L52

[Pavel Shnyakin]

It's was easy, thank you!

private fun Modifier.slideExitModifier(progress: Float, maxWidth: Dp): Modifier {
    return offset {
        IntOffset(x = (maxWidth * progress).roundToPx(), y = 0)
    }
}

Simulator Screen Recording - iPhone 14 - 2023-06-23 at 16.22.14.mp4

[Arkadii Ivanov]

Cool! I think it should be possible to get the maximum width from this scope inside offset {}.

[Pavel Shnyakin]

indeed, but we should use graphicsLayer than

private fun Modifier.slideExitModifier(progress: Float): Modifier {
    return graphicsLayer {
        translationX = size.width * progress
    }
}

[Arkadii Ivanov]

Thanks for sharing!

[Pavel Shnyakin]

Maybe it will be useful for someone
This animation configuration makes the navigation look native to iOS.

@Composable
internal fun RootContent(
    component: RootComponent,
    modifier: Modifier = Modifier,
) {
    Children(
        stack = component.stack,
        modifier = modifier,
        animation = predictiveBackAnimation(
            backHandler = component.backHandler,
            exitModifier = { progress, _ ->
                Modifier.slideExitModifier(
                    progress = progress,
                )
            },
            enterModifier = { progress, _ ->
                Modifier.slideEnterModifier(
                    progress = progress,
                )
            },
            animation = stackAnimation(iosLikeSlide()),
            onBack = component::onBackClicked,
        ),
    ) {
        SomeScreenHere()
    }
}

fun iosLikeSlide(animationSpec: FiniteAnimationSpec<Float> = tween()): StackAnimator =
    stackAnimator(animationSpec = animationSpec) { factor, direction, content ->
        val newFactor = when (direction) {
            Direction.ENTER_FRONT -> factor
            Direction.EXIT_FRONT -> factor
            Direction.ENTER_BACK -> factor * 0.5f
            Direction.EXIT_BACK -> factor * 0.5f
        }
        content(Modifier.offsetXFactor(factor = newFactor))
    }

fun Modifier.slideExitModifier(progress: Float): Modifier {
    return offsetXFactor(progress)
}

fun Modifier.slideEnterModifier(progress: Float): Modifier {
    return offsetXFactor((progress - 1f) * 0.5f)
}

private fun Modifier.offsetXFactor(factor: Float): Modifier =
    layout { measurable, constraints ->
        val placeable = measurable.measure(constraints)

        layout(placeable.width, placeable.height) {
            placeable.placeRelative(x = (placeable.width.toFloat() * factor).toInt(), y = 0)
        }
    }

Simulator Screen Recording - iPhone 14 - 2023-06-23 at 17.31.01.mp4

[Arkadii Ivanov]

Looks really cool!

[Colton Idle]

Decompose should have some sort of recipes section or something. This looks really cool!

[Arkadii Ivanov]

Interesting idea! Let me think about it!

[Pavel Shnyakin]

I think it would be cool to have a separate section on the site

[Colton Idle]

i know okhttp has a recipes section. i always reference that. 😄

[Arkadii Ivanov]

Yeah! Although, I feel it would be cool to have it community maintained. Having a pinned discussion where everyone can post a recipe, then comment and upvote/downvote. WDYT?

[Arkadii Ivanov]

Eventually, most upvoted recipes could be added to a dedicated section in docs.

[Pavel Shnyakin]

Sounds good)

[Arkadii Ivanov]

Here is a slightly enhanced version of the back gesture transition on iOS, with a fade effect.

Simulator Screen Recording - device-IPhone12Pro - 2023-08-20 at 13.31.00.mp4

[Arkadii Ivanov]

@OptIn(ExperimentalDecomposeApi::class)
@Composable
fun RootContent(
    component: RootComponent,
    modifier: Modifier = Modifier,
) {
    Children(
        stack = component.childStack,
        animation = predictiveBackAnimation(
            backHandler = component.backHandler,
            animation = stackAnimation(iosLikeSlide()),
            exitModifier = { progress, _ -> Modifier.slideExitModifier(progress = progress) },
            enterModifier = { progress, _ -> Modifier.slideEnterModifier(progress = progress) },
            onBack = component::onBackPressed,
        ),
        modifier = modifier,
    ) {
        Surface {
            when (val child = it.instance) {
                is RootComponent.Child.Main -> MainContent(component = child.component)
                is RootComponent.Child.Details -> DetailsContent(component = child.component)
            }
        }
    }
}

fun iosLikeSlide(animationSpec: FiniteAnimationSpec<Float> = tween()): StackAnimator =
    stackAnimator(animationSpec = animationSpec) { factor, direction, content ->
        content(
            Modifier
                .then(if (direction.isFront) Modifier else Modifier.fade(factor + 1F))
                .offsetXFactor(factor = if (direction.isFront) factor else factor * 0.5F)
        )
    }

fun Modifier.slideExitModifier(progress: Float): Modifier =
    offsetXFactor(progress)

fun Modifier.slideEnterModifier(progress: Float): Modifier =
    fade(progress).offsetXFactor((progress - 1f) * 0.5f)

private fun Modifier.fade(factor: Float) =
    drawWithContent {
        drawContent()
        drawRect(color = Color(red = 0F, green = 0F, blue = 0F, alpha = (1F - factor) / 4F))
    }

private fun Modifier.offsetXFactor(factor: Float): Modifier =
    layout { measurable, constraints ->
        val placeable = measurable.measure(constraints)

        layout(placeable.width, placeable.height) {
            placeable.placeRelative(x = (placeable.width.toFloat() * factor).toInt(), y = 0)
        }
    }

[Arkadii Ivanov]

Added it to the docs for now:
- https://arkivanov.github.io/Decompose/extensions/compose/#predictive-back-gesture-on-ios