# ghiculescualexandru/stream-chat-react-native architecture

> Architecture diagram of the GitHub repository ghiculescualexandru/stream-chat-react-native, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-23). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ghiculescualexandru/stream-chat-react-native
- Repository: https://github.com/ghiculescualexandru/stream-chat-react-native

## Overview

This repository is the official React Native and Expo UI SDK for Stream Chat. An app supplies the SDK’s chat client and renders chat and channel-list components; users discover or select a channel, view messages and threads, and compose messages or attachments, with chat operations handled by the Stream Chat client. The graph highlights those product stages and the SDK’s context layer. The README documents the SDK’s scope; sampled source confirms message-action calls and channel-preview reads, but not every component’s wiring.

Main entry points: [`package/src/components/Chat/Chat.tsx`](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Chat/Chat.tsx) (Chat provider), [`package/src/components/MessageInput/MessageInput.tsx`](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/MessageInput/MessageInput.tsx) (Message input), [`package/src/components/ChannelList/ChannelList.tsx`](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/ChannelList/ChannelList.tsx) (Channel list), [`package/src/components/Channel/Channel.tsx`](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Channel/Channel.tsx) (Channel view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_composition["Composition and state"]
  node_chat["Chat provider<br/>[Chat.tsx]"]
  node_contexts["SDK contexts<br/>[index.ts]"]
end

subgraph group_discovery["Channel discovery"]
  node_channel_list["Channel list<br/>[ChannelList.tsx]"]
  node_channel_preview["Channel preview<br/>[ChannelPreview.tsx]"]
end

subgraph group_conversation["Conversation"]
  node_channel["Channel view<br/>[Channel.tsx]"]
  node_message_list["Message list<br/>[MessageList.tsx]"]
  node_message["Message actions"]
  node_message_input["Message input<br/>[MessageInput.tsx]"]
  node_thread["Thread view<br/>[Thread.tsx]"]
  node_autocomplete["Autocomplete"]
end

subgraph group_media["Attachments and media"]
  node_picker["Attachment picker"]
  node_attachment["Attachments<br/>[Attachment.tsx]"]
  node_gallery["Image gallery<br/>[ImageGallery.tsx]"]
end

node_app(("Chat app"))
node_stream[("Stream Chat")]

node_app -->|"renders"| node_chat
node_chat -->|"uses client"| node_stream
node_chat -->|"provides state"| node_contexts
node_chat -->|"renders"| node_channel_list
node_chat -->|"renders"| node_channel
node_channel_list -->|"queries channels"| node_stream
node_channel_list -->|"renders previews"| node_channel_preview
node_channel_preview -->|"reads channel state"| node_stream
node_channel -->|"renders messages"| node_message_list
node_channel -->|"renders input"| node_message_input
node_message_list -->|"renders actions"| node_message
node_message -->|"calls chat API"| node_stream
node_message_input -->|"suggests entries"| node_autocomplete
node_message_input -->|"opens picker"| node_picker
node_message_input -->|"sends messages"| node_stream
node_message -->|"opens thread"| node_thread
node_message_list -->|"renders attachments"| node_attachment
node_attachment -->|"opens gallery"| node_gallery

click node_chat "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Chat/Chat.tsx"
click node_contexts "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/contexts/index.ts"
click node_channel_list "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/ChannelList/ChannelList.tsx"
click node_channel_preview "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/ChannelPreview/ChannelPreview.tsx"
click node_channel "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Channel/Channel.tsx"
click node_message_list "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/MessageList/MessageList.tsx"
click node_message "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Message/hooks/useMessageActionHandlers.ts"
click node_message_input "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/MessageInput/MessageInput.tsx"
click node_thread "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Thread/Thread.tsx"
click node_autocomplete "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/AutoCompleteInput/AutoCompleteInput.tsx"
click node_picker "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/AttachmentPicker.tsx"
click node_attachment "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Attachment/Attachment.tsx"
click node_gallery "https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/ImageGallery/ImageGallery.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_chat,node_contexts toneBlue
class node_channel_list,node_channel_preview,node_stream toneAmber
class node_channel,node_message_list,node_message,node_message_input,node_thread,node_autocomplete toneMint
class node_picker,node_attachment,node_gallery toneRose
class node_app toneIndigo
```

## Components

### Composition and state

- [Chat provider](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Chat/Chat.tsx): `package/src/components/Chat/Chat.tsx`
- [SDK contexts](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/contexts/index.ts): `package/src/contexts/index.ts`

### Channel discovery

- [Channel list](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/ChannelList/ChannelList.tsx): `package/src/components/ChannelList/ChannelList.tsx`
- [Channel preview](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/ChannelPreview/ChannelPreview.tsx): `package/src/components/ChannelPreview/ChannelPreview.tsx`

### Conversation

- [Channel view](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Channel/Channel.tsx): `package/src/components/Channel/Channel.tsx`
- [Message list](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/MessageList/MessageList.tsx): `package/src/components/MessageList/MessageList.tsx`
- [Message actions](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Message/hooks/useMessageActionHandlers.ts): `package/src/components/Message/hooks/useMessageActionHandlers.ts`
- [Message input](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/MessageInput/MessageInput.tsx): `package/src/components/MessageInput/MessageInput.tsx`
- [Thread view](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Thread/Thread.tsx): `package/src/components/Thread/Thread.tsx`
- [Autocomplete](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/AutoCompleteInput/AutoCompleteInput.tsx): `package/src/components/AutoCompleteInput/AutoCompleteInput.tsx`

### Attachments and media

- [Attachment picker](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/AttachmentPicker.tsx): `package/src/components/AttachmentPicker/AttachmentPicker.tsx`
- [Attachments](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/Attachment/Attachment.tsx): `package/src/components/Attachment/Attachment.tsx`
- [Image gallery](https://github.com/ghiculescualexandru/stream-chat-react-native/blob/develop/package/src/components/ImageGallery/ImageGallery.tsx): `package/src/components/ImageGallery/ImageGallery.tsx`

### Other components

- **Chat app**
- **Stream Chat**

## Connections

- Chat app → Chat provider: renders
- Chat provider → Stream Chat: uses client
- Chat provider → SDK contexts: provides state
- Chat provider → Channel list: renders
- Chat provider → Channel view: renders
- Channel list → Stream Chat: queries channels
- Channel list → Channel preview: renders previews
- Channel preview → Stream Chat: reads channel state
- Channel view → Message list: renders messages
- Channel view → Message input: renders input
- Message list → Message actions: renders actions
- Message actions → Stream Chat: calls chat API
- Message input → Autocomplete: suggests entries
- Message input → Attachment picker: opens picker
- Message input → Stream Chat: sends messages
- Message actions → Thread view: opens thread
- Message list → Attachments: renders attachments
- Attachments → Image gallery: opens gallery