Message Scroller

A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.

Preview

Code

Question 1: how does the scroller keep up with new messages?

It stays pinned to the bottom while you're there, and shows a button to jump back once you scroll up.

Question 2: how does the scroller keep up with new messages?

It stays pinned to the bottom while you're there, and shows a button to jump back once you scroll up.

Question 3: how does the scroller keep up with new messages?

It stays pinned to the bottom while you're there, and shows a button to jump back once you scroll up.

Question 4: how does the scroller keep up with new messages?

It stays pinned to the bottom while you're there, and shows a button to jump back once you scroll up.

Question 5: how does the scroller keep up with new messages?

It stays pinned to the bottom while you're there, and shows a button to jump back once you scroll up.

Question 6: how does the scroller keep up with new messages?

It stays pinned to the bottom while you're there, and shows a button to jump back once you scroll up.

Installation

Every component ships in @astrawind/ui. If you haven't set it up, follow the installation guide, then import the component:

Terminal

npx expo install @astrawind/ui @astrawind/css lucide-react-native react-native-svg

Usage

tsx

import { Message } from "@astrawind/ui/message" import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, } from "@astrawind/ui/message-scroller"

See the Code tab above for a complete example.

Built with @astrawind/ui and @astrawind/css. Components ported from shadcn/ui (MIT).