TeamChatChannel

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-team-chat-channel

pnpm add @shopify/flash-list expo-document-picker (optional) expo-image-picker (optional)

The attach button offers Files when expo-document-picker is installed and Photo library / Camera when expo-image-picker is installed. With neither, the button is hidden. Everything else is pure JS and runs in Expo Go.

Usage

import { TeamChatChannel } from '@/components/docyrus-native/team-chat-channel';

<TeamChatChannel
  channelName="# product-team"
  posts={posts}
  users={users}
  currentUser={currentUser}
  lastReadAt={membership.last_read_at}
  isCreatePending={createPost.isPending}
  isDeletePending={deletePost.isPending}
  onCreatePost={payload => createPost.mutateAsync(payload)}
  onUpdatePost={(id, content, options) => updatePost.mutateAsync({ id, content, ...options })}
  onDeletePost={id => deletePost.mutateAsync(id)}
  onToggleReaction={(id, emoji) => toggleReaction.mutateAsync({ id, emoji })}
  onLoadReplies={id => fetchReplies(id)}
  dataSources={dataSources}
  onSearchEntity={(dataSourceId, query) => searchRecords(dataSourceId, query)}
  onLoadMore={fetchOlderPosts}
  hasMore={hasOlderPosts}
  isLoadingMore={isFetchingOlder} />

Without maxHeight the channel is flex-1 and fills its parent — give the parent a bounded height (a screen or a sized View) and do not nest it in a vertical ScrollView. When the channel sits below a navigation header, pass that header's height as keyboardVerticalOffset so the composer clears the keyboard.

Feed

• The feed is an inverted FlashList: the newest post is anchored at the bottom, like every mobile chat. Only top-level posts (parent_id === null) are listed.
• Day separators (Today, Yesterday, then the date — through DateFormatProvider when mounted) split the feed.
• lastReadAt inserts a "New messages (n)" divider above the oldest post by someone else that is newer than that timestamp.
• onLoadMore fires when the user scrolls to the top while hasMore is true; isLoadingMore shows a spinner there.

Composer

The composer is docked at the bottom inside a KeyboardAvoidingView:

• @ mentions — typing @ opens a user list above the input. The input shows @Name; on submit the draft becomes the stored [@Name](mention://<userId>) markdown (the format web renders) and mentioned_user_ids is filled. The @ button inserts the trigger.
• #hashtags are collected into hashtags.
• Emoji — the smiley opens the EmojiPicker sheet and inserts at the caret.
• Attachments — the paperclip picks files (ChatFile = { uri, name, type, size? }) that arrive in CreatePostPayload.attachments.
• Entity links — with dataSources + onSearchEntity, the link button opens a two-step sheet (data source → debounced record search). Picked records arrive in linked_entities.

Web fills neither mentioned_user_ids nor hashtags; native does.

Reactions, actions and editing

• Reaction chips toggle on tap. The + / smiley buttons open the reaction sheet: the preset emoji row plus More for the full EmojiPicker.
• Long-press a post (or tap "⋯" on your own post) for the action sheet: reactions, Reply, Edit post, Delete post.
• Edit turns the bottom composer into the edit bar: the text is loaded (mentions included), existing attachments can be removed and new files added. Save calls onUpdatePost(id, content, { removedAttachmentIds, newFiles }).
• Delete asks for confirmation, then calls onDeletePost(id).

Threads

Tapping "N replies" opens the thread in a full-height sheet: the root post, the replies from onLoadReplies(postId) (oldest first) and a reply composer. Reply opens the same sheet with the composer focused. Replies can be reacted to, edited and deleted inside the sheet; replies are reloaded after each change. Reply payloads carry parent_id = postId.

API Reference

TeamChatChannelProps

ChatPost

Other types

Components

Internal building blocks (PostCard, PostComposer, PostThread, TeamChatProvider, …) are importable from their files — ContactActivityPanel uses PostCard + PostComposer for its reply thread, exactly like web.

Exports

Type Exports

Translation Keys

Shared keys: ui.common.cancel, ui.common.save, ui.common.back, ui.emailComposer.insertEmoji, ui.commentsPanel.attachFile, ui.commentsPanel.sourceFiles, ui.commentsPanel.sourcePhotos, ui.commentsPanel.sourceCamera, ui.commentsPanel.removeFile.

Differences from web

• File → ChatFile ({ uri, name, type, size? }) in CreatePostPayload.attachments, UpdatePostOptions.newFiles and onUploadFile. maxHeight is a number.
• Newest post at the bottom (inverted list) and the composer below the feed; web lists newest first under a top composer.
• Threads open in a sheet instead of expanding inline; editing happens in the bottom composer instead of inside the card.
• Hover toolbars / dropdowns / popovers are replaced by long-press and bottom sheets.
• Native-only: lastReadAt, day separators, onLoadMore paging, onOpenAttachment, onOpenEntity, onMentionPress, the enable* flags, keyboardVerticalOffset, and filled mentioned_user_ids / hashtags.