feat: channel details - navigational screens

examples/SampleApp/package.json

@@ -64,7 +64,7 @@
     "react-native-teleport": "^1.1.7",
     "react-native-video": "^6.19.2",
     "react-native-worklets": "^0.8.3",
-    "stream-chat": "^9.45.6",
+    "stream-chat": "^9.46.0",
     "stream-chat-react-native": "workspace:^",
     "stream-chat-react-native-core": "workspace:^"
   },

examples/SampleApp/src/components/SampleAppComponentOverrides.tsx

@@ -6,7 +6,6 @@ import type { ComponentOverrides } from 'stream-chat-react-native';
 import { useTheme } from 'stream-chat-react-native';
 
 import { CustomAttachmentPickerContent } from './AttachmentPickerContent';
-import { ChannelDetailsNavigationSection } from './ChannelDetailsNavigationSection';
 import { FastImageAdapter } from './FastImageAdapter';
 import { MessageLocation } from './LocationSharing/MessageLocation';
 import type { MessageOverlayBackdropConfigItem } from './SecretMenu';
@@ -45,7 +44,6 @@ export const useSampleAppComponentOverrides = (
   useMemo<ComponentOverrides>(
     () => ({
       AttachmentPickerContent: CustomAttachmentPickerContent,
-      ChannelDetailsNavigationSection,
       ChannelListHeaderNetworkDownIndicator: RenderNull,
       ImageComponent: FastImageAdapter,
       MessageLocation,

examples/SampleApp/src/screens/ChannelDetailsScreen.tsx

@@ -5,10 +5,12 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import {
   ChannelDetails,
+  GetChannelDetailsNavigationItems,
   GetChannelMemberActionItems,
   ChannelAddMembersModal,
   ChannelAllMembersModal,
   ChannelDetailsContextProvider,
+  ChannelDetailsNavigationSectionType,
 } from 'stream-chat-react-native';
 
 import { SendDirectMessage } from '../icons/SendDirectMessage';
@@ -27,13 +29,34 @@ type Props = {
   route: ChannelDetailsScreenRouteProp;
 };
 
+const navigationItems: {
+  [key in ChannelDetailsNavigationSectionType]:
+    | 'ChannelPinnedMessagesScreen'
+    | 'ChannelImagesScreen'
+    | 'ChannelFilesScreen';
+} = {
+  'pinned-messages': 'ChannelPinnedMessagesScreen',
+  'photos-and-videos': 'ChannelImagesScreen',
+  files: 'ChannelFilesScreen',
+};
+
 export const ChannelDetailsScreen: React.FC<Props> = ({
   navigation,
   route: {
     params: { channel },
   },
 }) => {
   const onBack = useCallback(() => navigation.goBack(), [navigation]);
+  const getNavigationItems = useCallback<GetChannelDetailsNavigationItems>(
+    ({ defaultItems }) =>
+      defaultItems.map((item) => ({
+        ...item,
+        ...(navigationItems[item.section]
+          ? { onPress: () => navigation.navigate(navigationItems[item.section], { channel }) }
+          : {}),
+      })),
+    [navigation, channel],
+  );
   const popToRoot = useCallback(
     () =>
       navigation.reset({
@@ -82,6 +105,7 @@ export const ChannelDetailsScreen: React.FC<Props> = ({
       <ChannelDetails
         channel={channel}
         getChannelMemberActionItems={getChannelMemberActionItems}
+        getNavigationItems={getNavigationItems}
         onBack={onBack}
         onChannelDismiss={popToRoot}
         // Handler view all members modal so we can close it after navigation is triggered by our custom action