stream-chat-react-native-core 9.0.0-beta.31 → 9.0.0-beta.32

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -2,7 +2,6 @@ import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
 
 import BottomSheet from '@gorhom/bottom-sheet';
 
-import { AttachmentPickerContentProps } from '../../components';
 import {
   AttachmentPickerStore,
   SelectedPickerType,
@@ -21,10 +20,6 @@ export type AttachmentPickerContextValue = Pick<
   MessageInputContextValue,
   'attachmentSelectionBarHeight' | 'attachmentPickerBottomSheetHeight'
 > & {
-  /**
-   * Custom UI Component to render select more photos for selected gallery access in iOS.
-   */
-  AttachmentPickerIOSSelectMorePhotos: React.ComponentType;
   /**
    * `bottomInset` determine the height of the `AttachmentPicker` and the underlying shift to the `MessageList` when it is opened.
    * This can also be set via the `setBottomInset` function provided by the `useAttachmentPickerContext` hook.
@@ -39,16 +34,6 @@ export type AttachmentPickerContextValue = Pick<
   topInset: number;
 
   disableAttachmentPicker?: boolean;
-  /**
-   * Custom UI component to render overlay component, that shows up on top of [selected
-   * image](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) (with tick mark)
-   *
-   * **Default**
-   * [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
-   */
-  ImageOverlaySelectedComponent: React.ComponentType<{ index: number }>;
-  AttachmentPickerSelectionBar: React.ComponentType;
-  AttachmentPickerContent: React.ComponentType<AttachmentPickerContentProps>;
   attachmentPickerStore: AttachmentPickerStore;
   numberOfAttachmentPickerImageColumns?: number;
   numberOfAttachmentImagesToLoadPerCall?: number;

package/src/contexts/channelContext/ChannelContext.tsx

@@ -3,9 +3,6 @@ import React, { PropsWithChildren, useContext } from 'react';
 import type { Channel, ChannelState } from 'stream-chat';
 
 import { MarkReadFunctionOptions } from '../../components/Channel/Channel';
-import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
-import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
-import { StickyHeaderProps } from '../../components/MessageList/StickyHeader';
 import {
   ChannelUnreadStateStore,
   ChannelUnreadStateStoreType,
@@ -38,12 +35,6 @@ export type ChannelContextValue = {
    * @overrideType Channel
    */
   channel: Channel;
-  /**
-   * Custom UI component to display empty state when channel has no messages.
-   *
-   * **Default** [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/EmptyStateIndicator.tsx)
-   */
-  EmptyStateIndicator: React.ComponentType<EmptyStateProps>;
   /**
    * When set to true, reactions will be limited to 1 per user. If user selects another reaction
    * then his previous reaction will be removed and replaced with new one.
@@ -90,10 +81,6 @@ export type ChannelContextValue = {
     setTargetedMessage?: (messageId: string) => void;
   }) => Promise<void>;
 
-  /**
-   * Custom loading indicator to override the Stream default
-   */
-  LoadingIndicator: React.ComponentType<LoadingProps>;
   markRead: (options?: MarkReadFunctionOptions) => void;
   /**
    *
@@ -119,10 +106,6 @@ export type ChannelContextValue = {
    * ```
    */
   members: ChannelState['members'];
-  /**
-   * Custom network down indicator to override the Stream default
-   */
-  NetworkDownIndicator: React.ComponentType;
   read: ChannelState['read'];
   reloadChannel: () => Promise<void>;
   scrollToFirstUnreadThreshold: number;
@@ -156,13 +139,6 @@ export type ChannelContextValue = {
    * currently near them within the viewport.
    */
   maximumMessageLimit?: number;
-  /**
-   * Custom UI component for sticky header of channel.
-   *
-   * **Default** [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx)
-   */
-  StickyHeader?: React.ComponentType<StickyHeaderProps>;
-
   /**
    * Id of message, around which Channel/MessageList gets loaded when opened.
    * You will see a highlighted background for targetted message, when opened.

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -5,23 +5,8 @@ import type { FlatList } from 'react-native-gesture-handler';
 
 import type { Channel } from 'stream-chat';
 
-import type { HeaderErrorProps } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
 import type { GetChannelActionItems } from '../../components/ChannelList/hooks/useChannelActionItems';
 import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels';
-import type { ChannelDetailsBottomSheetProps } from '../../components/ChannelPreview/ChannelDetailsBottomSheet';
-import { ChannelLastMessagePreviewProps } from '../../components/ChannelPreview/ChannelLastMessagePreview';
-import { ChannelMessagePreviewDeliveryStatusProps } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
-import { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage';
-import type { ChannelPreviewStatusProps } from '../../components/ChannelPreview/ChannelPreviewStatus';
-import type { ChannelPreviewTitleProps } from '../../components/ChannelPreview/ChannelPreviewTitle';
-import { ChannelPreviewTypingIndicatorProps } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator';
-import type { ChannelPreviewUnreadCountProps } from '../../components/ChannelPreview/ChannelPreviewUnreadCount';
-import type { ChannelPreviewViewProps } from '../../components/ChannelPreview/ChannelPreviewView';
-import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
-import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator';
-import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
-
-import { ChannelAvatarProps } from '../../components/ui/Avatar/ChannelAvatar';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -53,18 +38,6 @@ export type ChannelsContextValue = {
    * Channels can be either an array of channels or a promise which resolves to an array of channels
    */
   channels: Channel[] | null;
-  /**
-   * Custom indicator to use when channel list is empty
-   *
-   * Default: [EmptyStateIndicator](https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#emptystateindicator)
-   * */
-  EmptyStateIndicator: React.ComponentType<EmptyStateProps>;
-  /**
-   * Custom loading indicator to display at bottom of the list, while loading further pages
-   *
-   * Default: [ChannelListFooterLoadingIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#footerloadingindicator)
-   */
-  FooterLoadingIndicator: React.ComponentType;
   /**
    * Incremental number change to force update the FlatList
    */
@@ -73,33 +46,10 @@ export type ChannelsContextValue = {
    * Whether or not the FlatList has another page to render
    */
   hasNextPage: boolean;
-  /**
-   * Custom indicator to display error at top of list, if loading/pagination error occurs
-   *
-   * Default: [ChannelListHeaderErrorIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#headererrorindicator)
-   */
-  HeaderErrorIndicator: React.ComponentType<HeaderErrorProps>;
-  /**
-   * Custom indicator to display network-down error at top of list, if there is connectivity issue
-   *
-   * Default: [ChannelListHeaderNetworkDownIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#headernetworkdownindicator)
-   */
-  HeaderNetworkDownIndicator: React.ComponentType;
   /**
    * Initial channels query loading state, triggers the LoadingIndicator
    */
   loadingChannels: boolean;
-  /**
-   * Custom indicator to use when there is error in fetching channels
-   *
-   * Default: [LoadingErrorIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#loadingerrorindicator)
-   * */
-  LoadingErrorIndicator: React.ComponentType<LoadingErrorProps>;
-  /**
-   * Custom loading indicator to use on Channel List
-   *
-   * */
-  LoadingIndicator: React.ComponentType<Pick<LoadingProps, 'listType'>>;
   /**
    * Whether or not additional channels are being loaded, triggers the FooterLoadingIndicator
    */
@@ -121,12 +71,6 @@ export type ChannelsContextValue = {
    * Number of skeletons that should show when loading. Default: 6
    */
   numberOfSkeletons: number;
-  /**
-   * Custom UI component to display individual channel list items
-   *
-   * Default: [ChannelPreviewView](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-preview-view/)
-   */
-  Preview: React.ComponentType<ChannelPreviewViewProps>;
   /**
    * Triggered when the channel list is refreshing, displays a loading spinner at the top of the list
    */
@@ -159,73 +103,16 @@ export type ChannelsContextValue = {
    * ```
    */
   setFlatListRef: (ref: FlatList<Channel> | null) => void;
-  /**
-   * Custom UI component to display loading channel skeletons
-   *
-   * Default: [Skeleton](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#skeleton)
-   */
-  Skeleton: React.ComponentType;
   /**
    * Error in channels query, if any
    */
   error?: Error;
-  ListHeaderComponent?: React.ComponentType;
   /**
    * Function to set the currently active channel, acts as a bridge between ChannelList and Channel components
    *
    * @param channel A channel object
    */
   onSelect?: (channel: Channel) => void;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelAvatar.tsx)
-   */
-  PreviewAvatar?: React.ComponentType<ChannelAvatarProps>;
-  /**
-   * Custom UI component to render preview of latest message on channel.
-   *
-   * **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx)
-   */
-  PreviewMessage?: React.ComponentType<ChannelPreviewMessageProps>;
-  /**
-   * Custom UI component to render delivery status of latest message on channel.
-   *
-   * **Default** [ChannelMessagePreviewDeliveryStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx)
-   */
-  PreviewMessageDeliveryStatus?: React.ComponentType<ChannelMessagePreviewDeliveryStatusProps>;
-  /**
-   * Custom UI component to render muted status.
-   *
-   * **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx)
-   */
-  PreviewMutedStatus?: React.ComponentType;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelPreviewStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewStatus.tsx)
-   */
-  PreviewStatus?: React.ComponentType<ChannelPreviewStatusProps>;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelPreviewTitle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewTitle.tsx)
-   */
-  PreviewTitle?: React.ComponentType<ChannelPreviewTitleProps>;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelPreviewUnreadCount](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx)
-   */
-  PreviewUnreadCount?: React.ComponentType<ChannelPreviewUnreadCountProps>;
-  PreviewTypingIndicator?: React.ComponentType<ChannelPreviewTypingIndicatorProps>;
-  ChannelDetailsBottomSheet?: React.ComponentType<ChannelDetailsBottomSheetProps>;
-  /**
-   * Custom UI component to render preview of last message on channel.
-   *
-   * **Default** [ChannelLastMessagePreview](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx)
-   */
-  PreviewLastMessage?: React.ComponentType<ChannelLastMessagePreviewProps>;
   getChannelActionItems?: GetChannelActionItems;
   swipeActionsEnabled?: boolean;
 

package/src/contexts/chatContext/ChatContext.tsx

@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, useContext } from 'react';
-import type { ImageProps } from 'react-native';
 
 import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
 
@@ -32,10 +31,6 @@ export type ChatContextValue = {
   client: StreamChat;
   connectionRecovering: boolean;
   enableOfflineSupport: boolean;
-  /**
-   * Drop in replacement of all the underlying Image components within SDK. This is useful for the purpose of offline caching of images. Please check the Offline Support Guide for usage.
-   */
-  ImageComponent: React.ComponentType<ImageProps>;
   isOnline: boolean | null;
   mutedUsers: Mute[];
   /**

package/src/contexts/componentsContext/ComponentsContext.tsx

@@ -0,0 +1,62 @@
+import React, { PropsWithChildren, useContext, useMemo } from 'react';
+
+/**
+ * All overridable UI components in the SDK.
+ * Derived from the DEFAULT_COMPONENTS map in defaultComponents.ts.
+ * Adding a new default automatically makes it available as an override.
+ *
+ * Every key is optional — only specify the components you want to override.
+ */
+export type ComponentOverrides = Partial<
+  (typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']
+>;
+
+const ComponentsContext = React.createContext<ComponentOverrides>({});
+
+/**
+ * Provider to override UI components at any level of the tree.
+ * Supports nesting — inner overrides merge over outer ones (closest wins).
+ *
+ * @example
+ * ```tsx
+ * <WithComponents overrides={{ Message: MyCustomMessage, SendButton: MyCustomSendButton }}>
+ *   <Channel channel={channel}>
+ *     <MessageList />
+ *     <MessageInput />
+ *   </Channel>
+ * </WithComponents>
+ * ```
+ */
+export const WithComponents = ({
+  children,
+  overrides,
+}: PropsWithChildren<{ overrides: ComponentOverrides }>) => {
+  const parent = useContext(ComponentsContext);
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
+  const merged = useMemo(() => ({ ...parent, ...overrides }), []);
+  return <ComponentsContext.Provider value={merged}>{children}</ComponentsContext.Provider>;
+};
+
+// Lazy-loaded to break circular dependency:
+// defaultComponents.ts → imports components → components import useComponentsContext from this file
+let cachedDefaults: ComponentOverrides | undefined;
+const getDefaults = (): ComponentOverrides => {
+  if (!cachedDefaults) {
+    cachedDefaults = (require('./defaultComponents') as { DEFAULT_COMPONENTS: ComponentOverrides })
+      .DEFAULT_COMPONENTS;
+  }
+  return cachedDefaults;
+};
+
+/**
+ * Hook to access resolved component overrides.
+ * Returns all components with defaults filled in — user overrides merged over defaults.
+ */
+export const useComponentsContext = () => {
+  const overrides = useContext(ComponentsContext);
+  return useMemo(
+    () => ({ ...getDefaults(), ...overrides }) as Required<ComponentOverrides>,
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
+    [],
+  );
+};

package/src/contexts/componentsContext/PLAN.md

@@ -0,0 +1,148 @@
+# WithComponents — Component Override System
+
+## Design Principle
+
+**All components are read from `useComponentsContext()`. All other contexts only provide data + APIs — never components.**
+
+## Current State (Completed)
+
+### What was done
+
+1. **Created `ComponentsContext`** — `WithComponents` provider, `useComponentsContext()` hook, `ComponentOverrides` type
+2. **Created `defaultComponents.ts`** — centralized map of all ~130 default components
+3. **Stripped component keys** from all existing context types: `MessagesContextValue`, `InputMessageInputContextValue`, `ChannelContextValue`, `ChannelsContextValue`, `AttachmentPickerContextValue`, `ThreadsContextValue`, `ImageGalleryContextValue`
+4. **Simplified `useCreate*Context` hooks** — no longer receive or forward component params
+5. **Simplified `Channel.tsx`** — removed ~90 component imports, prop defaults, forwarding lines
+6. **Simplified `ChannelList.tsx`** — removed ~19 component props
+7. **Updated ~80 consumer files** — switched from old context hooks to `useComponentsContext()`
+8. **Removed component override props** from ALL individual components
+9. **Updated all 3 example apps** (SampleApp, ExpoMessaging, TypeScriptMessaging)
+10. **Updated ~45 documentation pages** across docs-content repo
+11. **Merged with develop** and resolved conflicts
+
+### Architecture
+
+```
+User: <WithComponents overrides={{ Message: Custom }}>
+  ↓
+ComponentsContext (merges parent + overrides, inner wins)
+  ↓
+useComponentsContext() → { ...DEFAULT_COMPONENTS, ...overrides }
+  ↓
+Consumer: const { Message } = useComponentsContext()
+```
+
+### Key Files
+
+| File                    | Purpose                                                                                                                                   |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentsContext.tsx` | ~60 lines. `ComponentOverrides` type (derived from `typeof DEFAULT_COMPONENTS`), `WithComponents` provider, `useComponentsContext()` hook |
+| `defaultComponents.ts`  | ~300 lines. Single source of truth for all default component mappings. Adding a new component here auto-extends `ComponentOverrides`      |
+
+### Type System
+
+`ComponentOverrides` is derived automatically:
+
+```ts
+export type ComponentOverrides = Partial<(typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']>;
+```
+
+No manual type maintenance — add a component to `DEFAULT_COMPONENTS` and the type updates.
+
+### Circular Dependency Handling
+
+`defaultComponents.ts` → imports components → components import `useComponentsContext` from `ComponentsContext.tsx`.
+
+Broken by lazy-loading defaults in the hook:
+
+```ts
+let cachedDefaults: ComponentOverrides | undefined;
+const getDefaults = () => {
+  if (!cachedDefaults) {
+    cachedDefaults = require('./defaultComponents').DEFAULT_COMPONENTS;
+  }
+  return cachedDefaults;
+};
+```
+
+### Naming Conventions
+
+Some component keys differ from their default component names to avoid collisions:
+
+| Override Key                  | Default Component                       | Why renamed                                                |
+| ----------------------------- | --------------------------------------- | ---------------------------------------------------------- |
+| `FileAttachmentIcon`          | `FileIcon`                              | Clarity                                                    |
+| `ChannelListLoadingIndicator` | `ChannelListLoadingIndicator`           | Split from shared `LoadingIndicator` — renders skeleton UI |
+| `MessageListLoadingIndicator` | `LoadingIndicator`                      | Split from shared `LoadingIndicator` — renders text        |
+| `ChatLoadingIndicator`        | `undefined`                             | Optional, no default                                       |
+| `ThreadMessageComposer`       | `MessageComposer`                       | Avoid collision with `MessageComposer` component name      |
+| `ThreadListComponent`         | `DefaultThreadListComponent`            | Avoid collision with exported `ThreadList`                 |
+| `StartAudioRecordingButton`   | `AudioRecordingButton`                  | Historical naming                                          |
+| `Preview`                     | `ChannelPreviewView`                    | ChannelList preview item                                   |
+| `PreviewAvatar`               | `ChannelAvatar`                         | ChannelList preview avatar                                 |
+| `FooterLoadingIndicator`      | `ChannelListFooterLoadingIndicator`     | ChannelList footer                                         |
+| `HeaderErrorIndicator`        | `ChannelListHeaderErrorIndicator`       | ChannelList header                                         |
+| `HeaderNetworkDownIndicator`  | `ChannelListHeaderNetworkDownIndicator` | ChannelList header                                         |
+
+### Optional Components (no default)
+
+These exist in `DEFAULT_COMPONENTS` as `undefined` with `React.ComponentType<any> | undefined` type assertions:
+
+`AttachmentPickerIOSSelectMorePhotos`, `ChatLoadingIndicator`, `CreatePollContent`, `ImageComponent`, `Input`, `ListHeaderComponent`, `MessageContentBottomView`, `MessageContentLeadingView`, `MessageContentTopView`, `MessageContentTrailingView`, `MessageLocation`, `MessageSpacer`, `MessageText`, `PollContent`
+
+### Shared Component Keys (audited)
+
+Some keys were used in multiple contexts before the refactor. Audit results:
+
+| Key                     | Used By               | Same Default?                                               | Resolution                                                                  |
+| ----------------------- | --------------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `EmptyStateIndicator`   | Channel + ChannelList | Yes (differentiates via `listType` prop)                    | Single key ✅                                                               |
+| `LoadingErrorIndicator` | Channel + ChannelList | Yes (differentiates via `listType` prop)                    | Single key ✅                                                               |
+| `LoadingIndicator`      | Channel + ChannelList | **No** — Channel used text-based, ChannelList used skeleton | Split into `MessageListLoadingIndicator` + `ChannelListLoadingIndicator` ✅ |
+
+### API Alignment with stream-chat-react
+
+| Aspect    | React Native                        | React Web                              |
+| --------- | ----------------------------------- | -------------------------------------- |
+| Provider  | `WithComponents`                    | `WithComponents`                       |
+| Prop name | `overrides`                         | `overrides`                            |
+| Hook      | `useComponentsContext()`            | `useComponentContext()`                |
+| Type      | `ComponentOverrides` (auto-derived) | `ComponentContextValue` (hand-written) |
+| Defaults  | Lazy-loaded via `require()`         | Set at `Channel` level                 |
+| Merge     | `useMemo`                           | Plain spread (no memo)                 |
+
+## Known Issues / Future Work
+
+### Pre-existing Test Failures (not caused by this work)
+
+These test suites fail on `develop` too:
+
+- `offline-support/index.test.ts` — timeout
+- `ChannelList.test.js` — filter race condition (`channel.countUnread` mock missing)
+- `isAttachmentEqualHandler.test.js`, `MessageContent.test.js`, `MessageTextContainer.test.tsx`, `MessageUserReactions.test.tsx`, `ChannelPreview.test.tsx` — various pre-existing issues
+
+### Linter Interaction
+
+`@typescript-eslint/no-unused-vars` (warn, max-warnings 0) aggressively strips unused type keys. When adding new keys to `ComponentOverrides`, the type and its consumer must land in the same edit — otherwise the linter removes the key between saves.
+
+Since `ComponentOverrides` is now auto-derived from `DEFAULT_COMPONENTS`, this is no longer an issue for the type itself. But be aware when adding optional components (`undefined as React.ComponentType<any> | undefined`).
+
+### `contexts/index.ts` Barrel Export
+
+The `export * from './componentsContext/ComponentsContext'` line in `contexts/index.ts` was stripped by the linter multiple times during development. If `WithComponents` becomes unexportable from the package, check this barrel file first.
+
+### Documentation
+
+Docs PR: https://github.com/GetStream/docs-content/pull/1169
+
+Updated ~45 pages across:
+
+- Core teaching pages (custom_components, message-customization, etc.)
+- Component reference pages (channel-list, message-list, message-composer, etc.)
+- Context docs (stripped component keys from 7 context pages)
+- Migration guide (upgrading-from-v8.md — comprehensive WithComponents section)
+- Advanced guides (audio, AI, image-picker, etc.)
+
+### SDK PR
+
+https://github.com/GetStream/stream-chat-react-native/pull/3542

package/src/contexts/componentsContext/__tests__/defaultComponents.test.ts

@@ -0,0 +1,44 @@
+import { DEFAULT_COMPONENTS } from '../defaultComponents';
+
+// Optional component keys that are intentionally undefined (no default implementation)
+const OPTIONAL_KEYS = new Set([
+  'AttachmentPickerIOSSelectMorePhotos',
+  'ChatLoadingIndicator',
+  'CreatePollContent',
+  'Input',
+  'ListHeaderComponent',
+  'MessageContentBottomView',
+  'MessageContentLeadingView',
+  'MessageContentTopView',
+  'MessageContentTrailingView',
+  'MessageLocation',
+  'MessageSpacer',
+  'MessageText',
+  'PollContent',
+]);
+
+describe('DEFAULT_COMPONENTS', () => {
+  it('should have all required values defined', () => {
+    const entries = Object.entries(DEFAULT_COMPONENTS);
+    expect(entries.length).toBeGreaterThan(50);
+
+    const unexpectedUndefined = entries.filter(
+      ([key, value]) => value === undefined && !OPTIONAL_KEYS.has(key),
+    );
+    if (unexpectedUndefined.length > 0) {
+      console.log(
+        'Unexpectedly undefined keys:',
+        unexpectedUndefined.map(([k]) => k),
+      );
+    }
+    expect(unexpectedUndefined).toEqual([]);
+  });
+
+  it('optional keys should be explicitly listed', () => {
+    const entries = Object.entries(DEFAULT_COMPONENTS);
+    const actualUndefined = new Set(
+      entries.filter(([, v]) => v === undefined || v === null).map(([k]) => k),
+    );
+    expect(actualUndefined).toEqual(OPTIONAL_KEYS);
+  });
+});