skip to Main Content

I’m trying to make an exercise app and when a user finishes a set of exercises, I want them to be able to press a button to go back into the home screen.

There are 5 exercises in total, so I made 5 exercise views that shows the 5 different exercises and each exercise view has a navigation link at the bottom to lead to the next exercise. When a user reaches the last exercise, I want the button at the bottom to bring them back to the home screen but when I did that, there would be a back button at the top. Is there any way to go back to the home screen from that view without the back button?

Code for the last exercise screen:

import SwiftUI
import AVKit

struct ExerciseScreen5View: View {
    
    var countdownTimer = 300
    @State var player = AVPlayer()
    var exercisePlan: ExercisePlan
    
    var body: some View {
        VStack {
            
            Text(exercisePlan.exercise5.title)
                .font(.system(size: 35, weight: .medium))
                .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
            
            VideoPlayer(player: exercisePlan.exercise5.video)
                .scaledToFit()
                .frame(alignment: .center)
                .cornerRadius(10)
                .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
            
            Text(exercisePlan.exercise5.steps)
                .font(.system(size: 20, weight: .regular))
                .padding()
                .frame(alignment: .center)
            
            
            TimerView()
                .padding(EdgeInsets(top: 0, leading: 0, bottom: 35, trailing: 0))
            
            NavigationLink(destination: ContentView())
            {
                Text("Return to Home Screen")
                    .padding()
                    .background((Color(red: 184/255, green: 243/255, blue: 255/255)))
                    .foregroundColor(.black)
                    .cornerRadius(10)
            }
            
        }
    }
    
}
struct ExerciseScreen5View_Previews: PreviewProvider {
    static var previews: some View {
        ExerciseScreen5View(exercisePlan: ExercisePlan(title: "Exercise Plan 1", details: "Choose this plan for a more basic workout",
            exercise: Exercise(title: "Tricep Stretch", duration: 5, steps: "Lift your left elbow straight up while bending your arm. Grab your left elbow with your right hand and pull your left elbow towards your head or slightly behind your head with light pressure. (We recommend doing 10 seconds per rep)", video: AVPlayer(url:  Bundle.main.url(forResource: "TricepStretch" , withExtension: "MOV")!)),
            exercise2: Exercise(title: "Toe Touches", duration: 5, steps: "Sit with your legs closed and toes pointing up. Keep your knees straight while stretching your arms forward to touch your toes. (We recommend doing 20 seconds per rep)", video: AVPlayer(url:  Bundle.main.url(forResource: "ToeTouches" , withExtension: "MOV")!)),
           exercise3: Exercise(title: "Arm Circles", duration: 5, steps: "Hold your arms straight out to your sides, then swing them forwards or backwards in circles. Try to keep your shoulders down while doing this exercise. (We recommend doing 20 seconds per rep then changing sides)", video: AVPlayer(url:  Bundle.main.url(forResource: "ArmCircles" , withExtension: "MOV")!)),
          exercise4: Exercise(title: "Elbow Stretch", duration: 5, steps: "Lift your left arm up while pushing it towards your chest, with your elbow pointing forward. (We recommend doing 10 seconds per rep)", video: AVPlayer(url:  Bundle.main.url(forResource: "ElbowStretch" , withExtension: "MOV")!)),
        exercise5: Exercise(title: "Calf Raises", duration: 5, steps: "Raise your heels off the floor and return to the starting position, by slowly lowering your heels. (We recommend doing 20 seconds per rep)", video: AVPlayer(url:  Bundle.main.url(forResource: "CalfRaises" , withExtension: "MOV")!))
                                                      ))
    }
}

enter image description here

2

Answers


  1. You can use the navigationBarBackButtonHidden() modifier to hide the back button.

    To return to the home view, then if you’re only one level deep in the navigation stack you can use the system’s dismiss() function, which you get from the environment:

    struct MyView: View {
      @Environment(.dismiss) private var dismiss
    
      var body: some View {
        Button("Go back") { dismiss() }
      }
    }
    
    Login or Signup to reply.
  2. With the NavigationView this is not an easy task to acomplish. There are solutions out there but:

    NavigationView is deprecated by now. You should use the new NavigationStack Api.

    As your example is not reproducible I compiled a more general example how navigation across multiple levels could be implemented.

    struct ContentView: View{
        
        @State private var navigationPath: NavigationPath = NavigationPath()
        
        var body: some View{
            NavigationStack(path: $navigationPath) {
                Button{
                    // go to the first view
                    // this is implemented as button here, but can also be done by
                    // a simple NavigtationLink
                    navigationPath.append("exercise1")
                } label: {
                    Text("up")
                }
                // here you tell the navigationstack what view to show
                .navigationDestination(for: String.self) { name in
                    switch name{
                    case "exercise1":
                        // pass the navigationpath on as binding
                        ExerciseView1(navigationPath: $navigationPath)
                    case "exercise2":
                        ExerciseView2(navigationPath: $navigationPath)
                    default:
                        EmptyView()
                    }
                }
            }
        }
    }
    
    struct ExerciseView1: View{
        // create a binding to manipulate the navigation stack
        @Binding var navigationPath: NavigationPath
        
        var body: some View{
            Text("exercise1")
                .onTapGesture {
                    // push the next view to the stack
                    navigationPath.append("exercise2")
                }
     
        }
    }
    
    struct ExerciseView2: View{
        @Binding var navigationPath: NavigationPath
        
        var body: some View{
            Text("exercise2")
     
            Button("Go back"){
                // pop back to the root view
                navigationPath = NavigationPath()
            }
        }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search