swiftuitabviewbug-reportingpagetabviewstyle

Navigation repeats itself several times after clicking the object


I just shared this Bug with Apple. I want to share with you.

Application Follow

1 - After the user logs on to the onBoardingView page, they are directed to ContentView with fullScreenCover.

2 - ContentView page contains objects in TabView that are repeated with ForEach. Clicking on these objects will take you to the DetailView page.

3 - However, Navigation repeats itself several times after clicking the object.

My English is bad. Sorry for this.

Video is here

Project file is here

struct OnboardView: View {
    @State var isLogin: Bool = false
    var body: some View {
        
        Button(action: {self.isLogin = true}) {
            Text("Login")
        }
        .fullScreenCover(isPresented: self.$isLogin) {
            ContentView()
        }
    }
}


struct ContentView: View {
    @State var selected: String = ""
    var items: [String] = ["1","2","3","4","5","6","7","8","9","10"]
    var body: some View {
        NavigationView {
            TabView(selection: $selected) {
                ForEach(items, id: \.self) { item in
                    NavigationLink(
                        destination: DetailView(),
                        label: {
                            Text(item)
                                .foregroundColor(.white)
                                .padding()
                                .background(Color.orange)
                                .cornerRadius(10)
                        })
                }
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
        }
    }
}

Solution

  • When working with ForEach in SwiftUI, you have to be extra careful on the ids.

    Try changing items to items.indices instead:

                    ForEach(items.indices, id: \.self) { item in
                        NavigationLink(
                            destination: Text("Detail View"),
                            label: {
                                Text(items[item])
                                    .foregroundColor(.white)
                                    .padding()
                                    .background(Color.orange)
                                    .cornerRadius(10)
                            }
                        )
                    }