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:
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.