SwiftUI implementation of Compose Children widget

[plusmobileapps]

Posting new part of this old discussion here since the fork.

The iOS todo sample uses the SwiftUI transition() API for adding/removing the second view in the router into view of the user, however if a third screen is added using a similar approach the animation looks wonky with the second screen leaving to the right side (trailing) while the new screen is also entering from the right. This wasn't an issue on a compose project because of the compose extensions that exist, however with Swift not being able to publish a companion library that leads to copy paste type of solutions. So I would like to share a solution I have come up with that might be a little hacky but accomplished the following slide animation in my project, hoping this helps someone else with an iOS project and open to suggestions if anybody has more experience with SwiftUI to solve this problem.

So for this example, the following RootBloc will be used:

interface RootBloc {
    val routerState: Value<RouterState<*, Child>> // used already with compose extensions
    val animatedRouter: Value<List<AnimatedChildBloc>> // iOS/generic router with state of what to animate where

    sealed class Child {
        data class BottomNavigation(val bloc: BottomNavigationBloc) :
            Child()

        data class ManageDogs(val bloc: ManageDogsBloc) : Child()

        data class ManageDog(val bloc: ManageDogBloc) : Child()
    }
}

The model for the animated router will have an enum to indicate animation direction and the type of view in the stack it is.

enum class AnimatedDirection {
    LEFT, RIGHT, NONE
}

data class AnimatedChildBloc(
    val child: RootBloc.Child,
    val entrance: AnimatedDirection,
    val type: Type
) {
    enum class Type {
        BACK_STACK, // something that doesn't need to be rendered at all
        FIRST_BACK_STACK, // used for rendering it off screen
        ACTIVE, // animated on screen, could be from right or left
        POPPED // removed from backstack and animated to the right
    }
}

The RootBlocImpl will now implement the logic for this animated router by tracking the previously active child/backstack and will determine based off the new router state to determine the values for the AnimatedChildBloc.

class RootBlocImpl internal constructor(
    componentContext: ComponentContext
) : RootBloc, ComponentContext by componentContext {

    override val routerState: Value<RouterState<*, RootBloc.Child>> = TODO("create a router")

    override val animatedRouter: Value<List<AnimatedChildBloc>> = routerState.asValue()

    @OptIn(ExperimentalStdlibApi::class)
    private fun Value<RouterState<*, RootBloc.Child>>.asValue(): Value<List<AnimatedChildBloc>> {
        return object : Value<List<AnimatedChildBloc>>() {

            private var lastActiveChild: Child.Created<Configuration, RootBloc.Child>? = null

            private var lastBackStack: List<Child<Any, RootBloc.Child>> = listOf()

            private val _value = BehaviorSubject(emptyList<AnimatedChildBloc>())
            override val value: List<AnimatedChildBloc>
                get() = _value.value

            private val routerObserver: ValueObserver<RouterState<*, RootBloc.Child>> = { state ->
                when {
                    lastActiveChild == null -> {
                        lastActiveChild =
                            state.activeChild as Child.Created<Configuration, RootBloc.Child>
                        _value.onNext(
                            getAnimatedBackstackChildren(state, BACK_STACK) +
                                    AnimatedChildBloc(
                                        child = state.activeChild.instance,
                                        entrance = NONE,
                                        type = ACTIVE
                                    )
                        )
                    }
                    else -> {
                        val backStack = getAnimatedBackstackChildren(state)
                        val isPushed = state.backStack.size > lastBackStack.size
                        val newList = buildList<AnimatedChildBloc> {
                            addAll(backStack)
                            add(
                                AnimatedChildBloc(
                                    child = state.activeChild.instance,
                                    entrance = if (isPushed) RIGHT else LEFT,
                                    type = ACTIVE,
                                )
                            )
                            if (!isPushed) {
                                add(
                                    AnimatedChildBloc(
                                        child = lastActiveChild!!.instance,
                                        entrance = LEFT,
                                        type = POPPED
                                    )
                                )
                            }
                        }
                        _value.onNext(newList)
                    }
                }

                lastActiveChild = state.activeChild as Child.Created<Configuration, RootBloc.Child>
                lastBackStack = state.backStack
            }

            private fun getAnimatedBackstackChildren(state: RouterState<*, RootBloc.Child>, overideType: AnimatedChildBloc.Type? = null): List<AnimatedChildBloc> =
                state.backStack.mapIndexed { index: Int, child: Child<Any, RootBloc.Child> ->
                    child as Child.Created<Configuration, RootBloc.Child>
                    AnimatedChildBloc(
                        child = child.instance,
                        entrance = LEFT,
                        type = when {
                            overideType != null -> overideType
                            index == state.backStack.lastIndex -> FIRST_BACK_STACK
                            else -> BACK_STACK
                        }
                    )
                }

            private var disposables = emptyMap<ValueObserver<List<AnimatedChildBloc>>, Disposable>()

            init {
                lifecycle.subscribe(
                    onCreate = {
                        routerState.subscribe(routerObserver)
                    },
                    onDestroy = {
                        routerState.unsubscribe(routerObserver)
                    }
                )
            }

            override fun subscribe(observer: ValueObserver<List<AnimatedChildBloc>>) {
                val rxDisposable: com.badoo.reaktive.disposable.Disposable = _value.subscribe(
                    onNext = { observer(it) }
                )
                val disposable: Disposable = object : Disposable {
                    override val isDisposed: Boolean get() = rxDisposable.isDisposed
                    override fun dispose() {
                        rxDisposable.dispose()
                    }
                }
                this.disposables += observer to disposable
            }

            override fun unsubscribe(observer: ValueObserver<List<AnimatedChildBloc>>) {
                val disposable = disposables[observer] ?: return
                this.disposables -= observer
                disposable.dispose()
            }
        }
    }
}

