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!")
}
}
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()
}
}
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)
}
}
}
}
```Making this app is harder and more stressful than I thought it would be
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.
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.
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)
}
}
}
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.
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
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.
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.
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()
}
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
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
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
Here is the code recently, the solution didn’t work, the button/navigation still isn’t working. Can someone show me it through the screens that I have
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)
.shadow(radius: 2)
.font(.title)
Text("By tapping Join, you agree to our privacy policy")
.fontWeight(.bold)
.foregroundColor(Color.black)
.padding(.all)
.navigationTitle("Welcome View")
.navigationBarTitleDisplayMode(.inline)
}
}
}
struct WelcomeView_Previews: PreviewProvider {
static var previews: some View {
WelcomeView()
}
}
}
But you didn’t. The third method Chris showed for triggering navigation to another screen used a NavigationLInk; there is no NavigationLink in your code anywhere. As far as I can see, all you did was add .navigationTitle() and .navigationBarTitleDisplayMode() modifiers. Those don’t give you the ability to navigate to other screens.
One more time: You haven’t put anything inside the action closure of your Button. How do you expect the Button to do anything if you don’t tell it what to do? You need to put something in there besides a comment to tell your code to move to another screen. This is where the first or second method Chris showed you could be used, for instance.
As an example, using the second method Chris showed:
struct WelcomeView: View {
@State private var moveToAbout = false
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") {
moveToAbout.toggle()
}
.padding(.all)
.shadow(radius: 2)
.font(.title)
.fullScreenCover(isPresented: $moveToAbout) {
//nothing here
} content: {
AboutUs()
}
Text("By tapping Join, you agree to our privacy policy")
.fontWeight(.bold)
.foregroundColor(Color.black)
.padding(.all)
}
}
}
}
struct WelcomeView_Previews: PreviewProvider {
static var previews: some View {
WelcomeView()
}
}
(Note too that you had your preview inside of WelcomeView.)
I have been going through that Chris said on the last post again with the three methods for nagivation and I am doing the third one and I came across two errors, also can you tell me if I’m doing this right now?
import SwiftUI
struct ContentView: View {
@State private var isShowingWelcomeView = false
@State private var isShowingAboutUsView = false
@State private var isShowingEventView = false
@State private var isShowingMessageView = false
@State private var isShowingEndView = false
var body: some View {
NavigationView {
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") {
}
.padding(.all)
.shadow(radius: 2)
.font(.title)
.foregroundColor(Color.black)
// Navigate using a Navigation Link
NavigationLink(destination: AboutUsView()) {
}
.navigationTitle("Welcome")
.sheet(isPresented: $isShowingWelcomeView) {
WelcomeView()
}
.fullScreenCover(isPresented: $isShowingAboutUsView) {
AboutUsView(isShowingAboutUsView: $isShowingAboutUsView)
.fullScreenCover(isPresented: $isShowingEventView) {
EventView(isShowingEventView: $isShowingEventView)
.fullScreenCover(isPresented: $isShowingMessageView) {
MessageView(isShowingMessageView: $isShowingMessageView)
.fullScreenCover(isPresented: $isShowingEndView) {
EndView(isShowingEndView: $isShowingEndView)
}
}
}
Text("By tapping Join, you agree to our privacy policy")
.fontWeight(.bold)
.foregroundColor(Color.black)
.padding(.all)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
}
}
}
can someone please tell me how to fix these erros
I mean this in the nicest possible way, but…
You can’t solve a problem by just throwing code at it. You need to understand the code samples people give you before you can use them correctly.
Once again I would like to gently suggest refreshing your knowledge by going back over some of the courses or even looking at other resources as well. Navigation is a fundamental aspect of a SwiftUI app and you seem to lack even a cursory understanding of it. You need to know what the difference is between the various methods of navigating through different screens.
I also note that you still have not added any code to the action closure of your Button, even after I gave you an example of what to do. If you don’t want to trigger navigation from a button tap, that’s fine, but then why is that Button there in the first place?
Please take some time to really study the examples people have given you and also refresh your learning before trying to solve your navigation issues again. Stepping back from the immediate problem to gain a better understanding of what you are trying to do will not only help in this case but moving forward as well.
