The Viewport/safe-twilightzone

Hello fellow Bubblers! :waving_hand:

I am working on a mobile app for android and apple. It is a wrapped web app via BDK native. The main screen is a chat interface. I am having trouble with the top and bottom safezones and keyboard behavior.

On Android, my floating navbar shows underneath the time and my chat bar sits underneath the bottom safe zone.

On IOS, the navbar sits under the time properly but I can see chat above the navbar and under the time when I scroll.

Lastly, when an input is focused the apple keboard pushes the page up nicely so you can see what you are typing. On android, the keyboard covers the input.

How do I fix these issues? What can I study to learn what will help me fix these and other safezone issues?

Thank you for your time. :folded_hands:

1 Like