translate-with-padding doesn't work during scroll

[henninghall]

Describe the bug
First, thansks for your great work on this @kirillzyusko, tackling one of react native's biggest pain points. I tried out the new translate-with-padding behaviour which increased performance a lot, thats great!

Found that translate-with-padding doesn't work properly during scroll. Its a clear jump in when closing (or opening) the keyboard. See comparison with padding

To Reproduce

Reproduced in unchanged fabric example repo (haven't tested paper).

translate-with-padding (doesn't work as expected)

translate-with-padding.mov

padding (works as expected)

padding.mov

To Reproduce
Steps to reproduce the behavior:

1. Go to chat example
2. Scroll
3. Open or close keyboard while scrolling
4. See jumpiness

Smartphone (please complete the following information):

• RN architecture: new (not tested old)
• platform iOS

[kirillzyusko]

ScreenRecording_03-12-2025.1-32-32.PM_1.MP4

On paper it works well 🙂 Will check what's wrong with Fabric!

[henninghall]

@kirillzyusko Great, not sure but you might need to have an "active" scroll for this to happen, so like scroll activly happening when closing. In your example it looks like the scroll came to a stop before closing

[kirillzyusko]

Still on paper everything works as expected:

ScreenRecording_03-12-2025.8-20-01.PM_1.MP4

[kirillzyusko]

Can confirm - on Fabric issue is reproducible!

[henninghall]

Found another example of where something is off, no idea if it is unrelated or or a clue to where the issue is.

To reproduce:

1. Show only one element in list.
2. Tap in input

translate-with-padding (not as expected)

Screen.Recording.2025-03-13.at.08.33.15.mov

padding (as expected)

Screen.Recording.2025-03-13.at.08.32.59.mov

[kirillzyusko]

@henninghall But for chat-like apps a single message should be displayed in the bottom (near text input)?

Basically it works as expected by design - we always apply translateY (it always reflects keyboard height), and we apply paddingTop at the end of the animation (if the keyboard appears) or at the beginning of animation (if the keyboard closes).

paddingTop is needed to properly resize the container. And we cannot apply paddingTop in the beginning of animation when the keyboard appears, because it will look like we instantly resize the container and then apply translateY.

As always - each mode comes with its own advantages/disadvantages. You can try to apply conditional behavior (i.e. content is not scrollable - use padding, content is scrollable/have a lot of messages - use translate-with-padding).

[henninghall]

Okay I understand, so its unrelated to the bug then. Thanks for clearifying.

@henninghall But for chat-like apps a single message should be displayed in the bottom (near text input)?

Not really, it is very common to have them in top, check for example whatsapp / messenger when there is a single message in a conversation.

[henninghall]

Would a solution be to translate the content (messages) to the opposition direction of the list translation until the padding is applied? (as long as keyboard is not pushing the content, ie a full list)

Getting a little bit off topic here 😄