[Solved] How can I avoid the keyboard overlaying my inputs or visually shifting components?

[versatile]

How do I avoid this when typing

And this is it later turns out to be

[muneer]

Set the screen to scrollable.

The components are crunched together to make space for the keyboard, if the screen is scrollable then the components will move up making space for the keyboard.

[versatile]

Thanks lemme try this
This is what I got

[muneer]

Place your components into a group component or several group component to arrange them in the screen.

[domhnallohanlon]

@versatile, @jared has shared a sample app related to this here:

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. [IMG_7242.PNG] [IMG_7243.PNG] Goal: Add a popup modal that allows users to enter text which won’t be covered by the device keyboard Explanation: 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 easil…

Is this relevant to the layout changes you’re seeing?