I have three views inside of TabView, each with a naviagtionTitle. However, when the first view shows up, the navigationTitle leads almost off the screen. It is only when I click to another page and then back to the original that the navigationTitle appears in the correct placement. What could be the problem?
struct OnboardingView : View {
@Binding var shouldShowOnboarding: Bool
var body : some View {
TabView {
PageView(imageName: "Onboarding",
title: "Zone Out of This World",
showsDismissButton: false,
shouldShowOnboarding : $shouldShowOnboarding)
PageView(imageName: "Onboarding",
title: "Improve Your Focus",
showsDismissButton: false,
shouldShowOnboarding : $shouldShowOnboarding)
PageView(imageName: "Onboarding",
title: "Meditate to Relax",
showsDismissButton: true,
shouldShowOnboarding : $shouldShowOnboarding)
}
.tabViewStyle(PageTabViewStyle())
.edgesIgnoringSafeArea(.all)
}
}
struct PageView : View {
let imageName: String
let title: String
let showsDismissButton : Bool
@Binding var shouldShowOnboarding: Bool
var body: some View {
NavigationView {
ZStack {
Image(imageName)
.ignoresSafeArea()
if showsDismissButton {
Button(action: {
shouldShowOnboarding.toggle()
}, label: {
Text("Get Started")
.frame(width: 352, height: 57)
.background(Color(#colorLiteral(red: 0.8470588326454163, green: 0.37254902720451355, blue: 0.27450981736183167, alpha: 1)))
.foregroundColor(Color.white)
.cornerRadius(30)
.padding(.top, 600)
})
}
}
.navigationTitle(title)
}
.navigationViewStyle(.stack)
}
}
I have included screenshots.
Incorrect placement:
Correct placement:
