1

I've have defined a custom button in my SwiftUI file as following.

struct CircleButtonWithIcon: View {
    
    @State private var navigateToHomePage = false

    
    var body: some View {
        Button(action: {
        }) {
            Image(systemName: "arrow.right")
                .font(.system(size: 24))
                .foregroundColor(.white)
                .padding(20)
                .background(Color(#colorLiteral(red: 1, green: 0.3607843137, blue: 0.003921568627, alpha: 1)))
                .clipShape(Circle())
                .overlay(
                    Circle()
                        .stroke(Color.white, lineWidth: 3)
                )
        }
    }
}

I am trying to navigate to next page as following.

import SwiftUI

struct WelcomeView: View {
    
    @State private var navigateToHomePage = false

    
    var body: some View {
        NavigationView {
        ZStack {
            Image("WelcomeBackground")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(minWidth: 0, maxWidth: .infinity)
                .edgesIgnoringSafeArea(.all)
            VStack(alignment: .center) {
                Spacer()
                ZStack(alignment: .center) {
                    VStack {
                        VStack {
                            HStack {
                                Text("No Worry,")
                                    .font(.title)
                                    .foregroundColor(.white)
                                    .fontWeight(.bold)
                                Text("Handle")
                                    .font(.title)
                                    .foregroundColor(.white)
                                    .fontWeight(.regular)
                            }
                            HStack {
                                Text("Your Hunger,")
                                    .font(.title)
                                    .foregroundColor(.white)
                                    .fontWeight(.regular)
                                Text("With")
                                    .font(.title)
                                    .foregroundColor(.white)
                                    .fontWeight(.bold)
                            }
                            Text("Eattak!")
                                .font(.title)
                                .foregroundColor(.white)
                                .fontWeight(.bold)
                                                        
                            Text("Eattak come to help you hunger problem with easy find any restaurant")
                                .font(.body)
                                .foregroundColor(.white).padding().multilineTextAlignment(.center)
                        }
                        .padding()
                        NavigationLink(destination: HomeView()) {
                            CircleButtonWithIcon()
                        }
                    }
                    .padding(.bottom,100)
                }
                
            }.background(
                Image("welcome-black-shadow")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(minWidth: 0, maxWidth: .infinity)
            )
                .foregroundColor(.white)
                .padding(.horizontal, 24)
        }
     }
    }
}

I have added NavigationView and inside that add NavigationLink but on the button click it's not navigating to the next page.

I've reviewed all of the questions but none of them helped

thanks

Muhammad Ashfaq
  • 2,359
  • 5
  • 20
  • 46

1 Answers1

0

I don't think NavigationLink is meant to be used with Button here. Try replacing the button view in NavigationLink with just its label (the image):

NavigationLink(destination: HomeView()) {
    Image(systemName: "arrow.right")
            .font(.system(size: 24))
            .foregroundColor(.white)
            .padding(20)
            .background(Color(#colorLiteral(red: 1, green: 0.3607843137, blue: 0.003921568627, alpha: 1)))
            .clipShape(Circle())
            .overlay(
                Circle()
                    .stroke(Color.white, lineWidth: 3)
            )
    //Removed CircleButtonWithIcon()
}

I hope this helps.

jp21
  • 296
  • 2
  • 8