NavigationView odd transition to and from child view

Question

I'm hoping that I can attach a recording of my simulator to this request. I have a list of items that I create a NavigationLink for that call a child view with different data based on a value passed in. The child view is a large horizontal scroll view with pages that support months of the year. DragGesture controls the positioning of the horizontal scroll.

When I transition from the List to the child view it appears almost like it is swooping in from the right and when it transitions back to the parent list view you can see visual from both views appear briefly during the transition.

I believe it has something to do with the GeometryReader and Horizontal Scroll view, but can't figure out how to stabilize it...

The list view is:

import SwiftUI

struct AccountsListView: View {
    
    var accounts: [Accounts.AccountRecord] {
        var acctRec = [Accounts.AccountRecord]()
        acctRec = Accounts.shared.selectAllAccounts()
        return acctRec
    }
    
    var body: some View {
        
        NavigationView {
            
            VStack {
                Divider().background(Color.black)
                    ForEach (accounts, id: \.self) { accountRec in
                        NavigationLink(destination: BudgetPagesView(accountCode: accountRec.account_code)){
                            HStack {
                                Image(systemName: "dollarsign.circle")
                                    .padding(.leading, 15)
                                Text(accountRec.account_name)
                                Spacer()
                                Text(String(NumberFormatter.formatWithComma(value:accountRec.running_balance)))
                                    .padding(.trailing, 15)
                            }
                        }
                        .foregroundColor(.black)
                        Divider().background(Color.black)
                    }// END FOR EACH
            }// END VSTACK
            .font(.title)
            .padding(.top, 25)
            .frame(minWidth: 0,
                   maxWidth: .infinity,
                   minHeight: 0,
                   maxHeight: .infinity,
                   alignment: .topLeading
            )
            .navigationTitle("Managing Your Money Accounts")
            .navigationBarTitleDisplayMode(.inline)
            
        } // END NAVIGATION VIEW
        .navigationViewStyle(StackNavigationViewStyle())
        
    } // END BODY VIEW
    
} // END STRUCT VIEW

struct AccountsListView_Previews: PreviewProvider {
    static var previews: some View {
        AccountsListView().environmentObject(GlobalSettings())
            .environmentObject(ApplicationSettings())
            .environmentObject(Budget())
            .environmentObject(AppSettings())
    }
}

AND the child view is:

import SwiftUI

struct BudgetPagesView: View {
    // Control the scrollview
    @GestureState private var dragOffset: CGFloat = 0
    
    // Environment variables
    @EnvironmentObject var applicationSettings: ApplicationSettings
    @EnvironmentObject var budget: Budget
    @EnvironmentObject var appSettings: AppSettings
    @EnvironmentObject var globalSettings: GlobalSettings
    @Environment(\.presentationMode) var presentationMode
    
    @State var accountCode: Int
    
    var budgets: [Budget.BudgetRecord] {
        return Budget.shared.selectBudgetForAccountAndYear(withAccountCode: accountCode, withYear: String(self.applicationSettings.currentBudgetYear))
    }
    
    var body: some View {
        
            GeometryReader { outterView in
                
                    VStack {
                        HStack(spacing: 0) {
                            
                            ForEach (self.budgets, id: \.self) { record in
                                
                                GeometryReader { innerView in
                                    
                                    BudgetView(
                                        account_name: record.account_name,
                                        account_code: record.account_code,
                                        budget_month: record.budget_month,
                                        budget_year: record.budget_year,
                                        beginning_balance: record.beginning_balance,
                                        expected_income: record.expected_income,
                                        expected_income_received:record.expected_income_received,
                                        unexpected_income_received: record.unexpected_income,
                                        expected_expense: record.expected_expense,
                                        expected_expense_spent: record.expected_expense_spent,
                                        unexpected_expense: record.unexpected_expense,
                                        budgeted_surplus: record.budgeted_surplus,
                                        adjusted_surplus: record.adjusted_surplus,
                                        actual_surplus: record.actual_surplus,
                                        month_closed: record.month_closed)
                                } // END OF GEOMETRY READER INNERVIEW
                                .frame(width: outterView.size.width)
                                .contentShape(Rectangle())
                            } // END OF FOREACH
                            
                        } // END OF HSTACK
                        .frame(width: outterView.size.width, height: 510, alignment: .leading)
                        .offset(x: -CGFloat(self.applicationSettings.currentBudgetMonth - 1 ) * outterView.size.width)
                        .offset(x: self.dragOffset)
                        .gesture(
                            DragGesture(minimumDistance: 10, coordinateSpace: .local)
                                .updating(self.$dragOffset, body: {(value, state, transaction) in
                                    state = value.translation.width
                                })
                                .onEnded({ (value) in
                                    let threshold = outterView.size.width * 0.40
                                    var newIndex = Int(-value.translation.width / threshold) + self.applicationSettings.currentBudgetMonth
                                    newIndex = min(max(newIndex,1), 12)
                                    self.applicationSettings.currentBudgetMonth = newIndex
                                })
                        ) // END OF GESTURE
                        .animation(.easeInOut)

                    } // END VSTACK

            }// END OF GEOMETRY READER OUTTERVIEW
//            .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height, alignment: .leading)
            .navigationTitle("Managing Your Money Budget")
            .navigationBarTitleDisplayMode(.inline)
            .navigationBarBackButtonHidden(true)
            .toolbar() {
                ToolBarCancel {
                    self.presentationMode.wrappedValue.dismiss()
                }
            }
    } // END OF BODY
}

struct BudgetPagesView_Previews: PreviewProvider {
    static var previews: some View {
        BudgetPagesView(accountCode: 12345678)
            .environmentObject(ApplicationSettings())
            .environmentObject(Budget())
            .environmentObject(GlobalSettings())
            .environmentObject(AppSettings())
    }
}

Answer 1

Currently you are using a custom horizontal carousel view(or custom PageTabView etc.), but using TabView with PageTabViewStyle() is easier, unless you want a special animation.

@State var selectedTab: Int?

TabView(selection: $selectedTab) {
    ForEach (self.budgets, id: \.self) { record in
        // your code
        .tag(0)


        .tag(1)
    }
}
.tabViewStyle(PageTabViewStyle())