MDCTextInputController error messages cover entered text

Question

Using material-components/material-components-ios v85.8.0

import MaterialComponents

....

var usernameTextField = MDCTextField()
var userNameTextLayout = MDCTextInputControllerUnderline()
usernameTextField = {
    let usernameTextEdit = MDCTextField()
    usernameTextEdit.translatesAutoresizingMaskIntoConstraints = false
    usernameTextEdit.clearButtonMode = .unlessEditing
    usernameTextEdit.backgroundColor = .white
    return usernameTextEdit
}()
userNameTextLayout.textInput = usernameTextField
userNameTextLayout.placeholderText = "Username"
// add to view
....

private func isUserNameValid() -> Bool {
    let enteredUsername = usernameTextField.text ?? ""
    if (!enteredUsername.isValidEmail) {
        userNameTextLayout.setErrorText("Invalid e-mail address",
                                        errorAccessibilityValue: nil)
        return false
    }
}

Error messages cover the text entered and it looks bad:

Android material design does however place the error underneath the line:

Was wondering if there's a way to do that, or if I'm doing it wrong.

I followed their tutorial: https://codelabs.developers.google.com/codelabs/mdc-101-swift/#2

Answer 1

I had set the height of the MDCTextField too small. In increasing it from 50->80pts it did the trick and moved the error message below the line.