Go to SwiftUi View File "Home" with button

Question

I'm trying to go to my SwiftUi View File Home by clicking my button in iOS 16:

I already read Apple documentation and searched in Google and YouTube but I didn't got the answer.

Here is my code:

import SwiftUI
import CoreData

struct ContentView: View {
    
    var body: some View {
        
        VStack (alignment: .leading) {
            Text("Welcome To").font(.system(size: 45)).fontWeight(.heavy).foregroundColor(.primary)
            Text("Pumping Fitness").font(.system(size: 45)).fontWeight(.heavy).gradientForeground(colors: [.red, .yellow])
            Spacer()
            
            VStack (alignment: .leading, spacing: 24) {
                
                
                HStack (alignment: .center, spacing: 20)
                {
                    Image(systemName: "dumbbell.fill").resizable().frame(width: 40, height: 30).gradientForeground(colors: [.red, .orange])
                    
                    VStack (alignment: .leading, spacing: 4) {
                        Text("Track your workouts").bold().font(.system(size: 22)).padding(.top, 10.0)
                        
                        Text("Easily track your progress during you are working out").font(.subheadline).padding(.bottom, 10.0)
                    }
                }
                
                
                HStack (alignment: .center, spacing: 20)
                {
                    Image(systemName: "timer").resizable().frame(width: 40, height: 40).gradientForeground(colors: [.red, .orange])
                    
                    VStack (alignment: .leading, spacing: 4) {
                        Text("Auto rest timer").bold().font(.system(size: 22))
                        
                        Text("Start your rest time with one single tap").font(.subheadline).padding(.bottom, 10.0)
                    }
                }
                
                
                HStack (alignment: .center, spacing: 20)
                {
                    Image(systemName: "figure.run").resizable().frame(width: 40, height: 50).gradientForeground(colors: [.red, .orange])
                    
                    VStack (alignment: .leading, spacing: 4) {
                        Text("Add your own exercises").bold().font(.system(size: 22))
                        
                        Text("Create your own type of exercises at a glance").font(.subheadline)
                    }
                }
                
                
            }
            
            Spacer()
            Spacer()
            
            //HStack creado para poder alinear el boton al centro.
            HStack(alignment: .center) {
                    Button(action: {} ) {
                        Text("Start Pumping").fontWeight(.black).foregroundColor(.white)
                }
                .padding()
                .frame(width: 280, height: 60)
                .background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.yellow]), startPoint: .leading, endPoint: .trailing))
                .cornerRadius(17)
                
            }.padding(.leading)
        }.padding(.all, 40)
        
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
    }
}


extension View {
    public func gradientForeground(colors: [Color]) -> some View {
        self.overlay(LinearGradient(gradient: .init(colors: colors), startPoint: .topLeading, endPoint: .topTrailing))
            .mask(self)
    }
}

Do you know how can I do it? All the YouTube videos I saw were using a list, and I want to show this "welcome page" then go to my home page.

Does this answer your question? [How to show NavigationLink as a button in SwiftUI](https://stackoverflow.com/questions/57130866/how-to-show-navigationlink-as-a-button-in-swiftui) — shim, Feb 07 '23 at 19:31

shim · Answer 1 · 2023-02-07T20:04:39.943

If you're looking to use a navigation stack, then you'd want to wrap your View body inside a NavigationView. If you're targeting iOS 16+ you should use NavigationStack instead (https://developer.apple.com/documentation/swiftui/migrating-to-new-navigation-types). Hacking with Swift also has an article on NavigationStack.

There is some more useful info on NavigationView on the Hacking with Swift blog here, as well as other resources you should be able to find online. There are some examples there you could use in your situations such as:

struct ContentView: View {
    @State private var isShowingDetailView = false

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Text("Second View"), isActive: $isShowingDetailView) { EmptyView() }
                Button("Tap to show detail") {
                    self.isShowingDetailView = true
                }
            }
            .navigationTitle("Navigation")
        }
    }
}

This question is pretty similar: How to show NavigationLink as a button in SwiftUI

