Navigation link and scroll view issue SwiftUI - ios

Question

I have a problem with the navigation link and SwiftUI. The navigation bar desapear and my scroll view go up. I have upload a video of the issue on Facebook here the link : the link of the video
This is the code of my main view :
struct MainView: View {
let date = Date()
let calendar = Calendar.current
static let formatter: DateFormatter = {
let formatter = DateFormatter()
formatter.dateStyle = .medium
formatter.timeStyle = .short
return formatter
}()
//MARK: Properties
#ObservedObject var session = FirebaseSession()
let user = Auth.auth().currentUser
#State private var showModal = false
var body: some View {
NavigationView{
// Group {
ZStack {
if session.session != nil {
ScrollView {
VStack{
ScrollView(.horizontal, showsIndicators: false){
HStack{
NavigationLink(destination: RedactorView()) {
RedactorListItem()
}.buttonStyle(PlainButtonStyle())
RedactorListItem()
RedactorListItem()
RedactorListItem()
RedactorListItem()
RedactorListItem()
}//.padding()
}
VStack(alignment: .leading, spacing: 5) {
HStack {
Text("Les derniers médias")
.font(.largeTitle)
.bold()
Spacer()
Text("Voir plus >")
.padding(8)
.background(Color(UIColor.secondarySystemBackground))
.clipShape(Capsule())
}.padding(.horizontal)
ScrollView(.horizontal, showsIndicators: false){
HStack{
NavigationLink(destination: MotherView(viewRouter: ViewRouter())){
MediaListRow()
.frame(width: UIScreen.main.bounds.width/1.15)
.scaledToFit()
}.buttonStyle(PlainButtonStyle())
MediaListRow()
.frame(width: UIScreen.main.bounds.width/1.15)
.scaledToFit()
MediaListRow()
.frame(width: UIScreen.main.bounds.width/1.15)
.scaledToFit()
MediaListRow()
.frame(width: UIScreen.main.bounds.width/1.15)
.scaledToFit()
MediaListRow()
.frame(width: UIScreen.main.bounds.width/1.15)
.scaledToFit()
}
}
HStack {
Text("Les derniers articles :")
.font(.largeTitle)
.bold()
Spacer()
Text("Voir plus >")
.padding(8)
.background(Color(UIColor.secondarySystemBackground))
.clipShape(Capsule())
}.padding(.horizontal)
ArticleListRow()
ArticleListRow()
ArticleListRow()
}
}
.navigationBarTitle("WYN")
.navigationBarHidden(true)
}.navigationViewStyle(StackNavigationViewStyle()).padding(.top, 90)
ZStack{
VStack{
HStack{
VStack(alignment: .leading) {
VStack {
VStack(alignment: .leading){
HStack{
Text("What You Need")
.font(.system(.largeTitle, design: .serif))
.bold()
Spacer()
Button(action: {
self.showModal.toggle()
}) {
Image(systemName: "person.crop.circle.fill")
.font(.largeTitle)
.foregroundColor(.primary)
}
.sheet(isPresented: $showModal){
SettingView(showModal: self.$showModal)
}
}
Text("\(date, formatter : MainView.self.formatter)")
.font(.callout)
.bold()
.foregroundColor(Color(UIColor.systemGray4))
}
/*
Rectangle()
.frame(height: 2)
.cornerRadius(1)
.foregroundColor(Color(UIColor.systemGray5))
*/
}
.padding(.horizontal)
.padding(.top, 20)
}.background(Color(UIColor.systemBackground)).frame(minWidth: 0, maxWidth: .infinity).frame(height: 75)
}
Spacer()
}
}
} else {
Authentification()
}
}
.onAppear(perform: getUser)
//}
.navigationBarTitle("Menu Principal")
.navigationBarHidden(true)
}.navigationViewStyle(StackNavigationViewStyle())
}
//MARK: Functions
func getUser() {
session.listen()
}
}
and this the code of my detail view :
import SwiftUI
struct RedactorView: View {
var body: some View {
// NavigationView {
ScrollView {
VStack(alignment: .leading) {
HStack{
Image("P1")
.resizable()
.scaledToFill()
.frame(width: 115, height: 115)
.clipShape(Circle())
.padding(.trailing)
VStack(alignment: .leading){
Text("Prénom")
.font(.largeTitle)
.bold()
Text("Nom")
.font(.largeTitle)
.bold()
HStack {
VStack(alignment: .center){
Text("10")
.bold()
Text("Articles")
.foregroundColor(Color(UIColor.secondaryLabel))
}
VStack(alignment: .center){
Text("5")
.bold()
Text("Medias")
.foregroundColor(Color(UIColor.secondaryLabel))
}
}.padding(.top)
}
Spacer()
}.padding(.horizontal)
ScrollView(.horizontal, showsIndicators: false) {
HStack {
HStack{
Text("Email")
.bold()
Image(systemName: "envelope.fill")
// .foregroundColor(Color(UIColor.systemBlue))
}.foregroundColor(Color(UIColor.systemBlue))
.padding(8)
.background(Color(UIColor.systemBackground))
.clipShape(Capsule())
.shadow(color: Color(UIColor.systemGray6), radius: 10)
HStack{
Text("Instagram")
.bold()
Image(systemName: "heart.fill")
}.foregroundColor(Color(hue: 0.93, saturation: 0.81, brightness: 0.84)).padding(8)
.background(Color(UIColor.systemBackground))
.clipShape(Capsule())
.shadow(color: Color(UIColor.systemGray6), radius: 10)
HStack{
Text("Message")
.bold()
Image(systemName: "message.fill")
}.foregroundColor(Color(UIColor.systemGreen))
.padding(8)
.background(Color(UIColor.systemBackground))
.clipShape(Capsule())
.shadow(color: Color(UIColor.systemGray6), radius: 10)
HStack{
Text("Téléphone")
.bold()
Image(systemName: "phone.fill")
}.foregroundColor(Color(UIColor.systemGreen)).padding(8)
.background(Color(UIColor.systemBackground))
.clipShape(Capsule())
.shadow(color: Color(UIColor.systemGray6), radius: 10)
}.padding()
}
VStack(alignment: .leading, spacing: 5) {
Text("Ses Medias :")
.font(.largeTitle)
.bold()
.padding(.leading)
ScrollView(.horizontal, showsIndicators: false){
HStack{
MediaListRow()
.frame(width: UIScreen.main.bounds.width/1.15)
.scaledToFit()
MediaListRow()
.frame(width: UIScreen.main.bounds.width/1.15)
.scaledToFit()
MediaListRow()
.frame(width: UIScreen.main.bounds.width/1.15)
.scaledToFit()
MediaListRow()
.frame(width: UIScreen.main.bounds.width/1.15)
.scaledToFit()
MediaListRow()
.frame(width: UIScreen.main.bounds.width/1.15)
.scaledToFit()
}
}
Text("Ses Articles :")
.font(.largeTitle)
.bold()
.padding(.leading)
ArticleListRow()
ArticleListRow()
ArticleListRow()
}
}.navigationBarTitle("Redactor")
}
// }//.padding(.top, -20)
}
}
I don't know what is the solution of this I hope it open normal but it don't find and I have the same with all scroll view. Please help me.

Answer 1

it is missing a .edgesIgnoringSafeArea(.top) on the navigationView which can give you the safeArea guard.