ASTextFieldNode: A text field component for AsyncDisplayKit

We’ve been using AsyncDisplayKit recently to make the iOS apps we build as performant and responsive as possible. It has proven to be a great tool for achieving high performance interfaces that benefit from smart rendering techniques that take place off of the main thread.

AsyncDisplayKit has its own set of user interface components that replicates/supersedes major views and controls from UIKit. Instead of UIView there is ASDisplayNode as the conceptual root element. ASButtonNode replaces UIButton and so on.

ASEditableTextNode is the AsyncDisplayKit component for editable text. It can be used for both single and multiple line text input. In order to offer both of those features it wraps UITextView. The problem with basing ASEditableTextNode on UITextView is that it’s behavior is fundamentally different and not what you would expect in a typical situation with a single line of editable text.

Typically if you had a situation where you needed to accept a single line of text input within iOS you would use a UITextField (and not a UITextView). A text field never wraps text to a second line because there never is one. When you type beyond the boundary of a text field the text input keeps appending while the view itself keeps scrolling to display the last character you typed. A text view wraps to a second line and doesn’t track your input in the same way.

ASEditableTextNode cannot be used for secure input password type fields. This is a result of an issue with UITextView where the flag for secure text entry simply doesn’t work. So if you wan’t a password field and you want to use AsyncDisplayKit you have to roll your own.

This is why we created ASTextFieldNode. It’s a text input user interface component for AsyncDisplayKit that wraps and behaves like UITextField. It works as a single line input like you’d expect and can be used in secure entry situations. It also has some nice features like a convenient way to set the textContainerInset for padding, font and text color.

ASTextFieldNode is open source and available as a Carthage framework and Cocoapod.

Follow Pocket Labs on Github

This post was written by a partner at Pocket Labs. Pocket Labs designs and develops delightful iOS and Android apps.

Tell us about your next project: