Overview

The Stream Chat React Native SDK includes a set of foundational UI primitives located in components/ui. These components form the building blocks used throughout higher-level chat components such as ChannelList, MessageList, and MessageComposer.

Unlike the higher-level chat components, these base UI components are not tied to any chat context or data. They are pure presentational primitives that accept props and render UI. This makes them ideal for building custom UIs or extending the SDK with your own layouts.

Available Components

Category Components
Avatar Avatar, UserAvatar, ChannelAvatar, AvatarGroup, AvatarStack
Badge BadgeCount, BadgeNotification, OnlineIndicator, ErrorBadge, GiphyBadge, ImgurBadge
Button Button
Input Input
Media VideoPlayIndicator, SpeedSettingsButton, GiphyChip

Theming

All base UI components are theme-aware. They consume the theme via the useTheme hook from the ThemeContext, making them automatically adapt to light and dark mode. Colors, spacing, border radii, and typography values are sourced from the SDK's design token system (primitives and semantics).

Add Chat to my app: getstream.io/SKILL.md

The fastest way to build with Stream. Start a new project or improve an existing one. Full CLI and documentation integration out of the box.

Ask your agent:

/stream Build me a Social App with Feeds and Moderation.
/stream Any livestream calls running?
/stream Chat React Native v9: <Your Question>