Tab bar animation not working properly

[ngocpd-1250]

Thanks for your awesome library!

Description I've noticed that the tab bar animation is not functioning as expected. When switching between TabLinkNavigation & LinkNavigation, the animation appears inconsistent.

Here is my code:

struct SwiftUIApp: App {
    @Default(.isLoggedIn) var isLoggedIn
    @Default(.isDarkMode) var isDarkMode
    @Default(.isOnboardingCompleted) var isOnboardingCompleted

    init() {
        FirebaseApp.configure()
    }

    var body: some Scene {
        WindowGroup {
            if isLoggedIn {
                TabLinkNavigationView(
                    linkNavigator: TabLinkNavigator(
                        routeBuilderItemList: HomeRouteGroup().routers,
                        dependency: NavigatorDependency()),
                    isHiddenDefaultTabbar: false,
                    tabItemList: [
                        .init(
                            tag: .zero,
                            tabItem: .init(
                                title: "Movies",
                                image: UIImage(systemName: "house"),
                                selectedImage: UIImage(systemName: "house.fill")),
                            linkItem: .init(routePath: .movies)),
                        .init(
                            tag: 1,
                            tabItem: .init(
                                title: "Todos",
                                image: UIImage(systemName: "folder"),
                                selectedImage: UIImage(systemName: "folder.fill")),
                            linkItem: .init(routePath: .todos)),
                        .init(
                            tag: 2,
                            tabItem: .init(
                                title: "Settings",
                                image: UIImage(systemName: "person"),
                                selectedImage: UIImage(systemName: "person.fill")),
                            linkItem: .init(routePath: .settings)),
                    ])
                .preferredColorScheme(isDarkMode ? .dark : .light)
            } else {
                LinkNavigationView(
                    linkNavigator: SingleLinkNavigator(
                        routeBuilderItemList: AuthRouteGroup().routers,
                        dependency: NavigatorDependency()),
                    item: .init(routePath: isOnboardingCompleted ? RoutePath.login : RoutePath.onboarding)
                )
                .preferredColorScheme(isDarkMode ? .dark : .light)
            }
        }
    }
}

Screenshot https://github.com/forXifLess/LinkNavigator/assets/49447154/aec5a469-a712-4abf-934e-914989ccd859

Device: Simulator Iphone 15 Pro - ios 17.2

[97chos]

Hello, @ngocpd-1250 ! Thank you for incorporating our LinkNavigator library into your project.

The issue you are experiencing, as shown in your example code, seems to be due to the body being re-invoked each time 'Default' model changes.

TabLinkNavigationView is redrawn through updateUIViewController each time its internal properties change. Since the body is recalculated each time, it cannot compare the previous state of tabList, thus causing updateUIViewController to be invoked repeatedly.

By declaring tabList separately, the view will recognize that tabList does not change and will not call updateUIViewController.

Below is the example code

struct SwiftUIApp: App {
    @Default(.isLoggedIn) var isLoggedIn
    @Default(.isDarkMode) var isDarkMode
    @Default(.isOnboardingCompleted) var isOnboardingCompleted

    // Separately declared tabList
    let tabList: [TabItem] = [
        .init(
            tag: .zero,
            tabItem: .init(
                title: "Movies",
                image: UIImage(systemName: "house"),
                selectedImage: UIImage(systemName: "house.fill")),
            linkItem: .init(routePath: .movies)),
        .init(
            tag: 1,
            tabItem: .init(
                title: "Todos",
                image: UIImage(systemName: "folder"),
                selectedImage: UIImage(systemName: "folder.fill")),
            linkItem: .init(routePath: .todos)),
        .init(
            tag: 2,
            tabItem: .init(
                title: "Settings",
                image: UIImage(systemName: "person"),
                selectedImage: UIImage(systemName: "person.fill")),
            linkItem: .init(routePath: .settings)),
    ]

    init() {
        FirebaseApp.configure()
    }

    var body: some Scene {
        WindowGroup {
            if isLoggedIn {
                TabLinkNavigationView(
                    linkNavigator: TabLinkNavigator(
                        routeBuilderItemList: HomeRouteGroup().routers,
                        dependency: NavigatorDependency()),
                    isHiddenDefaultTabbar: false,
                    tabItemList: self.tabList) // Updated part
                .preferredColorScheme(isDarkMode ? .dark : .light)
            } else {
                LinkNavigationView(
                    linkNavigator: SingleLinkNavigator(
                        routeBuilderItemList: AuthRouteGroup().routers,
                        dependency: NavigatorDependency()),
                    item: .init(routePath: isOnboardingCompleted ? RoutePath.login : RoutePath.onboarding)
                )
                .preferredColorScheme(isDarkMode ? .dark : .light)
            }
        }
    }
}

We will add a parameter to allow for the control of animation when transitioning between LinkNavigation and TabLinkNavigation, which will be passed to updateUIViewController.

If the issue persists or if you have any further questions after making these changes, please feel free to leave a comment at any time.

Thank you :)

[97chos]

We have added a parameter to control animation upon property changes in TabLinkNavigation and deployed it as version 1.2.3.

When declaring TabLinkNavigation, setting isAnimatedForUpdateTabbar to false no longer reproduces the issue.

   TabLinkNavigationView(
       linkNavigator: TabLinkNavigator(
           routeBuilderItemList: HomeRouteGroup().routers,
           dependency: NavigatorDependency()),
       isHiddenDefaultTabbar: false,
       tabItemList: self.tabList
       isAnimatedForUpdateTabbar: false) 

Thank you for reporting the issue! :)

[ngocpd-1250]

@97chos Thank you for getting back to me so promptly. I've retested it with version 1.2.3, and it's working as expected now.

[interactord]

@ngocpd-1250

Please issue a ticket whenever there is an issue. Our team will do our best to support.

Thank you so much for using our library.