refactor: simplify ComponentsContext by deriving type from defaults

- Replace 300-line hand-written ComponentOverrides type with derived type:
  `Partial<(typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']>`
- Remove ~110 type imports from ComponentsContext.tsx (now ~55 lines total)
- Add optional component entries to defaultComponents.ts for components
  with no default (MessageText, PollContent, Input, etc.)
- Remove remaining component override props from FileAttachment,
  StickyHeader, MessageBubble, MessageMenu
- Adding a new overridable component now only requires editing
  defaultComponents.ts — the type is auto-derived

Author: oliverlaz

package/src/components/Attachment/FileAttachment.tsx

@@ -7,10 +7,7 @@ import { openUrlSafely } from './utils/openUrlSafely';
 
 import { FileIconProps } from '../../components/Attachment/FileIcon';
 
-import {
-  ComponentOverrides,
-  useComponentsContext,
-} from '../../contexts/componentsContext/ComponentsContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -25,7 +22,6 @@ export type FileAttachmentPropsWithContext = Pick<
   MessageContextValue,
   'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
-  Pick<Required<ComponentOverrides>, 'FilePreview'> &
   Pick<MessagesContextValue, 'additionalPressableProps'> & {
     /** The attachment to render */
     attachment: Attachment;
@@ -46,13 +42,13 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
     additionalPressableProps,
     attachment,
     attachmentIconSize,
-    FilePreview,
     onLongPress,
     onPress,
     onPressIn,
     preventPress,
     styles: stylesProp = styles,
   } = props;
+  const { FilePreview } = useComponentsContext();
 
   const defaultOnPress = () => openUrlSafely(attachment.asset_url);
 
