How do I navigate to my SecondView by tapping image button?

Question

I'm trying out NavigationView and want to move to SecondView on clicking radio-on-button. The code works fine if I'm using text button, I need to use an icon/image though and it doesn't work in that case. What am I missing?

import SwiftUI

struct FirstView: View {
    var body: some View {
        NavigationView {
                   VStack {
                       Text("Main Content View")
                           .font(.largeTitle)
                           .fontWeight(.medium)
                  strong text         .foregroundColor(Color.blue)
                       Spacer()
                       NavigationLink(destination: SecondView(), label: {
                           Button(action: {
                               
                           }) {
                               
                               Image("radio-on-button")
                                   .renderingMode(.original)
                                   .resizable()
                                   .frame(width: 75, height: 75)
                                   .foregroundColor(.red)
                                   .padding(.horizontal)
                               
                           }
                       }) 
                 }
               }
    }
}

struct SecondView: View {
    var body: some View {
        Text("Hello, Second View!")
                    .font(.largeTitle)
                    .fontWeight(.medium)
                    .foregroundColor(Color.blue)
    }
}

score 2 · Answer 1 · answered Aug 08 '22 at 12:29

Use following code to solve. No need to use Button for NavigationLink label only use Image as a NavigationLink Label.

NavigationLink(destination: SecondView(), label: {
    Image("radio-on-button") //Remove the button and add only Image
        .renderingMode(.original)
        .resizable()
        .frame(width: 75, height: 75)
        .foregroundColor(.red)
        .padding(.horizontal)
})

score 0 · Accepted Answer · answered Aug 08 '22 at 12:27

When you want to navigate, you simply use NavigationLink without a Button:

NavigationLink(destination: SecondView(), label: {
    Image("radio-on-button")
        .renderingMode(.original)
        .resizable()
        .frame(width: 75, height: 75)
        .foregroundColor(.red)
        .padding(.horizontal)
})

Button is used to execute some action.

score 0 · Answer 3 · answered Aug 08 '22 at 20:57

Here is the full code:

import SwiftUI

struct FirstView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Main Content View")
                    .font(.largeTitle)
                    .fontWeight(.medium)
                    .foregroundColor(Color.blue)
                
                NavigationLink {
                    SecondView()
                } label: {
                        Image("radio-on-button") 
                            .renderingMode(.original)
                            .resizable()
                            .frame(width: 75, height: 75)
                            .foregroundColor(.red)
                            .padding(.horizontal)
                    
                }

            }
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("Hello, Second View!")
            .font(.largeTitle)
            .fontWeight(.medium)
            .foregroundColor(Color.blue)
    }
}

A navigation Link acts like a button, so you can style it just like one. I tested the code out by myself, and it works. Think of the label part as just like another sub-view. This way, you can put as much stuff that you would like in it, and whenever the user taps on anything inside of that "subview" the second view will come up.

score -1 · Answer 4 · answered Aug 08 '22 at 12:30

In order to fix issue you need to bind and manage tag with NavigationLink, So create one state variable inside you view as follow, just add above body.

   @State var selection: Int? = nil

Then update your button code as follow to add NavigationLink

NavigationLink(destination: SecondView(), label: {
  Button(action: {
      print("Radio button tapped")
      self.selection = 1                     
  }) {
      Image("radio-on-button")
      .renderingMode(.original)
      .resizable()
      .frame(width: 75, height: 75)
      .foregroundColor(.red)
      .padding(.horizontal)
                           
  }
})

I hope this will solve your problem. If not feel free to discuss. Thanks

How do I navigate to my SecondView by tapping image button?

4 Answers4