Info:
This is release candidate documentation for Stream Chat React Native SDK v10. For the latest stable version, see the latest version (v9).

UI Cookbooks overview

Each UI cookbook is a complete, working example of one customization: the components, the styles, and what happens when the code runs. UI cookbooks apply the mechanisms the UI section explains, such as Overriding components, Actions, Theming and Navigation, and link to them instead of explaining them again.

Choosing where to start

Make the smallest change that gets you there, in this order:

  1. Restyle. Colors, spacing, sizes and fonts come from the theme: semantic tokens such as accentPrimary, and a style for each part of each component. See Theming. It's the change most likely to keep working when the SDK updates its components.
  2. Replace one part. Most parts have a key in ComponentsContext, which you replace through WithComponents. Replace the smallest part that makes the change, such as one row of the channel list rather than the whole list.
  3. Compose. Besides the attachment picker, Channel and Thread render only the children you give them. Leave parts out, add your own, such as a header, or change their order.
  4. Change behavior in the state layer. What a send does, what a list loads or what a search finds is configured on the state objects, not in components; see How the SDK is built.

A replaced part has to handle every case the default handles. Test it with the kinds of data your app has, on iOS and on Android, and again after you update the SDK.

Channel list

  • Preview UI: a channel-list row of your own, with the avatar, title, time, unread badge and message line the SDK computes for it, and a "Load more" button instead of infinite scroll.
  • Channel backgrounds: an image behind a channel's messages that the user picks for each channel, and behind the channel list.
  • Pinning and archiving: pin and archive buttons on every row, with an inbox that keeps pinned channels on top and an archive to switch to.
  • Members and online status: the members of the open channel in a row above the messages, with an online dot that follows presence as members come and go.

Message

  • Custom message: a message view built step by step from the SDK's parts, and the default view decorated or wrapped in a gesture.
  • Pin indicator: the "Pinned by" line and the highlight of a pinned message restyled, and replaced with a chip that shows who pinned it, when, and an Unpin button.
  • System message: messages that report a channel event, such as a member joining, restyled and replaced with a card of your own.
  • Custom message actions: an action of your own in the message menu, default actions removed and reordered, and items that render differently.
  • Custom attachments: an attachment type of your own, added by the composer and rendered as a card in the message list.
  • Status indicators: the sent, delivered and read marks on the user's own messages changed or hidden, and a sheet that lists who received and who read a message.
  • Incoming and outgoing styles: different colors for the user's own messages, with semantic tokens and myMessageTheme.
  • Date separators: when the date separators show, their text and look, and days that hold only system messages.
  • Custom reactions: a reaction set of your own drawn as images, with its own picker and list of who reacted.
  • Livestream message list: a busy chat next to a video, with the events and the rendering tuned for a large audience.

Composer

  • Custom composer: a composer with a layout of its own, built from the SDK's composer parts, so sending, uploads, suggestions and drafts keep working.
  • Attachment previews: the previews above the input replaced one kind at a time, with square thumbnails, the upload progress as a percentage and compact voice recordings.
  • Custom suggestions: how the suggestion list and its rows look while the user types a mention, a command or an emoji, and a list for a trigger of your own.
  • Commands UI: a bar above the input that shows the picked command and its arguments, with a button that cancels it.
  • Emoji suggestions: emoji suggested as the user types : and a few letters, including emoji of your app's own.
  • File compression: photos and videos made smaller before they're uploaded, to Stream's CDN or to your own storage.

Headers

  • Channel header: a channel header of your own, with a back button that counts the unread messages elsewhere, the channel's name and avatar, and who is typing or the connection status.
  • Thread header: a thread header of your own, with the participants' avatars, and the channel name and reply count or who is typing a reply.

App

  • Hide history for new members: a modal that sets how much of the channel's history members see when you add them.
  • System notification banner: a bar at the top of the app for notifications about the whole app, such as a lost connection, published by your app.
  • Snackbar: the in-app notification snackbar restyled, replaced with a card of your own, and moved to the top of the list as a banner.
  • Custom thread list: a Threads tab with rows of your own, the unread thread count, and a thread screen.
  • Custom poll flow: a poll's results, comments and creation form as screens of your navigation instead of modals.
  • Location sharing: a location tab in the attachment picker that shares the user's position once or live, and a full-screen map that follows it.

Channel details

  • Custom navigation: the screens channel details opens, such as the member list and the media, as screens of your navigator.
  • Custom channel actions: actions added to, hidden from or replaced in the actions section of channel details.
  • Custom navigation items: a row of your own in the navigation section of channel details, rows hidden, and the rows reordered.
  • Custom member actions: an action of your own in a member's sheet, such as sending them a direct message, and actions hidden.
  • Custom member roles: role badges of your own next to members' names, and one badge styled differently.