Search code examples
iosxcodelayoutswiftuisafearea

SwiftUI Edges not ignored on simulator


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

Updated Solution

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(Lottie) I'm playing on screen when you go to some screen via navigationLink and come back.

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)
 }
}

Solution

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