How should an expanding text input field behave on a mobile screen?

Question

Context

I am designing a screen in an Android/iOS hybrid mobile app (native in both, not a web app) in which the user will be able to enter text into a text field (which could be one sentence or 2 paragraphs, depending on the user).

The text field is a certain height so that when the user taps on "edit text", the screen content scrolls up under the screen header to position the text field high enough above the keyboard to fit the entire text field onscreen.

There are "save" and "cancel" buttons under the text field.

Question

If I want the user to be able to write as much as they like ...

• Should the text input field continue to scroll up under the header as it expands vertically to accomodate more text (keeping the the "save" and "cancel" buttons underneath it and above the keyboard)?

• Is there a better pattern I'm unaware of?

I know having open text input of hard-to-guage length isn't ideal, but the client is demanding this screen to meet a specific requirement for accessing their funding.

Answer 1

I would take my cue from e-mail apps when drafting an email. Can the "Save" and "Cancel" buttons move up to the frozen header row so that they are always visible while the form is being filled out (common for the Send or Save Draft buttons in email)?

Answer 2

I would make it a pop out as aesthetically it is more structured. I don't know how the page looks but if they were to add more sections this would make more sense. So if you added another box that would be a pop out also. That way you still keep to what most companies are doing now is a card based system.