feat: channel info screens

.claude/skills/accessibility/SKILL.md

@@ -10,7 +10,7 @@ Use this skill whenever code changes can affect screen-reader users (VoiceOver o
 ## Non-negotiable rules
 
 1. **Native semantics first.** Use `Pressable`, `TextInput`, `Switch`, `Image` directly. Use `accessibilityRole` only when native semantics cannot represent the widget (`menu`, `menuitem`, `progressbar`, `radio`, `checkbox`, `article`, `alert`, `tablist`, `tab`).
-2. **Never hardcode English** in `accessibilityLabel`/`accessibilityHint`/announcement strings. For SDK `Button`, pass `accessibilityLabelKey='a11y/...'` (and `accessibilityLabelParams` when needed). For non-Button components, use `useA11yLabel('a11y/...', params)` or `t('a11y/...')` directly when you don't need the disabled-state short-circuit. Add the key to all 12 locale files in `package/src/i18n/`.
+2. **Never hardcode English** in `accessibilityLabel`/`accessibilityHint`/announcement strings. For SDK `Button`, pass `accessibilityLabelKey='a11y/...'` (and `accessibilityLabelParams` when needed). For non-Button components, use `useA11yLabel('a11y/...', params)` or `t('a11y/...')` directly when you don't need the disabled-state short-circuit. Add the key to all 12 locale files in `package/src/i18n/`. You can omit a11y keys if a button contains a text label that describes what it does.
 3. **Gate behavior on `useAccessibilityContext().enabled`.** A11y is opt-in. New listeners, subscriptions, and announcer mounts must be no-ops when `enabled` is false. New `accessibilityRole`/`accessibilityState` props are fine to render unconditionally — they cost ~zero.
 4. **One focusable target per action.** Don't nest `Pressable` inside `Pressable`. Mark inner decorative views with `accessibilityElementsHidden` (iOS) + `importantForAccessibility='no-hide-descendants'` (Android) so the parent carries the label.
 5. **Decorative visuals stay hidden from AT.** Icon-only buttons must carry an `accessibilityLabel` on the wrapper, and the SVG icon should be hidden.
@@ -68,6 +68,7 @@ const a11yProps = useResolvedModalAccessibilityProps();
 ```
 
 This returns:
+
 - iOS: `{ accessibilityViewIsModal: true }`
 - Android: `{ importantForAccessibility: 'yes' }`
 - Either platform when `enabled` is false: `{}`
@@ -81,9 +82,7 @@ Mobile gestures (long-press, hold-to-record, pinch/pan) must have a tap-equivale
 ```tsx
 const { audioRecorderTapMode } = useAccessibilityContext();
 const screenReaderOn = useScreenReaderEnabled();
-const useTapMode =
-  audioRecorderTapMode === 'always' ||
-  (audioRecorderTapMode === 'auto' && screenReaderOn);
+const useTapMode = audioRecorderTapMode === 'always' || (audioRecorderTapMode === 'auto' && screenReaderOn);
 ```
 
 Three-state semantics: `'auto'` (swap when SR is on), `'always'` (swap for everyone), `'never'` (integrator handles).
@@ -109,10 +108,12 @@ Disable spring animations and limit fade durations when this is true.
 ## Testing requirements per change
 
 Minimum:
+
 - Unit tests for new keyboard/focus/semantics behavior in nearest `__tests__/`.
 - Use `@testing-library/react-native` semantic queries: `getByRole`, `getByLabelText`, `getByA11yState`, `getByA11yValue`.
 
 Recommended for non-trivial changes:
+
 - Render with `<OverlayProvider accessibility={{ enabled: true, forceScreenReaderMode: true }}>` and assert the accessible variant renders.
 - Render with `<OverlayProvider accessibility={{ enabled: false }}>` and assert the legacy behavior is unchanged (no extra buttons, no listeners).
 
@@ -143,6 +144,7 @@ Recommended for non-trivial changes:
 ## Cross-SDK parity
 
 API shapes mirror [`stream-chat-react#3146`](https://github.com/GetStream/stream-chat-react/pull/3146):
+
 - `useAccessibilityAnnouncer` ≈ React's `useAriaLiveAnnouncer`
 - `useIncomingMessageAnnouncements` — same params, same throttle/batch logic
 - `a11y/*` i18n namespace shared

CLAUDE.md

@@ -29,9 +29,12 @@ cd package && yarn lint-fix   # Auto-fix lint and formatting issues
 ```bash
 cd package && yarn test:unit              # Run all unit tests (sets TZ=UTC)
 cd package && yarn test:coverage          # Run with coverage report
+cd package && yarn test:typecheck         # Type-check tests against tsconfig.test.json (run after any code change)
 cd package && TZ=UTC npx jest path/to/test.test.tsx  # Run a single test file
 ```
 
+Always run `yarn test:typecheck` after making code changes — `yarn lint` and `yarn test:unit` do not catch all type errors.
+
 Tests use Jest with `react-native` preset and `@testing-library/react-native`. Test files live alongside source at `src/**/__tests__/*.test.ts(x)`. Mock builders are in `src/mock-builders/`.
 
 To run a single test, you can also temporarily add the file path to the `testRegex` array in `package/jest.config.js`.

examples/SampleApp/App.tsx

@@ -29,14 +29,13 @@ import { ChannelFilesScreen } from './src/screens/ChannelFilesScreen';
 import { ChannelImagesScreen } from './src/screens/ChannelImagesScreen';
 import { ChannelScreen } from './src/screens/ChannelScreen';
 import { ChannelPinnedMessagesScreen } from './src/screens/ChannelPinnedMessagesScreen';
+import { ChannelDetailsScreen } from './src/screens/ChannelDetailsScreen';
 import { ChatScreen } from './src/screens/ChatScreen';
-import { GroupChannelDetailsScreen } from './src/screens/GroupChannelDetailsScreen';
 import { LoadingScreen } from './src/screens/LoadingScreen';
 import { MenuDrawer } from './src/components/MenuDrawer';
 import { NewDirectMessagingScreen } from './src/screens/NewDirectMessagingScreen';
 import { NewGroupChannelAddMemberScreen } from './src/screens/NewGroupChannelAddMemberScreen';
 import { NewGroupChannelAssignNameScreen } from './src/screens/NewGroupChannelAssignNameScreen';
-import { OneOnOneChannelDetailScreen } from './src/screens/OneOnOneChannelDetailScreen';
 import { SharedGroupsScreen } from './src/screens/SharedGroupsScreen';
 import { ThreadScreen } from './src/screens/ThreadScreen';
 import { UserSelectorScreen } from './src/screens/UserSelectorScreen';
@@ -66,6 +65,8 @@ import {
   MessageListModeConfigItem,
   MessageListPruningConfigItem,
 } from './src/components/SecretMenu.tsx';
+import { ChannelAllMembersScreen } from './src/screens/ChannelAllMembersScreen.tsx';
+import { ChannelAddMembersScreen } from './src/screens/ChannelAddMembersScreen.tsx';
 
 init({ data });
 
@@ -417,14 +418,19 @@ const HomeScreen = () => {
         options={{ headerShown: false }}
       />
       <Stack.Screen
-        component={OneOnOneChannelDetailScreen}
-        name='OneOnOneChannelDetailScreen'
+        component={ChannelDetailsScreen}
+        name='ChannelDetailsScreen'
         options={{ headerShown: false }}
       />
       <Stack.Screen
-        component={GroupChannelDetailsScreen}
-        name='GroupChannelDetailsScreen'
-        options={{ headerShown: false }}
+        component={ChannelAllMembersScreen}
+        name='ChannelAllMembersScreen'
+        options={{ headerShown: true }}
+      />
+      <Stack.Screen
+        component={ChannelAddMembersScreen}
+        name='ChannelAddMembersScreen'
+        options={{ headerShown: true }}
       />
       <Stack.Screen
         component={ChannelImagesScreen}

examples/SampleApp/src/screens/ChannelAddMembersScreen.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useMemo, useState } from 'react';
+
+import type { RouteProp } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import type { StackNavigatorParamList } from '../types';
+import {
+  ChannelAddMembers,
+  ChannelDetailsContext,
+  NotificationList,
+  NotificationTargetProvider,
+  useChannelActions,
+} from 'stream-chat-react-native-core';
+import type { UserResponse } from 'stream-chat';
+import { KeyboardAvoidingView, Platform, Pressable, Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+type ChannelAddMembersScreenRouteProp = RouteProp<
+  StackNavigatorParamList,
+  'ChannelAddMembersScreen'
+>;
+
+type ChannelAddMembersScreenNavigationProp = NativeStackNavigationProp<
+  StackNavigatorParamList,
+  'ChannelAddMembersScreen'
+>;
+
+type Props = {
+  navigation: ChannelAddMembersScreenNavigationProp;
+  route: ChannelAddMembersScreenRouteProp;
+};
+
+export const ChannelAddMembersScreen: React.FC<Props> = ({
+  navigation,
+  route: {
+    params: { channel },
+  },
+}) => {
+  const { addMembers } = useChannelActions(channel);
+  const [selectedUsers, setSelectedUsers] = useState<UserResponse[]>([]);
+
+  const channelDetailsContextValue = useMemo(() => ({ channel }), [channel]);
+
+  const goBack = useCallback(() => navigation.goBack(), [navigation]);
+
+  const onSavePress = useCallback(async () => {
+    await addMembers(
+      selectedUsers.map((user) => user.id),
+      {
+        onSuccess: () => {
+          setSelectedUsers([]);
+          goBack();
+        },
+      },
+    );
+  }, [addMembers, selectedUsers, goBack]);
+
+  return (
+    <ChannelDetailsContext.Provider value={channelDetailsContextValue}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={{ flex: 1 }}
+      >
+        <SafeAreaView edges={['bottom']} style={{ flex: 1 }}>
+          <NotificationTargetProvider hostId={channel.cid} panel='channel-details'>
+            <ChannelAddMembers onSelectionChange={setSelectedUsers} />
+            <Pressable onPress={onSavePress} style={{ alignItems: 'center', padding: 16 }}>
+              <Text>Save</Text>
+            </Pressable>
+            <NotificationList />
+          </NotificationTargetProvider>
+        </SafeAreaView>
+      </KeyboardAvoidingView>
+    </ChannelDetailsContext.Provider>
+  );
+};

examples/SampleApp/src/screens/ChannelAllMembersScreen.tsx

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+
+import type { RouteProp } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import type { StackNavigatorParamList } from '../types';
+import { ChannelDetailsContext, ChannelDetailsMemberList } from 'stream-chat-react-native-core';
+
+type ChannelAllMembersScreenRouteProp = RouteProp<
+  StackNavigatorParamList,
+  'ChannelAllMembersScreen'
+>;
+
+type ChannelAllMembersScreenNavigationProp = NativeStackNavigationProp<
+  StackNavigatorParamList,
+  'ChannelAllMembersScreen'
+>;
+
+type Props = {
+  navigation: ChannelAllMembersScreenNavigationProp;
+  route: ChannelAllMembersScreenRouteProp;
+};
+
+export const ChannelAllMembersScreen: React.FC<Props> = ({
+  route: {
+    params: { channel },
+  },
+}) => {
+  const channelDetailsContextValue = useMemo(() => ({ channel }), [channel]);
+
+  return (
+    <ChannelDetailsContext.Provider value={channelDetailsContextValue}>
+      <ChannelDetailsMemberList />
+    </ChannelDetailsContext.Provider>
+  );
+};

examples/SampleApp/src/screens/ChannelDetailsScreen.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+
+import type { RouteProp } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import { ChannelDetailsScreen as StreamChannelDetailsScreen } from 'stream-chat-react-native';
+
+import type { StackNavigatorParamList } from '../types';
+
+type ChannelDetailsScreenRouteProp = RouteProp<StackNavigatorParamList, 'ChannelDetailsScreen'>;
+
+type ChannelDetailsScreenNavigationProp = NativeStackNavigationProp<
+  StackNavigatorParamList,
+  'ChannelDetailsScreen'
+>;
+
+type Props = {
+  navigation: ChannelDetailsScreenNavigationProp;
+  route: ChannelDetailsScreenRouteProp;
+};
+
+export const ChannelDetailsScreen: React.FC<Props> = ({
+  navigation,
+  route: {
+    params: { channel },
+  },
+}) => {
+  const onBack = useCallback(() => navigation.goBack(), [navigation]);
+  const popToRoot = useCallback(
+    () =>
+      navigation.reset({
+        index: 0,
+        routes: [{ name: 'MessagingScreen' }],
+      }),
+    [navigation],
+  );
+  const onViewAllMembersPress = useCallback(() => {
+    navigation.navigate('ChannelAllMembersScreen', { channel });
+  }, [navigation, channel]);
+
+  const onAddMembersPress = useCallback(() => {
+    navigation.navigate('ChannelAddMembersScreen', { channel });
+  }, [navigation, channel]);
+
+  return (
+    <>
+      {(channel.data?.member_count ?? 0) % 2 === 0 ? (
+        <StreamChannelDetailsScreen
+          channel={channel}
+          onBack={onBack}
+          onChannelDismiss={popToRoot}
+        />
+      ) : (
+        <StreamChannelDetailsScreen
+          channel={channel}
+          onBack={onBack}
+          onChannelDismiss={popToRoot}
+          onViewAllMembersPress={onViewAllMembersPress}
+          onAddMembersPress={onAddMembersPress}
+        />
+      )}
+    </>
+  );
+};

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -133,21 +133,15 @@ export const ChannelListScreen: React.FC = () => {
   );
 
   const getChannelActionItems = useStableCallback(
-    ({ context: { isDirectChat, channel }, defaultItems }) => {
+    ({ context: { channel }, defaultItems }) => {
       const viewInfo = () => {
         if (!channel) {
           return;
         }
         if (navigation) {
-          if (isDirectChat) {
-            navigation.navigate('OneOnOneChannelDetailScreen', {
-              channel,
-            });
-          } else {
-            navigation.navigate('GroupChannelDetailsScreen', {
-              channel,
-            });
-          }
+          navigation.navigate('ChannelDetailsScreen', {
+            channel,
+          });
         }
       };
 

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -56,11 +56,6 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
   const { chatClient } = useAppContext();
   const navigation = useNavigation<ChannelScreenNavigationProp>();
 
-  const isOneOnOneConversation =
-    channel &&
-    Object.values(channel.state.members).length === 2 &&
-    channel.id?.indexOf('!members-') === 0;
-
   const onBackPress = useCallback(() => {
     if (!navigation.canGoBack()) {
       // if no previous screen was present in history, go to the list screen
@@ -75,16 +70,10 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
 
   const onRightContentPress = useCallback(() => {
     closePicker();
-    if (isOneOnOneConversation) {
-      navigation.navigate('OneOnOneChannelDetailScreen', {
-        channel,
-      });
-    } else {
-      navigation.navigate('GroupChannelDetailsScreen', {
-        channel,
-      });
-    }
-  }, [channel, closePicker, isOneOnOneConversation, navigation]);
+    navigation.navigate('ChannelDetailsScreen', {
+      channel,
+    });
+  }, [channel, closePicker, navigation]);
 
   if (!channel || !chatClient) {
     return null;