Keyboard Avoiding View

A component that allows solving the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height.

When configured, it will automatically adjust the position of the contents of the screen for a better fit when a user focuses on a field and the keyboard appears.

Adding a Keyboard Avoiding View

  • Select the Keyboard Avoiding View component from the Components drawer. You can open the list of components by clicking the + button next to Components.
  • Add it as the top-level component on your screen. In other words, all other components that represent the content of the screen are wrapped inside Keyboard Avoiding View.

For example, a Login screen has two-input fields and a button. These are the contents of the screen that need to be wrapped inside the Keyboard Avoiding View in the Components tree.

321

Once you've wrapped all other components:

  • Select the Keyboard Avoiding View from the components tree.
  • Go to the Configs tab (second tab) in the Properties Panel.
  • In Resizing Behavior property, select position from the dropdown.
321

Here is an example of it working on iOS.

Configuration Properties

PropertyDescription
Component NameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Keyboard Avoiding View
EnableEnable the keyboard Avoiding View. By default, it is enabled.
Resizing BehaviorSelect how the screen will resize once the keyboard drawer opens.
Keyboard Vertical OffsetSet the distance between the top of the keyboard and the bottom of the screen's contents.