ChatGPT or Claude’s list behaviour

[bacarybruno]

I'm trying to build a chat interface in React Native that mimics ChatGPT or Claude’s mobile app UI:

• On load, messages display like a regular chat: newest messages appear at the bottom
• When the user sends a new message, it should appear at the top of the screen (so the conversation feels like it’s “stacking upward”)
• The AI response should appear below the user’s message
• When the AI responds, there should be no auto-scroll

So far, the only approach that sort of works is to leave an empty space below the user’s message and animate it to make room for the AI’s response as it renders.

Is there a cleaner way to achieve this behavior using LegendList? 🙏

[jmeistrich]

I built this for an app and empty space is the solution I found to work the best. Sending a message triggers blank space to be added below the message, and then scroll is animated to place it at the top.

It turned out to be a very complex solution to make it perfect. We're working on open sourcing the message/keyboard management parts, and hopefully it will be ready soon!

[bacarybruno]

It would be great to have it 🙏
That technical limitation + this issue #174 makes it hard to justify the migration to LegendList, so I think we'll stick with Flatlist or explore other alternatives.

[bacarybruno]

Closing in favor of #318 (comment)