Place view right above keyboard on iOS

When my ios apple keyboard shows up I would like to have my view site right on the top edge of it, without any gaps. So far I tried using the NotificationCenter UIResponder.keyboardWillShowNotification but I still get gaps when using the userInfo![UIResponder.keyboardFrameEndUserInfoKey] frame height.
Currently I tried using the view's offset modifier with the keyboard height but it just does not align. Now if I remove the offset entirely it sort of works but then I get no padding between the last element of my view and the top of the keyboard. I hesitate to put my entire code as its rather long, but here it is for review. The offset is towards the bottom.

import SwiftUI

struct MiniAddCommentView: View {
var person: Person
@State var commentTxt: String = ""
@State var showSubTextField = false
@State var height: CGFloat = 0
@Binding var clickedOut: Bool
let placeholder = "Add a comment"

func emojiButton(_ emoji: String) -> Button<Text> {
    Button {
        if self.showSubTextField == false {
            self.showSubTextField = true
        }
        self.commentTxt += emoji
    } label: {
        Text(emoji)
    }
}

var body: some View {
    ZStack {
        HStack(spacing: 10) {
            PersonThumbView(person: person, width: 15, lineWidth: 2)
            
            TextField("Add a comment", text: $commentTxt, onEditingChanged: {_ in
                    if self.clickedOut == true {
                        self.clickedOut = false
                    }
                    self.showSubTextField = true
                    
                })
                .overlay(RoundedRectangle(cornerRadius: 5)
                        .stroke(Color("PrimaryColor"), lineWidth: 0.1))
            
            emojiButton("🤎")
            emojiButton("🙌")
            
            Image(systemName: "plus.circle")
                .instaStyleTertiary()
                .frame(width: 15)
                .padding(.trailing, 10)
        }
        .onAppear {
            NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { (noti) in
                let value = noti.userInfo![UIResponder.keyboardFrameEndUserInfoKey] as! CGRect
                self.height = value.height
                print("keyboard height \(self.height)")
                self.clickedOut = false
            }
            
            NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: .main) { (noti) in
                self.height = 0
                self.showSubTextField = false
            }
        }
        
        if self.showSubTextField == true {
            VStack (spacing: 8) {
                HStack(spacing: 25) {
                    emojiButton("🤎")
                    emojiButton("🙌")
                    emojiButton("🔥")
                    emojiButton("👏")
                    emojiButton("😟")
                    emojiButton("😍")
                    emojiButton("😦")
                    emojiButton("😭")
                }
                .frame(height: 40)
                .font(.system(size: 20))
                .border(Color.blue)
                
                HStack {
                    PersonThumbView(person: person, width: 30, lineWidth: 2)
                        .padding(.trailing, 10)
                    
                    HStack {
                        CustomTextField(text: $commentTxt, isFirstResponder: self.showSubTextField)
                        
                        Button {
                            
                        } label: {
                            Text("Post")
                                .foregroundColor(Color("SecondaryColor"))
                                .font(.system(size: 14))
                                .opacity(0.5)
                        }
                        .padding(.trailing, 10)
                    }
                    .frame(height: 35)
                    .overlay(
                        RoundedRectangle(cornerRadius: 15)
                            .stroke(Color("SecondaryColor"), lineWidth: 0.25)
                    )
                }
                .frame(height: 50)
                .padding(.leading, 4)
                .padding(.trailing, 4)
                .border(Color.blue)
            }
            .background(Color("PrimaryColorInvert"))
            .padding(.trailing, 35)
            .offset(y: -self.height)
            .animation(.spring())
        }
    }
    .onChange(of: self.clickedOut) { clickedOutNew in
        if clickedOutNew == true {
            self.showSubTextField = false
        }
    }
}

}

Terms of Service

Privacy Policy

Cookie Policy