Fun Share: 1 way to avoid the keyboard covering your text input

Question that Prompted this Tutorial:

A common ask is how to avoid covering a text input located lower on a screen when the keyboard appears.


Add a popup modal that allows users to enter text which won’t be covered by the device keyboard


There are many device dimensions and it can be hard to predict that your input wont necessarily be covered by a advice keyboard. In that case, you can use this method to allow your users to easily see the input and text they are entering.

Types of Apps You Might Use This In:

  • Store Apps

  • Canvassing Apps

  • Legal Apps

  • Medical Apps

  • Educational Apps

  • Financial Apps

  • Digital contracts

Blocks / Components Used:


Link to Template / Example:


This is a good way for a single or two entries but would be a lot for a form filling experience. The trick is dependent on having the entry part to be in the top of the screen but when the list of fields goes long it will reach the lower part of the screen and the keyboard will start blocking part of the modal screen.

@jared, I like the way you tricked the view for the lower entry field which is just a label to show the modal screen.