Help Navigating Screens

[kiki21a]

I am in desperate need of help with figuring out how to navigate my screens. I’ve tried everything, I looked at the videos but Chris is using a different way to get to another screen and I looked at the basic of SwiftUi videos and still nothing, it’s completely different than mine, and I tried what you said and still didn’t work

struct WelcomeView: View {
    var body: some View {
    
        ZStack {
            Image("birthday")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
                
            VStack(alignment: .center) {
            Spacer()
            
            Text("Welcome to Smilon!!")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(Color.black)
                .multilineTextAlignment(.center)
            
            
            Spacer()
            
            Button("Join") {
                //go to AboutUs view
            }
            .padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
            .font(.title)
            .shadow(radius: 2)
            .foregroundColor(Color.black)
                
                Text("By tapping Join, you agree to our privacy policy")
                    .fontWeight(.bold)
                    .foregroundColor(Color.black)
                    .padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
            }
        }
}

    struct WelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        WelcomeView()
    }
}
}

This is code I have right now and I’m trying to navigate through the screens

[mikaelacaron]

You’re showing a WelcomeView, you want to navigate from this screen to which one? Do you want this to be in a NavigationView ??

Also you need to click enter on the .padding(.all) parts of your code because the autocomplete filled it in, but you haven’t actually “accepted” that as what you want. Which is why in this code snippet it shows “start menu token”

[kiki21a]

Okay! And i’m wanting to Welcome Screen to the About Us Screen then go the Event screen then the Message Screen then finally to the end screen. I have five screens that will be on the app

[mikaelacaron]

You need to put the first screen into a NavigationView and you’ll use a navigation link to go from one screen to the next

[kiki21a]

Okay, but how do I do that exactly, I looked at Chris’s videos and he uses them in a different way. Can you please show me or something

[mikaelacaron]

If you search NavigationView or NavigationLink you could find this article which shows you how to do this. You then apply this concept to your code

import SwiftUI

struct ContentView: View {
   var body: some View {
      NavigationView {
         NavigationLink(destination: SecondContentView()) {
            Text("Press on me")
         }
      }
   }
}

struct SecondContentView: View {
   var body: some View {
      Text("Hello, World!")
   }
}

[Chris_Parker]

Expanding on what Mikaela has shown you, here are 3 different methods of transitioning from one screen to another from the “Home Screen” ( ContentView).

Create a test project and replace ContentView with this one:

import SwiftUI

struct ContentView: View {
    @State private var isShowingFirstView = false
    @State private var isShowingSecondView = false

    var body: some View {
        NavigationView {
            VStack(spacing: 20) {
                Text("Navigating from one screen to another")

                Button {
                    //  Present a sheet View
                    isShowingFirstView = true
                } label: {
                    Text("Select First View")
                }

                Button {
                    //  Present a fullScreenCover View
                    isShowingSecondView = true
                } label: {
                    Text("Select Second View")
                }

                //  Navigate using a Navigation Link
                NavigationLink(destination: ThirdView()) {
                    Text("Navigation Link to Third View")
                }

            }
            .navigationTitle("Navigation Demo")
            .sheet(isPresented: $isShowingFirstView) {
                FirstView()
            }
            .fullScreenCover(isPresented: $isShowingSecondView) {
                SecondView(isShowingSecondView: $isShowingSecondView)
            }
        }

    }
}

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

Create a SwiftUI file with the name: FirstView and paste this code into it overwriting what is already there.

import SwiftUI

struct FirstView: View {
    var body: some View {
        ZStack {
            Color.yellow
                .opacity(0.5)
                .ignoresSafeArea()
            VStack(spacing: 20) {
                Text("First View")
                    .font(.largeTitle)
                Text("Drag down to Dismiss")
            }
        }
    }
}

struct FirstView_Previews: PreviewProvider {
    static var previews: some View {
        FirstView()
    }
}

Create another SwiftUI file with the name: SecondView and paste this code into it overwriting what is already there.

import SwiftUI

struct SecondView: View {
    @Binding var isShowingSecondView: Bool

    var body: some View {
        ZStack {
            Color.green
                .opacity(0.5)
                .ignoresSafeArea()
            VStack(spacing: 20) {
                Text("Second View")
                    .font(.largeTitle)
                Button("Tap to Dismiss") {
                    isShowingSecondView = false
                }
            }
        }
    }
}

struct SecondView_Previews: PreviewProvider {
    static var previews: some View {
        SecondView(isShowingSecondView: .constant(false))
    }
}

Create a third SwiftUI file with the name: ThirdView and paste this code into it overwriting what is already there.

import SwiftUI

