feat: channel info screens by szuperaz · Pull Request #3590 · GetStream/stream-chat-react-native

szuperaz · 2026-05-12T18:51:04Z

1/2 PR for channel details | Figma

This PR implements the 20/25 channel details related Figma screens. The rest will come in a separate PR. The missing screens are implemented in SampleApp (as channel details screens are currently implemented there). All new components/hooks/contexts are marked as experimental by the SDK, the flag will be removed once channel details are fully implemented.

Some follow-up tasks we discovered with Ivan that are not related to channel details, I'll implement it in separate follow-up PRs:

Move channel actions override to channel preview (and deprecate channel list override?)
Add capability checks to channel actions
Search controller
Add an alert to all destructive actions
Add search to members screen
Fix useChannelMemberOnlineCount

Overview of implemented screens:

Some screenshots, mixed from iOS and Android, dark and light theme:

Screenshot_20260602_204533_Chat Sample React Native

Screenshot_20260602_204600_Chat Sample React Native

Screenshot_20260602_204615_Chat Sample React Native

Screenshot_20260602_204633_Chat Sample React Native

Claude's recap:

The headline of this branch is a brand-new Channel Details screen shipped as a reusable SDK component, with the SampleApp migrated off its old custom overlay implementation.

SampleApp

Removed the entire legacy overlay-based channel info system:

Overlay infrastructure: AppOverlayContext, AppOverlayProvider, ChannelInfoOverlayContext, UserInfoOverlayContext, OverlayBackdrop, ChannelInfoOverlay, UserInfoOverlay, ContactDetailBottomSheet
Old member UI: AddMembersBottomSheet, AllMembersBottomSheet, MemberListItem, ChannelDetailProfileSection, and hooks useChannelInfoOverlayActions / useUserInfoOverlayActions
Old screens: GroupChannelDetailsScreen, OneOnOneChannelDetailScreen, SharedGroupsScreen

Added / updated:

New thin ChannelDetailsScreen that consumes the SDK component, plus a ChannelDetailsNavigationSection override example
New SendDirectMessage icon (removed Archive, UserMinus)
Updated ChannelListScreen, ChannelScreen, NewDirectMessagingScreen, App.tsx, types.ts, and SampleAppComponentOverrides to wire up the new screen

SDK → new

ChannelDetailsScreen component suite (new export from components/index.ts):

Core: ChannelDetailsScreen, ChannelDetailsProfile, ChannelDetailsActionsSection, ChannelDetailsActionItem, ChannelDetailsMemberSection, ChannelDetailsNavigationSection, ChannelDetailsScreenHeader
Edit flow: ChannelEditDetails, ChannelEditDetailsModal, ChannelEditName, ChannelEditImageSheet
Members: ChannelMemberList, ChannelMemberItem, ChannelMemberActionsSheet, ChannelAddMembers (+modal), ChannelAllMembersModal, AddMemberSearchResultItem, and loading skeletons
Generic Modal / ModalHeader building blocks

New hooks — package/src/hooks/actions/ namespace (useChannelActions, useChannelActionItems, useChannelMemberActionItems, useUserActions, shared types), feature hooks (useChannelDetailsActionItems, useChannelDetailsMembersPreview, useChannelDetailsMemberStatusText, useEditChannelImage, useUserActivityStatus, useChannelAddMembers, useChannelAllMembers, useMemberRoleLabel), and reusable channel hooks now exported publicly: useChannelName, useChannelImage, useChannelMemberCount, useChannelOwnCapabilities, useChannelMuteActive, useIsDirectChat, plus useSyncClientEvents (reactive channel name/image/member-count updates)

New reusable UI / contexts / icons:

UI components: SearchInput, SelectionCircle, EmptySearchResult
Contexts: channelDetailsContext and BottomSheetContext
Icons: chevron-right, x-circle
~196 lines of new theme tokens for the new components
~50 new translation keys across all 14 locales (member roles, add-members, edit-channel, a11y labels)

SDK → updates to existing