@@ -104,18 +100,13 @@ export type FileAttachmentProps = Partial<Omit<FileAttachmentPropsWithContext, '
   Pick<FileAttachmentPropsWithContext, 'attachment'>;
 
 export const FileAttachment = (props: FileAttachmentProps) => {
-  const { FilePreview: PropFilePreview } = props;
   const { onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
-  const { FilePreview: ComponentsFilePreview } = useComponentsContext();
   const { additionalPressableProps } = useMessagesContext();
 
-  const FilePreview = PropFilePreview || ComponentsFilePreview;
-
   return (
     <FileAttachmentWithContext
       {...{
         additionalPressableProps,
-        FilePreview,
         onLongPress,
         onPress,
         onPressIn,

package/src/components/Message/MessageItemView/MessageBubble.tsx

@@ -13,20 +13,23 @@ import Animated, {
 import { MessageItemViewPropsWithContext } from './MessageItemView';
 
 import { useTheme } from '../../../contexts';
-import type { ComponentOverrides } from '../../../contexts/componentsContext/ComponentsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import { NativeHandlers } from '../../../native';
 
 const AnimatedWrapper = Animated.createAnimatedComponent(View);
 
-type SwipableMessageWrapperProps = Pick<Required<ComponentOverrides>, 'MessageSwipeContent'> &
-  Pick<MessageItemViewPropsWithContext, 'messageSwipeToReplyHitSlop'> & {
-    children: ReactNode;
-    onSwipe: () => void;
-  };
+type SwipableMessageWrapperProps = Pick<
+  MessageItemViewPropsWithContext,
+  'messageSwipeToReplyHitSlop'
+> & {
+  children: ReactNode;
+  onSwipe: () => void;
+};
 
 export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperProps) => {
-  const { MessageSwipeContent, children, messageSwipeToReplyHitSlop, onSwipe } = props;
+  const { children, messageSwipeToReplyHitSlop, onSwipe } = props;
+  const { MessageSwipeContent } = useComponentsContext();
   const isRTL = I18nManager.isRTL;
   const swipeDirectionMultiplier = isRTL ? -1 : 1;
 

package/src/components/Message/MessageItemView/MessageItemView.tsx

@@ -248,7 +248,6 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     MessageHeader,
     MessageReplies,
     MessageSpacer,
-    MessageSwipeContent,
     ReactionListBottom,
     ReactionListTop,
   } = useComponentsContext();
@@ -366,7 +365,6 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
 
   return enableSwipeToReply && !isMessageTypeDeleted ? (
     <SwipableMessageWrapper
-      MessageSwipeContent={MessageSwipeContent}
       messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
       onSwipe={onSwipeActionHandler}
     >

package/src/components/MessageList/MessageFlashList.tsx

@@ -294,7 +294,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     threadList = false,
   } = props;
   const {
-    DateHeader,
     EmptyStateIndicator,
     LoadingIndicator,
     NetworkDownIndicator,
@@ -1078,7 +1077,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       )}
       <View style={styles.stickyHeaderContainer}>
         {messageListLengthAfterUpdate && StickyHeader ? (
-          <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+          <StickyHeader date={stickyHeaderDate} />
         ) : null}
       </View>
       <Animated.View

package/src/components/MessageList/MessageList.tsx

@@ -348,7 +348,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     threadHasMore,
   } = props;
   const {
-    DateHeader,
     EmptyStateIndicator,
     LoadingIndicator,
     NetworkDownIndicator,
@@ -1295,7 +1294,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       )}
       <View style={styles.stickyHeaderContainer}>
         {messageListLengthAfterUpdate && StickyHeader ? (
-          <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+          <StickyHeader date={stickyHeaderDate} />
         ) : null}
       </View>
       {scrollToBottomButtonVisible ? (

package/src/components/MessageList/StickyHeader.tsx

@@ -1,14 +1,14 @@
 import React, { useMemo } from 'react';
 
-import type { ComponentOverrides } from '../../contexts/componentsContext/ComponentsContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
 import { getDateString } from '../../utils/i18n/getDateString';
 
 /**
  * Props for the StickyHeader component.
  */
-export type StickyHeaderProps = Pick<Required<ComponentOverrides>, 'DateHeader'> & {
+export type StickyHeaderProps = {
   /**
    * Date to be displayed in the sticky header.
    */
@@ -19,7 +19,8 @@ export type StickyHeaderProps = Pick<Required<ComponentOverrides>, 'DateHeader'>
   dateString?: string | number;
 };
 
-export const StickyHeader = ({ date, DateHeader, dateString }: StickyHeaderProps) => {
+export const StickyHeader = ({ date, dateString }: StickyHeaderProps) => {
+  const { DateHeader } = useComponentsContext();
   const { t, tDateTimeParser } = useTranslationContext();
 
   const stickyHeaderDateString = useMemo(() => {

package/src/components/MessageMenu/MessageMenu.tsx

@@ -4,59 +4,47 @@ import { useWindowDimensions } from 'react-native';
 
 import { MessageActionType } from './MessageActionListItem';
 
-import type { ComponentOverrides } from '../../contexts/componentsContext/ComponentsContext';
 import { MessageContextValue } from '../../contexts/messageContext/MessageContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
 
 export type MessageMenuProps = PropsWithChildren<
-  Partial<
-    Pick<
-      ComponentOverrides,
-      | 'MessageActionList'
-      | 'MessageActionListItem'
-      | 'MessageReactionPicker'
-      | 'MessageUserReactions'
-      | 'MessageUserReactionsAvatar'
-      | 'MessageUserReactionsItem'
-    >
-  > &
-    Partial<Pick<MessageContextValue, 'message'>> & {
-      /**
-       * Function to close the message actions bottom sheet
-       * @returns void
-       */
-      dismissOverlay: () => void;
-      /**
-       * An array of message actions to render
-       */
-      messageActions: MessageActionType[];
-      /**
-       * Boolean to determine if there are message actions
-       */
-      showMessageReactions: boolean;
-      /**
-       * Boolean to determine if the overlay is visible.
-       */
-      visible: boolean;
-      /**
-       * Function to handle reaction on press
-       * @param reactionType
-       * @returns
-       */
-      handleReaction?: (reactionType: string) => Promise<void>;
-      /**
-       * The selected reaction
-       */
-      selectedReaction?: string;
+  Partial<Pick<MessageContextValue, 'message'>> & {
+    /**
+     * Function to close the message actions bottom sheet
+     * @returns void
+     */
+    dismissOverlay: () => void;
+    /**
+     * An array of message actions to render
+     */
+    messageActions: MessageActionType[];
+    /**
+     * Boolean to determine if there are message actions
+     */
+    showMessageReactions: boolean;
+    /**
+     * Boolean to determine if the overlay is visible.
+     */
+    visible: boolean;
+    /**
+     * Function to handle reaction on press
+     * @param reactionType
+     * @returns
+     */
+    handleReaction?: (reactionType: string) => Promise<void>;
+    /**
+     * The selected reaction
+     */
+    selectedReaction?: string;
 
-      layout: {
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-      };
-    }
+    layout: {
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+    };
+  }
 >;
 
 // TODO: V9: Either remove this or refactor it so that it's useful again, as its logic