Keyboard Aware Scroll View

A component that allows solving the common problem of views that need to move out of the way of the virtual keyboard. It handles keyboard appearance and automatically scrolls to the focused Text Input component. With additional configuration, it will automatically adjust the position of the input fields on the screen for a better fit for a seamless user experience.

Adding a Keyboard Aware Scroll View

  • Select the Keyboard Aware Scroll 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 (such as Text Inputs and buttons) are wrapped inside it

For example, a Signup screen has three input fields and two buttons. These are the contents of the screen that need to be wrapped inside the Keyboard Aware Scroll View in the Components tree.

319319

Once you've wrapped all other components:

  • Select the Keyboard Aware Scroll View from the components tree
  • Go to the Configs tab (second tab) in the Properties Panel
  • Enable Automatic Scroll property. If you are building your application for Android, also Enable on Android property
  • You can also use the Extra Scroll Height property to provide an offset between the input field and the keyboard on the device

Configuration Properties

Property

Description

Component Name

To alter the name of the component. The name is reflected in the Components tree. Defaults to Keyboard Aware Scroll View.

Shows Vertical Scroll Indicator

It displays a vertical scroll indicator when scrolling is enabled. Enabled by default.

Allow Touch Events

The default behavior of the Keyboard is to dismiss when a touch component (for example, a Button) is pressed. This default behavior is set by the value never.

Use the value Always when you want to continue to display the keyboard without dismissing the keyboard. In this scenario, to dismiss the keyboard after a touch component is pressed you will use the Dismiss Keyboard Action available on On Press trigger.

View is inside TabBar

If the screen component is used inside a TabBar, enable this option so that it has an extra offset that represents the height of the TabBar.

Disabled by default.

Enable Automatic Scroll

When a Text Input component is focused, it will automatically scroll the position. Disabled by default.

Extra Height

Adds an extra offset when focusing on the Text Input component.

Extra Scroll Height

Adds an extra offset to the keyboard.

Enable Reset Scroll To Coordinates

Enable this property to reset the scroll when the keyboard hides.

Opening Time

Using this property, set a delay (in milliseconds) to open the keyboard before scrolling to a new position. The default delay is 250.

Enable On Android

To use this component on an Android device, enable this option. Disabled by default.


Did this page help you?