BottomSheetModal — reworked (~100 lines); fixes the iOS close-callback-fires-too-early bug and now exposes context via the new BottomSheetContext
ChannelAvatar — extended to show a live preview of pending channel-image changes
Hook relocations — useChannelActions / useChannelActionItems / useIsDirectChat / useChannelMuteActive moved out of ChannelList/hooks into the shared src/hooks tree (and useChannelActions significantly extended: onFailure/onSuccess handlers, member/image/name updates, separate dismiss API)
componentsContext — registered the new components as defaults (~31 lines); OwnCapabilitiesContext gained a capability
ChannelPreview — ChannelDetailsBottomSheet and ChannelSwipableWrapper updated; useChannelPreviewDisplayName / useUserMuteActive tweaked
camera icon redesign — drove snapshot updates for AttachButton, SendButton, Thread
notificationTarget — minor update for channel-delete/edit notifications
Repo housekeeping: CLAUDE.md typecheck note, accessibility skill tweak, new RTL skill

Scale: ~80 commits, +12,961 / −3,635 across 166 files, with a large accompanying test suite (~40 new __tests__ file

Stream-SDK-Bot · 2026-05-18T13:45:06Z

SDK Size

`title`	`develop`	`branch`	`diff`	`status`
js_bundle_size	1725 KB	1852 KB	+129456 B	🔴

… typecheck

szuperaz · 2026-06-03T19:46:17Z

+    initialUserIdRef.current = initialUser.id;
+    reset();
+    toggleUser(initialUser);
+  }, [route.params?.initialUser, reset, toggleUser]);


"Send Direct Message" action navigates to this screen to set up the DM chat because this screen already knows how to display uninitalized chats

szuperaz · 2026-06-03T19:47:28Z

@@ -1,123 +0,0 @@
-import React, { PropsWithChildren } from 'react';


This one is just moved, I'm not sure why git picks it up as removed

szuperaz · 2026-06-03T19:48:07Z

@@ -1,18 +0,0 @@
-import { Channel } from 'stream-chat';
-
-import { getOtherUserInDirectChannel } from './useChannelActions';


This one is just moved, I'm not sure why git picks it up as removed

szuperaz · 2026-06-03T19:48:36Z

+export function useMutedUsers(_channel?: Channel): Array<Mute> {
  const { client } = useChatContext();
-  return useSyncClientEventsToChannel({ channel, client, selector, stateChangeEventKeys: keys });
+  return useSyncClientEvents({ client, selector, stateChangeEventKeys: keys });


useSyncClientEventsToChannel only works when a channel is provided, but we don't need that for user mutes. useSyncClientEvents hook is created for purely client events

szuperaz · 2026-06-03T19:52:56Z

-  const { muted: channelMuted } = useIsChannelMuted(channel);
-  const directChatUserMuted = useChannelMuteActive(channel);
-  const muted = isDirectChat ? directChatUserMuted : channelMuted;
+  const muted = useChannelMuteActive(channel);


This is a simplification that was introduced after Jurgen streamlined "muted" icon's behavior: https://getstream.slack.com/archives/C0A3JU6C6G3/p1779271576780029?thread_ts=1778622787.429949&cid=C0A3JU6C6G3

szuperaz · 2026-06-03T19:54:08Z

      },
    ];

-    items.push({


This component no longer needs to define a separate mute action because useChannelActions was streamlined:

mute always means channel mute

muteUser is added as a new action only available in DM channels

szuperaz · 2026-06-03T19:58:23Z

                  minX={0}
                  minY={0}
-                  stroke="#1a1b25"
-                  strokeLinejoin="round"


camera icon was updated, that propmted some snapshot updates

szuperaz · 2026-06-03T20:02:59Z

      label: isBlocked ? t('Unblock User') : t('Block User'),
      placement: 'sheet',
-      type: 'standard',
+      type: isBlocked ? 'standard' : 'destructive',


Design change: block user is marked as destructive

szuperaz · 2026-06-03T20:06:06Z

        options: { severity: 'success', type: 'api:channel:pin:success' },
        origin: { context: { channel }, emitter: 'ChannelActions' },
      });
+      options?.onSuccess?.();


Added onSucess and onFailure callbacks to all channel actions so action callers can react to these events

feat: channel info screen - first iteration

4029214

szuperaz force-pushed the channel-info-screens branch from a53d4c2 to 4029214 Compare May 12, 2026 19:01

szuperaz added 5 commits May 12, 2026 14:20

feat: run accessibility skill

da46562

feat: add missing translations

cc977b7

fix lint errors

