1

I have new SwiftUI .keyboard toolbar added. And it works great with Swiftui TextFields. But I consider if it is possible and how can it be done to use this toolbar also with UITextFields wrapped in UIViewRepresentable. I don’t know if I am doing something wrong or this isn’t supported.

Michał Ziobro
  • 10,759
  • 11
  • 88
  • 143
  • UIViewRepresentable wraps the UITextField so it would act like a UIView, if you try to use a wrapped textfield and change its foreground color to black in SwiftUI it would not work. So I don't think it would work, but give a try! – Timmy Jan 19 '22 at 17:26

1 Answers1

0

I had the same problem and couldn't find an answer, so I tried to recreate this keyboard toolbar in SwiftUI. Here is the code:

struct SomeView: View {
    @State var text = ""
    @State var focusedUITextField = false
    
    var body: some View {
        NavigationStack {
            ZStack {
                VStack {
                    Button("Remove UITextField focus") {
                        focusedUITextField = false
                    }
                    
                    TextField("SwiftUI", text: $text)
                    
                    CustomTextField(hint: "UIKit", text: $text, focused: $focusedUITextField)
                        .fixedSize(horizontal: false, vertical: true)
                }
                .padding(.horizontal)
                
                if focusedUITextField {
                    VStack(spacing: 0) {
                        Spacer()
                        Divider()
                        
                        keyboardToolbarContent
                            .frame(maxWidth: .infinity, maxHeight: 44)
                            .background(Color(UIColor.secondarySystemBackground))
                    }
                }
            }
            /*
            .toolbar {
                ToolbarItem(placement: .keyboard) {
                    keyboardToolbarContent
                }
            }
             */
        }
    }
    
    var keyboardToolbarContent: some View {
        HStack {
            Rectangle()
                .foregroundColor(.red)
                .frame(width: 50, height: 40)
            
            Text("SwiftUI stuff")
        }
    }
}

And for the custom UITextField:

struct CustomTextField: UIViewRepresentable {
    let hint: String
    @Binding var text: String
    @Binding var focused: Bool
    
    func makeUIView(context: Context) -> UITextField {
        let uiTextField = UITextField()
        uiTextField.delegate = context.coordinator
        uiTextField.placeholder = hint
        
        return uiTextField
    }
    
    func updateUIView(_ uiTextField: UITextField, context: Context) {
        uiTextField.text = text
        uiTextField.placeholder = hint
        if focused {
            uiTextField.becomeFirstResponder()
        } else {
            uiTextField.resignFirstResponder()
        }
    }
    
    func makeCoordinator() -> Coordinator {
        return Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {
        let parent: CustomTextField
        
        init(parent: CustomTextField) {
            self.parent = parent
        }
        
        func textFieldDidBeginEditing(_ textField: UITextField) {
            parent.focused = true
        }
        
        func textFieldDidEndEditing(_ textField: UITextField) {
            parent.focused = false
        }
    }
}

Unfortunately the animation of the custom toolbar and the keyboard don't match perfectly. I would challenge the guy in the comments from this post How to add a keyboard toolbar in SwiftUI that remains even when keyboard not visible but sadly I can't comment.

Also the background color doesn't match the native toolbar exactly, I don't know which color is used there.

Knufy Einundzwanzig
  • 86
  • 4