Natalia Panferova
11 February 2020

Scroll TextField into visible range in SwiftUI by wrapping UITextField


Update: This article was written for iOS 13. On iOS 14 beta 5 a text field will be automatically scrolled into visible range when keyboard appears on screen. We no longer need to wrap UITextField for this purpose.


Its quite common to have a text field inside a scroll view in iOS apps. In order to provide a nice user experience we should scroll the text field into visible range when it becomes active and the keyboard appears on screen. In UIKit we can call the scrollRectToVisible method on the scroll view to achieve that. What would be the simplest way to get this functionality in SwiftUI?


iPad screenshot iPad screenshot


We wanted to wrap as few UIKit views as possible, so we decided to only wrap the UITextField. This approach works when the text field is a child (direct or nested) of SwiftUI's ScrollView, List view or Form.


We will look into a simple example of a List view with multiple text fields inside. We are using our custom view TextFieldWithKeyboardObserver instead of a regular SwiftUI TextField.


List {
    ForEach(0...textStrings.count - 1, id: \.self) { index in
        TextFieldWithKeyboardObserver(
            text: self.$textStrings[index],
            placeholder: "TextField number \(index + 1)"
        )
    }
}


The full code for the TextFieldWithKeyboardObserver is on GitHub. You can read more about wrapping UIKit views in Apple Documentation.


The first interesting part is that instead of returning a regular UITextField in the makeUIView method, we are returning our subclass UITextFieldWithKeyboardObserver and we are calling its method setupKeyboardObserver.


func makeUIView(context: Context) -> UITextField {
    let view = UITextFieldWithKeyboardObserver()
    view.delegate = context.coordinator
    view.text = text
    view.placeholder = placeholder
    view.setupKeyboardObserver()
    
    return view
}


In that method our view is subscribing to the keyboard updates.


func setupKeyboardObserver() {
    keyboardPublisher = KeybordManager.shared.$keyboardFrame
        .receive(on: DispatchQueue.main)
        .sink { [weak self] keyboardFrame in
            
            if let strongSelf = self, let keyboardFrame = keyboardFrame  {
                strongSelf.update(with: keyboardFrame)
            }
    }
}


And in the update method we are checking if our text field is a child of a UIScrollView. It doesn't have to be a direct child, just anywhere in the UIScrollView's hierarchy. Then we set the insets and tell the parent scroll view to scroll the frame of our text field into visible range.


func update(with keyboardFrame: CGRect) {
    if let parentScrollView = superview(of: UIScrollView.self), isFirstResponder {
        
        let keyboardFrameInScrollView = parentScrollView.convert(
            keyboardFrame,
            from: UIScreen.main.coordinateSpace
        )
        
        let scrollViewIntersection = parentScrollView.bounds.intersection(keyboardFrameInScrollView).height
        let contentInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: scrollViewIntersection, right: 0.0)
        
        parentScrollView.contentInset = contentInsets
        parentScrollView.scrollIndicatorInsets = contentInsets
        
        parentScrollView.scrollRectToVisible(frame, animated: true)
    }
}


Another thing to remember is to set the content inset back to zero when the text field ends editing. We do that in the Coordinator class which acts as a delegate of our text field.


func textFieldDidEndEditing(_ textField: UITextField) {
    if let parentScrollView = textField.superview(of: UIScrollView.self) {
        if !(parentScrollView.currentFirstResponder() is UITextFieldWithKeyboardObserver) {
            parentScrollView.contentInset = .zero
        }
    }
}


You can find the full example project with the code for the keyboard observer and other supporting functionality in our GitHub repository.

Related Articles