Chat (Mobile app)
The messaging thread where keyboard behaviour and gestures decide whether the conversation feels native.
Communication & Notifications · 9 checks · 6 resources
Before you ship
9- 01Keyboard push-up — the message input bar rising with the keyboard so conversation history is not obscured
- 02Input bar — persistent at the bottom with a text field, send button and media attachment option, thumb-reachable in all grips
- 03Message bubbles — sent messages on the right, received on the left, consistent with existing messaging conventions
- 04Swipe to reply — swiping a message right revealing a reply-to action that threads the response to that message
- 05Long press message actions — opening a reaction picker and action menu e.g. react, reply, copy, delete
- 06Read receipts — sent message status shown as subtle indicators (sent, delivered, read)
- 07Media and file sharing — images, videos and files shareable from the input bar, with inline previews in the thread
- 08Typing indicator — an animated indicator when the other party is composing
- 09Scroll to latest — a button to jump to the newest message when new ones arrive while the user is scrolled up
Resources that help you build this
6- assistant-ui · React chat primitives and shadcn-installable UI for LLM apps, copilots, and agents
- Material Design 3 · Google's open design system: 39 components, tokens, and Compose/Web code
- Mobbin · Searchable library of real mobile and web app screens, organized into user flows
- gluestack-ui · CLI-installed React Native component library built on NativeWind and Tailwind v4
- Tamagui · Universal React styling engine, optimizing compiler and ~48 components for web and native
- Page Flows · Screen recordings of real user flows from shipped iOS, Android, web, and email apps