Search code examples
swiftuiswiftui-navigationlinknavigationviewswiftui-sheet

SwiftUI - Sheet doesn't work in Navigation View


Having issues with a NavigationView and Sheet. I want to use not full-size sheet but bottom sheet and connect LoginView() and SignView() through sheet. At this time, frame of SignView never follow sheet. So I tried two ways to solve. First, LoginView: Has NavigationView out of the sheet and NavigationLink in sheet . But it didn't work. So I put NavigationView in sheet, it works. But the height of the destination View becomes like sheet. How can I solve the problem proper way? Thanks!

import SwiftUI

struct LoginView:View{
    @State var isPlus : Bool = false
    var body: some View{
        NavigationView{
            VStack(alignment:.center){
                Spacer()
                ZStack{
                    Button(action:{
                        self.isPlus = true})
                    {
                            Text("Sign up")
                                .padding(.horizontal,23)
                                .padding(20)
                                .font(.system(size: 25))
                                .fontWeight(.heavy)
                                .background(Color.blue)
                                .foregroundColor(Color.white)
                                .cornerRadius(10)
                        }
                    .sheet(isPresented: $isPlus){
                        VStack{
                            NavigationLink(destination:SignView()){
                                Text("MyCard")
                                    .font(.title)
                                    .foregroundColor(Color.black)
                            }
                        }
                            .presentationDetents([.height(300)])
                    }

                }

            }
        }

    }
}

Solution

  • Hope you can get solution from the below code snippet. By this way we can use sheet in the NavigationView.

    struct LoginView: View {
    
        @State var isPlus : Bool = false
        @State private var showingSheet = false
    
        var body: some View {
               NavigationView {
                VStack(alignment:.center) {
                    Spacer()
                    ZStack{
                        Button(action:{
                            self.isPlus = true})
                        {
                            Text("First Sheet View")
                                .padding(.horizontal,23)
                                .padding(20)
                                .font(.system(size: 25))
                                .background(Color.blue)
                                .foregroundColor(Color.white)
                                .cornerRadius(10)
                        }
                        .sheet(isPresented: $isPlus){
                            VStack{
                                NavigationView {
                                    NavigationLink(destination:SignView()){
                                        Button(action:{
                                            self.showingSheet = true})
                                        {
                                            Text("Full Sheet View")
                                                .padding(.horizontal,23)
                                                .padding(20)
                                                .font(.system(size: 25))
                                                .background(Color.blue)
                                                .foregroundColor(Color.white)
                                                .cornerRadius(10)
    
                                        }
                                        .sheet(isPresented: $showingSheet){
                                            Button("Close"){
                                                showingSheet = false
                                                isPlus = false
                                            }
                                            .presentationDetents([.large])
                                        }
                                    }
                                }
                                .presentationDetents([.medium])
                                .edgesIgnoringSafeArea(.all)
                            }
                        }
                    }
                }
            }
        }
    }