SwiftUI TextField: Keyboard Open, Close Observer

When SwiftUI was introduced TextField and Software keyboard on iOS didn’t play very well together. You would have to come up with all kinds of observers to listen for keyboard open/close events and work around that. Well that has changed, starting with iOS 14 SwiftUI has solved this problem. There is no extra work needed from our side, as long as the view is inside safeArea, TextField will move up to allow keyboard space and you would still be able to type and see what’s being typed in TextField.

For this example, we will push our username, password fields down so when TextField is focused, the keyboard can push TextFields up so they can stay visible.

struct TextFieldExample: View {
    
    @State private var username = ""
    @State private var password = ""
    
    var body: some View {
        VStack {
            
            Image("dt")
                .resizable()
                .frame(width: 100, height: 100)
                .clipShape(Circle())
                .shadow(color: Color.black, radius: 2, x: 1, y: 1)
                .overlay(Circle().stroke(Color.gray, lineWidth: 2))
Spacer()
            
            //username
            HStack {
                Image(systemName: "person")
                    .foregroundColor(.gray).font(.headline)
                TextField("Username", text: $username)
                    .keyboardType(.emailAddress)
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray, lineWidth: 1))
            .padding(.horizontal)
            
            
            // password
            HStack {
                Image(systemName: "lock.doc.fill")
                    .foregroundColor(.gray).font(.headline)
                TextField("Password", text: $password)
                    .keyboardType(.asciiCapable)
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray, lineWidth: 1))
            .padding(.horizontal)
            
            HStack {
                Button(action: {}) {
                    Label("Login", systemImage: "pencil.and.outline")
                }
                .buttonStyle(.borderedProminent)
                
                
                Button(action: {}) {
                    Label("Cancel", systemImage: "pencil.slash")
                }
                .buttonStyle(.bordered)
            }
        }
    }
}