modelnavigationswiftuiuimodalpresentationstyleswiftui-navigationlink

How to push on new screen after dismiss model sheet in SwiftUI?


I Have to Implement like To create a login screen in the screen user can enter mobile number and click on the login button model sheet will open for top verification after OTP verification sheet must be dismiss and navigate on the dashboard.

Here i created a content View on that contentView click on the Open model button, model sheet (sheetView) will open after the click on done button sheet will dismiss than screen navigate from ContentView to DashboardView.

// ContentView

struct ContentView: View {

    @State var isAction: Bool = false
    @State var isDashboard: Bool = false

    var body: some View {

        NavigationView{

            Button(action: {
                self.isAction.toggle()
            }) {
                Text("Open Model")
            }.sheet(isPresented: $isAction) {

                sheetView(isDissmis: self.$isAction) { (isNavigateOnDashboard) in

                    print(isNavigateOnDashboard ?? false)

                    return self.isDashboard = isNavigateOnDashboard ?? false
                }
            }
            NavigationLink(destination: DashboardView(), isActive: self.$isDashboard) {
                EmptyView()
            }
        }
    }
}

//sheetView:- it presents as modalPresentationStyle in the form of sheet present.

struct sheetView: View {

    @Binding var isDissmis: Bool
    var isNavigateDashboard: ((Bool?)) -> Void?
    var body: some View {

        NavigationView{
            Text("Here i have to verifiy Some details")
                .navigationBarItems(trailing: doneButton)
        }
    }

    var doneButton: some  View {

        Button(action: {
            self.isDissmis = false
            self.isNavigateDashboard(true)
        }) {
            Text("Done").bold()
        }
    }
}

//Dashboard:- after dismiss model(sheet) screen should be navigate on the Dashboard.

struct DashboardView: View {

    var body: some View {

        TabView{

            Text("Home").tabItem{
                Image(systemName: "1.circle")
                Text("Home")
            }

            Text("Activity").tabItem{
                Image(systemName: "2.circle")
                Text("Activity")
            }
            Text("profile").tabItem{
                Image(systemName: "3.circle")
                Text("profile")
            }
        }
    }
}

Any clue for that? 👍🏻


Solution

  • You can change your ContentView body in this way, and when you dismiss the sheet view, it will navigate to DashboardView

    also, there is no need to use clouser callback in your SheetView

    
    var body: some View {
            NavigationView{
                VStack {
                    Button(action: {
                        self.isAction.toggle()
                    }) {
                        Text("Open Model")
                    }.sheet(isPresented: $isAction, onDismiss: {
                        self.isDashboard.toggle()
                    }) {
                        sheetView(isDissmis: self.$isAction)
                    }
                    NavigationLink(destination: DashboardView(), isActive: $isDashboard) {
                        EmptyView()
                    }
                }
            }
        }