Apple recommends to use the newer `NavigationStack` instead of the now deprecated `NavigationView`. — koen, Feb 07 '23 at 19:56

score 0 · Accepted Answer · answered Feb 08 '23 at 13:13

You need to refactor your code a bit. Use ContentView as your module for navigationStack. Separate ContentView code to WelcomeView and use it as Follows:

struct WelcomeView: View {
@Binding var gotoSomewhere: Bool // I recommend you to read some articles about @Sate and @Binding property wrappers

var body: some View {
    
    VStack (alignment: .leading) {
        Text("Welcome To").font(.system(size: 45)).fontWeight(.heavy).foregroundColor(.primary)
        Text("Pumping Fitness").font(.system(size: 45)).fontWeight(.heavy).gradientForeground(colors: [.red, .yellow])
        Spacer()
        
        VStack (alignment: .leading, spacing: 24) {
            
            
            HStack (alignment: .center, spacing: 20)
            {
                Image(systemName: "dumbbell.fill").resizable().frame(width: 40, height: 30).gradientForeground(colors: [.red, .orange])
                
                VStack (alignment: .leading, spacing: 4) {
                    Text("Track your workouts").bold().font(.system(size: 22)).padding(.top, 10.0)
                    
                    Text("Easily track your progress during you are working out").font(.subheadline).padding(.bottom, 10.0)
                }
            }
            
            
            HStack (alignment: .center, spacing: 20)
            {
                Image(systemName: "timer").resizable().frame(width: 40, height: 40).gradientForeground(colors: [.red, .orange])
                
                VStack (alignment: .leading, spacing: 4) {
                    Text("Auto rest timer").bold().font(.system(size: 22))
                    
                    Text("Start your rest time with one single tap").font(.subheadline).padding(.bottom, 10.0)
                }
            }
            
            
            HStack (alignment: .center, spacing: 20)
            {
                Image(systemName: "figure.run").resizable().frame(width: 40, height: 50).gradientForeground(colors: [.red, .orange])
                
                VStack (alignment: .leading, spacing: 4) {
                    Text("Add your own exercises").bold().font(.system(size: 22))
                    
                    Text("Create your own type of exercises at a glance").font(.subheadline)
                }
            }
            
            
        }
        
        Spacer()
        Spacer()
        
        //HStack creado para poder alinear el boton al centro.
        HStack(alignment: .center) {
                Button(action: {
                    print("Tap Tap")
                    gotoSomewhere = true
                } ) {
                    Text("Start Pumping").fontWeight(.black).foregroundColor(.white)
            }
            .padding()
            .frame(width: 280, height: 60)
            .background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.yellow]), startPoint: .leading, endPoint: .trailing))
            .cornerRadius(17)
            
        }.padding(.leading)
    }.padding(.all, 40)
    
}
}

Then update your contentView with NavigationStack like this:

import SwiftUI
import CoreData

struct ContentView: View {

@State var gotoHomePage: Bool = false // this is important
var body: some View {
    
    NavigationStack {
                VStack {
                    WelcomeView(gotoSomewhere: $gotoHomePage)
                    NavigationLink(isActive: $gotoHomePage) {
                        HomeView() // This is your Home View you want to navigate to
                            .navigationBarBackButtonHidden(true) // if you want a back button then pass false or comment this modifier
                    } label: {
                        EmptyView()
                    }

                }
                .navigationBarHidden(true)
                
            }
    
    
}
}

Hope this helps.

It works! But shows me an alert in `NavigationLink(isActive: $goToHome)` of contentView. The alert is: ***'init(isActive:destination:label:)' was deprecated in iOS 16.0: use NavigationLink(value:label:) inside a NavigationStack or NavigationSplitView*** and I'm looking how to fix this alert fro iOS 16 — Moies Bautista, Feb 09 '23 at 02:19
@MoiesBautista, use this code: `NavigationStack { VStack { WelcomeView(gotoSomewhere: $gotoHomePage) } .navigationDestination(isPresented: $gotoHomePage) { HomeView() } }` — Imrul Kayes, Feb 09 '23 at 03:47

Go to SwiftUi View File "Home" with button

2 Answers2