AI Chat UX: Rendering new user messages at the top of the screen for streaming

[trcoffman]

On twitter you requested that I raise this as a feature request github issue, so here I am. I don't have a clear feature request yet so I started a discussion instead.

I'm not yet certain if any changes are even needed to KeyboardChatScrollView to facilitate this. I'm just getting the discussion started on how best to achieve this UX in react-native.

Is your feature request related to a problem? Please describe.
All of the top AI Chat apps push new user messages to the top of the screen to allow plenty of screen real estate for the AI response to stream in without layout shifting during streaming.

https://vercel.com/blog/how-we-built-the-v0-ios-app#sending-messages-in-an-existing-chat

ScreenRecording_02-27-2026.09-50-31_1.MP4

Describe the solution you'd like

I am not sure yet what the solution is now that KeyboardChatScrollView has arrived. Before KeyboardChatScrollView arrived, I managed to get this working in LegendList by modifying the previous version of KeyboardAvoidingLegendList. It's been updated to use KeyboardChatScrollView so I need to experiment again to see if I can adapt my solution to KeyboardChatScrollView.

My previous solution involved hooking into LegendList's onItemSizeChanged callback, and then I would getState() on the list in that callback so that I could access all the sizes of the list items and compute the contentInset that would position the latest user message at the top of the screen.

The KeyboardChatScrollView isn't really aware of individual 'messages'. That seems more in the domain of something like the KeyboardAvoidingLegendList that wraps it.

But perhaps KeyboardChatScrollView could perhaps be smart enough such that if it receives a contentInset greater than the height of the keyboard, it doesn't add additional contentInset?

It's not yet clear to me if any changes are actually needed in KeyboardChatScrollView, so I'll be investigating this. It seems to me more like something that should be added to KeyboardAvoidingLegendList, like a prop called insetItemAtIndex or topItemIndex (i do not love either name) that adds extra contentInset to make sure that if you scroll to the bottom that item renders at the top of the screen. This is what I implemented before KeyboardAvoidingLegendList moved to KeyboardChatScrollView.

Describe alternatives you've considered
The alternative solution is to not use KeyboardChatScrollView and instead use my own fork of the old KeyboardAvoidingLegendList, but on android use ClippingScrollViewDecorator instead of the unholy hacks i came up with to make this work with padding on the contentContainerStyle.

Here's a screen recording of what I came up with before KeyboardChatScrollView was released. It relies on timeouts to scroll to end 200ms after adding the new user message. Not really sure how exactly to know when to scroll to end without just guessing about an arbitrary timeout value which I don't love.

ScreenRecording_02-27-2026.10-44-50_1.MP4

I'll try to adapt it to the new KeyboardChatScrollView version of KeyboardAvoidingLegendList, but @kirillzyusko I'd love to know your thoughts on this.

[trcoffman]

This bug is a big problem for AI chat apps right now: facebook/react-native#54123

[kirillzyusko]

Hey @trcoffman

Thank you for raising such a detailed issue! Appreciate the effort ❤️

The KeyboardChatScrollView isn't really aware of individual 'messages'. That seems more in the domain of something like the KeyboardAvoidingLegendList that wraps it.

Yes, you are right.

But perhaps KeyboardChatScrollView could perhaps be smart enough such that if it receives a contentInset greater than the height of the keyboard, it doesn't add additional contentInset?

Not sure if I get it correctly, don't you mind to elaborate a little bit more?

I read blogpost and I think a correct flow would be adding a property like blankSpaceSize to KeyboardChatScrollView. Current approach of KeyboardChatScrollView is that when keyboard appears it changes contentInset of ScrollView and then scrolls a content so that content gets pushed visually to the top. Very simple and works with unbelievably good performance 😎

So I think theoretically we could add another property to KeyboardChatScrollView that will increase/extend contentInset provided by keyboard? How I see it in my head is that KeyboardChatScrollView itself can not know what happens. So components at a higher level should tell it, like:

 `LegendList` -> (send events/call callbacks in your code) -> (your code modified props of `KeyboardChatScrollView)` -> `KeyboardChatScrollView`

In fact I already experimenting with that here: #1332 I added new property extraContentPadding which:

• extends contentInset
• scrolls content again (follows rules specified by keyboardLiftBehavior when to scroll/change content positioning)

At the moment it solves a problem of auto-scroll when input grows:

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-02-28.at.00.22.26.mov

But I'm just curious - can we utilize similar approach or maybe re-use this functionality partially? Because from the underlying mechanism everything looks very similar: extend contentInset, call scrollTo/change contentOffset so that content gets re-positioned. This is exactly what extraContentPadding already does 🤷‍♂️

Anyway, let me know what do you think about this 😊

[trcoffman]

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2026-03-02.at.15.29.10.mp4

keyboardLiftBehavior="whenAtEnd"

'whenAtEnd' causes crazy layout shifts while response streams in.

For comparison, here's it with 'never':

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2026-03-02.at.15.31.06.mp4

It seems like 'always' and 'persistent' also have issues.

Only 'never' seems to avoid layout shift as the streaming message continues to grow in size and extraContentPadding keeps changing.

[trcoffman]

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2026-03-02.at.15.34.44.mp4

Any keyboardLiftBehavior other than never doesn't interact well with extraContentPadding.

This is how it behaves for 'whenAtEnd', 'always', and 'persistent'

[kirillzyusko]

Hey @trcoffman

I'm really impressed by all the work that you did! This is incredible. Don't you mind to switch to discord (nickname is kiryl.ziusko) for further communication?

I think communication in messenger will be much faster and more productive 👀

[trcoffman]

@kirillzyusko I sent you a friend request on discord from t-real.

Is there a discord server for keyboard controller?

[kirillzyusko]

Is there a discord server for keyboard controller?

No, not yet :)

[kirillzyusko]

Closing because #1344 has been merged!