Finally in SwiftUI code, you can create a RouterView that takes in the animatedRouter state.

struct RouterView<Content : View> : View {
    @ObservedObject
    private var state: ObservableValue<NSArray>
    private let render: (RootBlocChild, _ isHidden: Bool) -> Content

    init(_ routerState: Value<NSArray>, @ViewBuilder render: @escaping (RootBlocChild, _ isHidden: Bool) -> Content) {
        self.state = ObservableValue(routerState)
        self.render = render
    }
    
    var body: some View {
        let routerState = self.state.value
        
        let children =
            routerState
                .compactMap { $0 as? AnimatedChildBloc }
                .map { $0 }
        
        return ZStack {
            ForEach(children.indices, id: \.hashValue) { i in
                let item = children[i]
                
                if item.type == AnimatedChildBloc.Type_.firstBackStack {
                        self.render(item.child, false)
                            .transition(AnyTransition.asymmetric(insertion: .slideToLeftTransition, removal: AnyTransition.identity))
                }
                
                if item.type == AnimatedChildBloc.Type_.active {
                    if item.entrance == AnimatedDirection.left {
                        self.render(item.child, true)
                            .transition(AnyTransition.asymmetric(insertion: .move(edge: .leading), removal: AnyTransition.identity))
                    } else if item.entrance == AnimatedDirection.right{
                        self.render(item.child, true)
                            .transition(AnyTransition.asymmetric(insertion: .move(edge: .trailing), removal: AnyTransition.identity))
                    } else {
                        self.render(item.child, true)
                    }
                }
                
                if item.type == AnimatedChildBloc.Type_.popped {
                    self.render(item.child, false)
                        .transition(AnyTransition.asymmetric(insertion: .slideToRightTransition, removal: AnyTransition.identity))
                }
            
            }

        }
    }
}


extension AnyTransition {
    static var slideToLeftTransition: AnyTransition {
        .modifier(active: MySlideViewModifier(x: 0), identity: MySlideViewModifier(x: -(UIScreen.main.bounds.width)))
    }
    
    static var slideToRightTransition: AnyTransition {
        .modifier(active: MySlideViewModifier(x: 0), identity: MySlideViewModifier(x: UIScreen.main.bounds.width))
    }
}

struct MySlideViewModifier : ViewModifier {
    let x: CGFloat
    
    func body(content: Content) -> some View {
        content.offset(x: x, y: 0)
    }
}

Still learning Swift, so open to suggestions to improve this as I'm sure there are some optimizations that could be made after views have finished animating.

[arkivanov]

Thanks! I am also still learning iOS dev, this may be useful for the community. One thing I can note is that instead of the asValue function you can try to make a standalone class in the iosMain source set, to be used directly from Swift. So there is no need to pollute the component's interface with iOS-specific things.

class ChildAnimationHelper<T : Any>(
    private val routerState: Value<RouterState<*, T>>,
    // ...
) : Value<List<AnimatedChildBloc>> {
    // Implementation here
}

I also have plans to play with SwiftUI animations at some point. Will provide updates here as well.

[plusmobileapps]

That's a great suggestion, never thought of moving that over into the iosMain folder but that makes sense since its only being used from my iOS project currently. Interested to see what others can come up with to solve this problem on the iOS side, I tried to make this solution more generic but was struggling to figure out the syntax in swift or even knowing if I was going about solving the problem correctly. At least I have something that works for now as this was something that was really bothering me in my iOS app.