SwiftUI Edges not ignored on simulator

Question

I'm a SwiftUI trainee. On this particular view below there is an issue like in the image. While.ignoreSafeArea(.bottom) or.edgesIgnoreSafeArea(.bottom) works on preview. It does not work on the simulator. I would like to learn is it a bug or am I missing something. Thanks for your help ahead!

Issue screen shot

Below is the view code. Hopefully not that messy.

import SwiftUI

struct ChatView: View {
 // MARK:  properties
 let userName : String
 let userImageUrl : String
 @ObservedObject var viewModel : ChatViewModel = ChatViewModel()
 @ObservedObject var appState : NavigationController = NavigationController.shared


// MARK:  body


 var body: some View {
  ZStack(alignment: .bottom) {
   VStack {
    buildNavigationBar()
    buildMessages()

   } // end of Vstack
   .ignoresSafeArea(edges:.bottom)
   buildInputRow()

  } // end of Zstack
  .ignoresSafeArea(edges:.bottom)

}


 fileprivate func buildInputRow() -> some View {
  return

   HStack(alignment: .center){
    DynamicHorizontalSpacer(size: 30)
    Button {

    } label: {
     Image(systemName: "photo.circle.fill")
      .font(.system(size: 35))
    }
    DynamicHorizontalSpacer(size: 25)
    UnobscuredTextFieldView(textBinding: .constant("Hello"), promptText: "Type!", width: 180, color: .white)
    DynamicHorizontalSpacer(size: 25)
    Button {} label: {
     Image(systemName: "paperplane.fill")
      .font(.system(size: 30))
      .foregroundColor(.accentColor)
    }
    Spacer()
   } // end of HStack
   .frame(width: .infinity, height: 100, alignment: .center)
   .background(Color.gray.opacity(0.4).ignoresSafeArea(edges:.bottom))
 }


 fileprivate func buildMessages() -> some View {
  return ScrollView(showsIndicators: false) {

   ForEach(0...50, id : \.self) { index in
    ChatTileView(index: index)
   }
   .padding(.horizontal,5)

  } // end of scrollview
  .ignoresSafeArea(edges:.bottom)
 }


 fileprivate func buildNavigationBar() -> ChatViewNavigationBar {
  return ChatViewNavigationBar(userImageUrl: self.userImageUrl, userName: self.userName) {
   appState.appState = .Home
  }
 }

}






 fileprivate func buildMessageBox() -> some View {
  return HStack(alignment: .center) {
   Text(
"""
Fake message
"""
   )
    .font(.system(size:11))
    .foregroundColor(.white)
  }
 }
}


fileprivate extension View {
 func messageBoxModifier(index : Int) -> some View {
  self
   .multilineTextAlignment(index.isMultiple(of: 2) ?.trailing : .leading)
   .frame(minHeight: 30)
   .padding(.vertical,7)
   .padding(.horizontal,10)
   .background(index.isMultiple(of: 2) ?  Color.green : Color.mint)
   .cornerRadius(12)
   .shadow(color: .black.opacity(0.3), radius: 5, y: 5)
 }

}

some components used in eg. DynamicHorizantalSpacer

DynamicHorizontalSpacer && Vertical as well they share same logic

struct DynamicVerticalSpacer: View {
 let size : CGFloat?
 var body: some View {
  Spacer()
   .frame(width: 0, height: size ?? 20, alignment: .center)
 }
}

TextField that I'm using.

struct UnobscuredTextFieldView: View {
 @Binding var textBinding : String
 let promptText: String
 let width : CGFloat
 let color : Color
    var body: some View {
     TextField(text: $textBinding, prompt: Text(promptText)) {
      Text("Email")
     }
     .textFieldModifier()
     .modifier(RoundedTextFieldModifier(color:color ,width: width))



    }

}

fileprivate extension  TextField {
 func textFieldModifier() -> some View {
  self
   .textCase(.lowercase)
   .textSelection(.disabled)
   .disableAutocorrection(true)
   .textInputAutocapitalization(.never)
   .textContentType(.emailAddress)
 }
}

Answer 1

The problem was caused by root view logic. When you use navigationLink to navigate another screen on root view causes this problem. I didnt want to use standard NavigationLink to navigate because it was freezing animations I'm playing on screen when you go to some screen via navigationLink and come back.