0338d5c

fix isBlocked state update in useChannelActionItems

0549c48

fix lint

7b589d4

szuperaz changed the title ~~feat: channel info screen - first iteration~~ feat: channel info screens May 12, 2026

szuperaz added 4 commits May 13, 2026 12:56

refactor: extract gather action items into a separate hook

3d91f1b

test: unit tests for channel details components

49a99ea

fix error

b219341

refactor: move useChannelActionItems dependencies to src/hooks

e1523f5

szuperaz force-pushed the channel-info-screens branch from 5966c58 to e1523f5 Compare May 13, 2026 18:07

szuperaz added 11 commits May 13, 2026 13:08

remove archive from channel action item ids

f77e0b2

refactor: similify channel details screen props

17329f6

add muted icon to channel details

0654e27

members list all screen, add button

f6bb4ea

remove Admin badge

a61ec6e

add channel members screen

f7eb432

small fixes

cb9ffaa

Merge branch 'develop' into channel-info-screens

493b3be

refactor: move capabilities to ChannelDetails context

d5c6c3c

fix lint

30ee37c

Add notification for channel delete, add onSucess for channel actions

2e3da00

szuperaz added 5 commits May 18, 2026 08:55

fix: missing translation

8c06ef1

fix: typecheck error

83898b5

fix: unit test

18bc287

refactor: move addMembers to channel actions

5373a80

refactor: read members from hook, update claude to run typecheck; fix…

8473d36

… typecheck

szuperaz added 20 commits June 2, 2026 12:03

fix: switch style

3832d5d

feat: don't show navigation section by default - not yet implemented

061bb48

feat: remove no longer used channel details components from sample app

f7f2d1c

fix: small design fixes

a519895

fix: selection circle in dark mode style

3f6f100

refactor: move channel name input to separate component

3a50601

fix: failing test

d7c04ce

Merge branch 'develop' into channel-info-screens

e3e91b5

fix: revert unnecessary change

a8fbf1e

fix: snapshot tests - camera icon changed on this branch

c8db2e9

fix: translation review

0a72f02

fix: ensure onFailure reverts to correct value in mute actions

973c17d

feat: display muted icon for members

c0a631f

fix: announce muted status in channel details profile

ca27f40

refactor: file structure

33564b5

feat: add send direct message action to member actions

d923e1b

fix: hide mute and block action from member sheet

79baddf

refactor: remove isCurrentUser from member item props

7c925e0

refactor: add isMuted check to member iteme

989a7a3

chore: add experimental warning to channel details components

1f9d1a0

szuperaz commented Jun 3, 2026

View reviewed changes

feat: review fixes

f912506

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: channel info screens#3590

feat: channel info screens#3590
szuperaz wants to merge 114 commits into
developfrom
channel-info-screens

szuperaz commented May 12, 2026 •

edited

Loading

Uh oh!

Stream-SDK-Bot commented May 18, 2026 •

edited

Loading

Uh oh!

szuperaz Jun 3, 2026

Uh oh!

szuperaz Jun 3, 2026 •

edited

Loading

Uh oh!

szuperaz Jun 3, 2026

Uh oh!

szuperaz Jun 3, 2026 •

edited

Loading

Uh oh!

szuperaz Jun 3, 2026

Uh oh!

szuperaz Jun 3, 2026

Uh oh!

szuperaz Jun 3, 2026

Uh oh!

szuperaz Jun 3, 2026

Uh oh!

szuperaz Jun 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -1,123 +0,0 @@
		import React, { PropsWithChildren } from 'react';

		@@ -1,18 +0,0 @@
		import { Channel } from 'stream-chat';

		import { getOtherUserInDirectChannel } from './useChannelActions';

Conversation

szuperaz commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SampleApp

SDK → new

SDK → updates to existing

Uh oh!

Stream-SDK-Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SDK Size

Uh oh!

szuperaz Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

szuperaz Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

szuperaz Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

szuperaz Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

szuperaz Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

szuperaz Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

szuperaz Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

szuperaz Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

szuperaz Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

szuperaz commented May 12, 2026 •

edited

Loading

Stream-SDK-Bot commented May 18, 2026 •

edited

Loading

szuperaz Jun 3, 2026 •

edited

Loading

szuperaz Jun 3, 2026 •

edited

Loading