struct ThirdView: View {
    var body: some View {
        ZStack {
            Color.red
                .opacity(0.5)
                .ignoresSafeArea()
            VStack(spacing: 20) {
                Text("Third View")
                    .font(.largeTitle)
                Text("Tap the < Back button to return.")
            }
            .navigationTitle("Third View")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct ThirdView_Previews: PreviewProvider {
    static var previews: some View {
        ThirdView()
    }
}

[kiki21a]

I did everything right but I got one error on the Content View screen it says “Cannot find ‘$isShowingFirstView’ in scope”

import SwiftUI

struct ContentView: View {
    @State private var isShowingFirst = false
    @State private var isShowingSecondView = false

    var body: some View {
        NavigationView {
                    VStack(spacing: 20) {
                        Text("Navigating from one screen to another")

                        Button {
                            //  Present a sheet View
                            isShowingFirstView = true
                        } label: {
                            Text("Select First View")
                        }

                        Button {
                            //  Present a fullScreenCover View
                            isShowingSecondView = true
                        } label: {
                            Text("Select Second View")
                        }

                        //  Navigate using a Navigation Link
                        NavigationLink(destination: ThirdView()) {
                            Text("Navigation Link to Third View")
                        }

                    }
                    .navigationTitle("Navigation Demo")
                    .sheet(isPresented: $isShowingFirstView) {
                        FirstView()
                    }
                    .fullScreenCover(isPresented: $isShowingSecondView) {
                        SecondView(isShowingSecondView: $isShowingSecondView)
                    }
                }

            }
        }
                    
    ```

[kiki21a]

Making this app is harder and more stressful than I thought it would be

[Chris_Parker]

If you look back at the sample I provided you the variable is named isShowingFirstView whereas you have it as isShowingFirst. Change that and it should compile and run assuming that you have created the other 3 files as suggested.

[Chris_Parker]

The reason that you are finding coding difficult is that it is new to you. The truth is that coding is not necessarily for everyone and some of us find the learning process takes longer than it does for others.

You also appear to be struggling to comprehend the fundamentals of SwiftUI. Please don’t take my remarks the wrong way but I would recommend that you go over the 14 Day Beginner Challenge (SwiftUI) again.

[kiki21a]

Okay, so a couple of things. I created and tried the test project that you were talking about and it worked on there, and the result that I am wanting is the third method, so I tried it with the app file that I have and it didn’t work! I am so close to getting done with my app, I just need to navigate through the screens, put a button on my last screen(which i tried but it didn’t work for some reason), and create and link my privacy policy to the first screen.

Here is the code for the navigation that I used

import SwiftUI

struct WelcomeView: View {
    var body: some View {
        
        ZStack {
            Image("birthday")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
                
            VStack(alignment: .center) {
            Spacer()
            
            Text("Welcome to Smilon!!")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(Color.black)
                .multilineTextAlignment(.center)
            
            
            Spacer()
            
            Button("Join") {
                //go to AboutUs view
            }
            .padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
            .font(.title)
            .shadow(radius: 2)
            .foregroundColor(Color.black)
                
                Text("By tapping Join, you agree to our privacy policy")
                    .fontWeight(.bold)
                    .foregroundColor(Color.black)
                    .padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
                    
                    
                .navigationTitle("Welcome")
                .navigationBarTitleDisplayMode(.inline)
            }
            
        }
}

[Chris_Parker]

@kiki21a

See the image below where the arrows are pointing.

Place your cursor on those and tap the return key to accept .all or change it to whatever padding you need.

padding(.all) is the same as .padding()

If this is the initial screen that users are presented with then there is a problem in that you are saying that “By tapping Join, you agree to our privacy policy”, but you have not given the user the opportunity to read through the Privacy Policy.

You should present to the user all of the Terms of Use and Privacy Policy details BEFORE you give the user the opportunity to Join OR you add a button to let the user read all that and then return to this screen.

[kiki21a]

I was going to add a hyperlink like you did in your chat app where they can click privacy policy and it will be direct them to the click.

And by accepting all the padding will that help with the navigation issue that im having

[roosterboy]

What—exactly—is the navigation issue you are having? “it didn’t work!” tells us nothing.

And I’ll note that you still aren’t telling your Button to do anything when it is tapped:

Button("Join") {
    //go to AboutUs view
}

You need to put something there to navigate to the next screen or of course it will go nowhere.

[Chris_Parker]

Just to be clear here, I am not Chris Ching who owns CodeWithChris. I am one of a number of moderators here helping people where I can.

Take note of what roosterboy is saying in the post immediately above.

[kiki21a]

I did exactly what Chris said to do for the third method of transitioning but nothing worked. And “You need to put something there to navigate to the next screen or of course, it will go nowhere.”(Where do I put the navigation at, I put the navigation bar title after everything.

import SwiftUI

struct WelcomeView: View {
    var body: some View {
        
        ZStack {
            Image("birthday")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
                
            VStack(alignment: .center) {
            Spacer()
            
            Text("Welcome to Smilon!!")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(Color.black)
                .multilineTextAlignment(.center)
            
            
            Spacer()
            
            Button("Join") {
                //go to AboutUs view
            }
            .padding(.all)
            .font(.title)
            .shadow(radius: 2)
            .foregroundColor(Color.black)
                
                Text("By tapping Join, you agree to our privacy policy")
                    .fontWeight(.bold)
                    .foregroundColor(Color.black)
                    .padding(.all)
                    
                    
                .navigationTitle("Welcome")
                .navigationBarTitleDisplayMode(.inline)
            }
            
        }
}

    struct WelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        WelcomeView()
    }

[mikaelacaron]

I would HIGHLY recommend you watch. The 14 day challenge again.

Your question is answered in Chris’ post above.

Here @roosterboy shows you need to add something to your button or nothing will happen. And Chris post that I already linked shows several methods of what you need to add

[kiki21a]

Okay, i’ll watch it once more, and do everything again. If it still doesn’t work then i’ll try to figure it out myself

[mikaelacaron]

You can ask a question and show us your code and what specifically isn’t working, but for this specific question we’ve resolved the issue. If you follow Chris’ suggestion