skip to Main Content

I have a list that searches through a nutrition api and displays the search result in a list. Up until upgrading to ios 18, everything worked flawlessly.

Now, when the list is created, sometimes the onTapGesture is recognizes and loads the fooddetail page, with other items in the list not registering taps at all?

Why would this change suddenly? I can’t figure out how to get every item in the list to be tappable now.

List(searchResults, id: .fid) { food in
                    VStack {
                        HStack {
                            VStack(alignment: .leading) {
                                Text(food.name)
                                    .font(.system(size: 20))
                                    .padding(.bottom, 4)
                                Text("(food.brand) - (extractCalories(from: food.calories) ?? "nil")")
                                    .font(.system(size: 16))
                            }
                            .padding()
                            .foregroundColor(Color.white)
                            
                            Spacer()
                            
                            VStack {
                                Image(systemName: "chevron.right")
                                    .foregroundColor(Color.white)
                                    .padding(.trailing, 8)
                            }
                        }
                        .padding([.leading, .trailing], 8.0)
                        .padding(.top, 0)
                        .background(
                            Color(red: 40 / 255, green: 40 / 255, blue: 40 / 255)
                                .clipShape(RoundedRectangle(cornerRadius: 10))
                        )
                    }
                    .onAppear {
                        print(searchResults)
                    }
                    .contentShape(Rectangle()) // Ensures the entire area is tappable
                    /*.simultaneousGesture(TapGesture().onEnded {
                            print("TAPPED FOOD ID: (food.fid)")
                            tappedFoodID = food.fid
                            tappedFoodName = food.name
                            showFoodItemDetail = true
                        })*/
                    .onTapGesture(count: 1) {
                            print("TAPPED FOOD ID: (food.fid)")
                            tappedFoodID = food.fid
                            tappedFoodName = food.name
                            showFoodItemDetail = true
                        }
                    .listRowSeparator(.hidden)
                    .listRowBackground(Color.clear)
                    .scrollContentBackground(.hidden)
                    .padding(.horizontal, -16) // Remove horizontal padding for the whole list
                    .padding(.vertical, 0)    // Remove vertical padding for the whole list
                }

enter image description here

2

Answers


  1. I encountered the same problem. I modified the code to the following and it worked fine.

                .contentShape(Rectangle())
                .highPriorityGesture(
                    TapGesture().onEnded {
                        print("TAPPED")
                    }
                )
    
    Login or Signup to reply.
  2. I encountered the same issue, and I tried @ezkeemo’s solution—it worked perfectly for me! It seems the problem lies with TabView. Once I removed TabView, the tap gesture started working as expected.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search