NavigationLink + Text.onTapGesture Colliding

Question

This problem is that when clicking upon the Text in the view for a NavigationLink, the onTapGesture is getting priority and ignoring the NavigationLink. I have tried on simultaneousGesture, but am still having issues.

Here is the NavigationView/List/NavigationLink bit of code:

NavigationView {
            List {
                ForEach(gameStore.games) { game in                    
                    NavigationLink(destination: EmojiMemoryGameView(viewModel: game)
                                    .navigationBarTitle(self.gameStore.name(for: game))
                    ) {
                        EmojiThemeEditorView(game: game, isEditing: self.editMode.isEditing)
                    }                    
                }
                .onDelete { indexSet in
                    indexSet.map { self.gameStore.games[$0] }
                        .forEach { game in
                            self.gameStore.removeGameTheme(game)
                        }
                }
            }
            .navigationBarTitle(self.gameStore.name)
            .navigationBarItems(
                leading: Button(action: {
                    self.gameStore.addGameTheme()
                }, label: {
                    Image(systemName: "plus").imageScale(.large)
                }),
                trailing: EditButton()
            )
            .environment(\.editMode, $editMode)

And here is the EmojiThemeEditorView's body:

var body: some View {
        Text(game.theme.themeName).foregroundColor(game.theme.colorToUse).font(.largeTitle)
//            .simultaneousGesture(TapGesture().onEnded { // tried this and did not work
            .onTapGesture {
                if (isEditing) {
                    self.showThemeEditor = true
                }
            }
            .popover(isPresented: $showThemeEditor) {
                EmojiThemeEditorOptionView(isShowing: $showThemeEditor).environmentObject(self.game.theme)
            }
    }

Basically, clicking on the Text, does not transition to the NavigationLink. Here is an example:

Any thoughts on the best way to navigate around this issue?

Nicholas Rees Nicholas Rees · Accepted Answer · 2021-02-02T03:09:09

I’ve had similar issues with navigation links being wonky. I’ve had the best success treating navigation links as if they are things that should not go in lists and relying on the isActive flag to trigger them.

Here’s a good tutorial on how to use isActive:

https://www.hackingwithswift.com/articles/216/complete-guide-to-navigationview-in-swiftui

I suspect changing your navigationLinks to Buttons, making one NavigationLink in your view, and having your onTapGesture change a state object for the game and change a Bool for isActive will work. It’s a weird paradigm, very different from html links.

The key is

var body: some View {
@State var emojiView = false
    NavigationLink(“”, destination: EmojiMemoryGameView(viewModel: game), isActive: self.$emojiView)

If you change the self.emojiView in your onTapGesture and the game variable in same place, it should navigate you to the link. Hope that makes sense.

NavigationLink + Text.onTapGesture Colliding

1 Answers