NavigationLink won't transition to new View upon selecting custom Button

Question

When I embed my Button inside a NavigationLink and I set the destination to a Text View, the view doesn't transition upon clicking the button, although it sometimes does transition if I just randomly click around the button. What am I doing wrong?

Here is what I'm working with...

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        NavigationView{
            VStack{
                Spacer()
                VStack(spacing: 50){
                    NavigationLink(destination: Text("Testing")){
                    awButton(content: "Request Support", backColor: Color(#colorLiteral(red: 0.1764705926, green: 0.01176470611, blue: 0.5607843399, alpha: 1)))
                    }  
                }
                Spacer()
            }
            .navigationBarTitle(Text("AccessWeb"))
            .navigationBarItems(trailing: HStack{
                Image(systemName: "bell")
                    .font(.system(size: 30))
                Image(systemName:"person.circle")
                    .font(.system(size: 30))
                Text("Tester")
                    .font(.system(size: 20))
            })
            
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}



struct awButton: View {
    var content : String
    var backColor : Color
    var body: some View {
        
        Button(action: {}, label: {
            VStack {
                HStack {
                    Image(uiImage: #imageLiteral(resourceName: "awText"))
                        .resizable()
                        .frame(width: 30, height: 20)
                        .padding(.leading)
                    Spacer()
                }
                .padding(.top)
                HStack {
                    Text("\(content)")
                        .font(.title)
                        .fontWeight(.semibold)
                        .offset(y: 10.0)
                }
                Spacer()
            }
        })
        .foregroundColor(Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
        .frame(width: 300, height: 150, alignment: .center)
        .background(backColor)
        .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
        
    }
}

NavigationLink is-a button itself, so you cannot put button in button, your awButton blocks Navigation link (as button). — Asperi, Feb 19 '21 at 20:11
If your intention is to activate navigation link programmatically then next should be helpful https://stackoverflow.com/a/63840518/12299030. — Asperi, Feb 19 '21 at 20:14

score 0 · Accepted Answer · answered Feb 19 '21 at 20:11

The NavigationLink wraps everything in a button already (or at least something that receives click/tap events), so by also including a Button in your custom view, you're preventing those tap events from getting to the original NavigationLink.

But, since your action is empty, you can just take out your Button wrapper:

struct awButton: View {
    var content : String
    var backColor : Color
    var body: some View {
        
        VStack {
            HStack {
                Image(systemName: "pencil")
                    .resizable()
                    .frame(width: 30, height: 20)
                    .padding(.leading)
                Spacer()
            }
            .padding(.top)
            HStack {
                Text("\(content)")
                    .font(.title)
                    .fontWeight(.semibold)
                    .offset(y: 10.0)
            }
            Spacer()
        }
        .foregroundColor(Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
        .frame(width: 300, height: 150, alignment: .center)
        .background(backColor)
        .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
        
    }
}

NavigationLink won't transition to new View upon selecting custom Button

1 Answers1