[Unistyles 3.0] Avoiding keyboard with translateY: not ideal on small-height devices (e.g. Android Nexus 4)

[andreavrr]

Hi there! I’m currently testing Unistyles 3 beta and using the classic approach to avoid the keyboard:

transform: [
  {
    translateY: rt.insets.ime * -1,
  },
],

This works great in general, but I’m running into an issue on devices with small screen height, like an old Nexus 4 or similar Android phones.
When the keyboard opens, it takes up almost half the screen height, and applying the full translateY causes the entire content to shift too far up, making the TextInput disappear above the screen.

Example scenario:

• Screen height: ~640px
• Keyboard height: ~320px
• Input already near the top → gets pushed completely out of view

Also, I’m trying to figure out how to handle a layout that includes multiple input fields, for example, one near the top and one at the bottom of the screen.

• When the input is at the bottom, using translateY: rt.insets.ime * -1 works great: it brings the field just above the keyboard.
• But when the input is at the top, the whole content gets shifted way too far up, and the top input disappears off screen.

So I’m wondering:
how can we handle this kind of mixed layout dynamically, so only the element that needs to be moved is adjusted — without negatively affecting the rest?

Is there already a recommended way to handle this scenario in Unistyles? Or do you think it would make sense to introduce some dynamic keyboard avoidance utility?

[jpudysz]

Hey!

It totally depends on you, and you can do whatever you want based on this value. It's literally a real time height of the keyboard.
For such advanced features like multiple inputs, avoiding portion of the view etc. I recommend using react-native-keyboard-controller.

It has extra primitives like KeyboardToolbar, KeyboardAvoidingView that will solve your problem.