3

I am currently in the process of creating a flow for my app, however due to the required appearance of the navigation bar being larger than normal, I have created a custom nav bar and have added it to the toolbar component. I only have the NavigationView set on the landing screen and am using NavigationLinks to navigate through the app. The problem is whenever I go through the flow, the first screen appears as intended but when I go into the second screen, the custom nav will appear as normal for a split second then will get cut off. See Screenshots below:

First View

Second View

When I go back to the first screen, it is also cut off. Below is the code to create the custom

@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

     var btnBack : some View {
         Button(action: {
         self.presentationMode.wrappedValue.dismiss()
         },
        label: {
             HStack {
             Image("Left_Chevron")
                 .aspectRatio(contentMode: .fit)
                 .foregroundColor(.white)
             }
         })
     }

    var navTitle = LocalizedStringKey("")
    var navSubtitle = LocalizedStringKey("")

    var body: some View {
        VStack(spacing: 5) {
            Spacer()
                btnBack
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.top, 50)
                    .offset(x: -5)
            Text(navTitle)
                .foregroundColor(.white)
                .font(.custom("Barlow-SemiBold", size: 24))
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.bottom, 4)
            Text(navSubtitle)
                .foregroundColor(Color.init(UIColor(red: 0.796, green: 0.796, blue: 0.796, alpha: 1)))
                .font(.custom("Barlow-Regular", size: 16))
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.bottom)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

Below is how this is an example on how it's called:

var body: some View {
    ZStack(alignment: .top) {
        VStack { 
            CommonTextfield(fieldTxt: $fieldTxt, placeholder: "Email Address")
                .padding(.bottom, 150)
            PrimaryButtonMed.init(destination: VerifyEmailView(), btnTitle: "reset_password")
                .padding(.trailing, -180)
                .opacity(validator.validateEmail(email: fieldTxt) ? 1 : 0.6)
                .disabled(!validator.validateEmail(email: fieldTxt))
            Spacer()
        }
        .padding()
        .background(Color.black.opacity(0.9))
        .ignoresSafeArea(.all, edges: .bottom)
        .navigationBarHidden(false)
        .navigationBarBackButtonHidden(true)
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                NavigationViewToolBar(navTitle: "reset_password", navSubtitle: "reset_password_desc")
            }
        }
    }
}

Finally the init for the Navigation Bar:

init() {
    navAppearance.configureWithTransparentBackground()
    navAppearance.backgroundColor = .black.withAlphaComponent(0.8)
    navAppearance.titleTextAttributes = [.foregroundColor: UIColor.white, .font: UIFont.systemFont(ofSize: 80)]
    navAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white, .font: UIFont.systemFont(ofSize: 80)]
    UINavigationBar.appearance().tintColor = .white
    UINavigationBar.appearance().standardAppearance = navAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
 }

Any solution to this problem will be greatly appreciated.

burnsi
  • 6,194
  • 13
  • 17
  • 27
  • I've had this issue too. Have you checked out [this question?](https://stackoverflow.com/questions/68853236/swiftui-toolbar-item-getting-clipped-when-back-button-is-pressed) –  Jun 02 '22 at 18:01

0 Answers0