fix: resolve build and lint errors from component migration

- Fix ImageComponent type in Reply.tsx (required, not optional)
- Replace React.ComponentType<any> with proper types (ImageProps,
  ImageGalleryHeaderProps, etc.) to satisfy no-explicit-any lint rule
- Add missing ImageProps imports in URLPreview/URLPreviewCompact
- Fix prettier formatting

Author: oliverlaz

package/src/components/Attachment/GalleryImage.tsx

@@ -6,7 +6,7 @@ import { useComponentsContext } from '../../contexts/componentsContext/Component
 import { getUrlWithoutParams, isLocalUrl, makeImageCompatibleUrl } from '../../utils/utils';
 
 export type GalleryImageWithContextProps = GalleryImageProps & {
-  ImageComponent?: React.ComponentType<any>;
+  ImageComponent?: React.ComponentType<ImageProps>;
 };
 
 export const GalleryImageWithContext = (props: GalleryImageWithContextProps) => {

package/src/components/Attachment/Giphy/GiphyImage.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, ImageProps, StyleSheet, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
@@ -16,14 +16,14 @@ import { makeImageCompatibleUrl } from '../../../utils/utils';
 import { GiphyBadge } from '../../ui/Badge/GiphyBadge';
 
 export type GiphyImagePropsWithContext = Pick<MessagesContextValue, 'giphyVersion'> & {
-    ImageComponent?: React.ComponentType<any>;
-  } & {
-    attachment: Attachment;
-    /**
-     * Whether to render the preview image or the full image
-     */
-    preview?: boolean;
-  };
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & {
+  attachment: Attachment;
+  /**
+   * Whether to render the preview image or the full image
+   */
+  preview?: boolean;
+};
 
 const GiphyImageWithContext = (props: GiphyImagePropsWithContext) => {
   const { attachment, giphyVersion, ImageComponent = Image, preview = false } = props;

package/src/components/Attachment/UrlPreview/URLPreview.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import {
   Image,
+  ImageProps,
   ImageStyle,
   Pressable,
   StyleProp,
@@ -32,8 +33,9 @@ import { VideoPlayIndicator } from '../../ui';
 import { ImageBackground } from '../../UIComponents/ImageBackground';
 import { openUrlSafely } from '../utils/openUrlSafely';
 
-export type URLPreviewPropsWithContext = { ImageComponent?: React.ComponentType<any> } &
-  Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
+export type URLPreviewPropsWithContext = {
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
   Pick<
     MessagesContextValue,
     'additionalPressableProps' | 'myMessageTheme' | 'isAttachmentEqual'

package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import {
   Image,
+  ImageProps,
   ImageStyle,
   Pressable,
   StyleProp,
@@ -32,8 +33,9 @@ import { VideoPlayIndicator } from '../../ui';
 import { ImageBackground } from '../../UIComponents/ImageBackground';
 import { openUrlSafely } from '../utils/openUrlSafely';
 
-export type URLPreviewCompactPropsWithContext = { ImageComponent?: React.ComponentType<any> } &
-  Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
+export type URLPreviewCompactPropsWithContext = {
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
   Pick<MessagesContextValue, 'additionalPressableProps' | 'myMessageTheme'> & {
     attachment: Attachment;
     channelId: string | undefined;

package/src/components/ImageGallery/ImageGallery.tsx

@@ -13,14 +13,19 @@ import Animated, {
 
 import { AnimatedGalleryImage } from './components/AnimatedGalleryImage';
 import { AnimatedGalleryVideo } from './components/AnimatedGalleryVideo';
+import type {
+  ImageGalleryFooterProps,
+  ImageGalleryGridProps,
+  ImageGalleryHeaderProps,
+} from './components/types';
 
 import { useImageGalleryGestures } from './hooks/useImageGalleryGestures';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   ImageGalleryProviderProps,
   useImageGalleryContext,
 } from '../../contexts/imageGalleryContext/ImageGalleryContext';
-import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   OverlayContextValue,
   useOverlayContext,
@@ -67,9 +72,9 @@ type ImageGalleryWithContextProps = Pick<
   'numberOfImageGalleryGridColumns'
 > &
   Pick<OverlayContextValue, 'overlayOpacity'> & {
-    ImageGalleryHeader?: React.ComponentType<any>;
-    ImageGalleryFooter?: React.ComponentType<any>;
-    ImageGalleryGrid?: React.ComponentType<any>;
+    ImageGalleryHeader?: React.ComponentType<ImageGalleryHeaderProps>;
+    ImageGalleryFooter?: React.ComponentType<ImageGalleryFooterProps>;
+    ImageGalleryGrid?: React.ComponentType<ImageGalleryGridProps>;
   };
 
 export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) => {
@@ -370,11 +375,7 @@ export type ImageGalleryProps = Partial<ImageGalleryWithContextProps>;
 
 export const ImageGallery = (props: ImageGalleryProps) => {
   const { numberOfImageGalleryGridColumns } = useImageGalleryContext();
-  const {
-    ImageGalleryHeader,
-    ImageGalleryFooter,
-    ImageGalleryGrid,
-  } = useComponentsContext();
+  const { ImageGalleryHeader, ImageGalleryFooter, ImageGalleryGrid } = useComponentsContext();
   const { overlayOpacity } = useOverlayContext();
   return (
     <ImageGalleryWithContext

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -60,6 +60,7 @@ const ImageGalleryComponentVideo = (props: ImageGalleryProps) => {
 
   return (
     <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       <WithComponents overrides={{ ImageGalleryHeader: undefined as any }}>
         <ImageGalleryContext.Provider
           value={
@@ -101,6 +102,7 @@ const ImageGalleryComponentImage = (
 
   return (
     <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       <WithComponents overrides={{ ImageGalleryHeader: undefined as any }}>
         <ImageGalleryContext.Provider
           value={

package/src/components/Reply/Reply.tsx

@@ -1,5 +1,14 @@
 import React, { useMemo } from 'react';
-import { I18nManager, Image, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
+import {
+  I18nManager,
+  Image,
+  ImageProps,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import {
   isFileAttachment,
@@ -79,8 +88,10 @@ const RightContent = React.memo(
   },
 );
 
-export type ReplyPropsWithContext = { ImageComponent?: React.ComponentType<any> } &
-  Pick<MessageContextValue, 'message'> &
+export type ReplyPropsWithContext = { ImageComponent: React.ComponentType<ImageProps> } & Pick<
+  MessageContextValue,
+  'message'
+> &
   Pick<MessagesContextValue, 'quotedMessage'> & {
     isMyMessage: boolean;
     onDismiss?: () => void;

package/src/contexts/componentsContext/defaultComponents.ts

@@ -40,8 +40,8 @@ import { ChannelPreviewUnreadCount } from '../../components/ChannelPreview/Chann
 import { ChannelPreviewView } from '../../components/ChannelPreview/ChannelPreviewView';
 import { ImageGalleryFooter } from '../../components/ImageGallery/components/ImageGalleryFooter';
 import { ImageGalleryHeader } from '../../components/ImageGallery/components/ImageGalleryHeader';
-import { ImageGalleryGrid } from '../../components/ImageGallery/components/ImageGrid';
 import { ImageGalleryVideoControl } from '../../components/ImageGallery/components/ImageGalleryVideoControl';
+import { ImageGalleryGrid } from '../../components/ImageGallery/components/ImageGrid';
 import { EmptyStateIndicator } from '../../components/Indicators/EmptyStateIndicator';
 import { LoadingErrorIndicator } from '../../components/Indicators/LoadingErrorIndicator';
 import { LoadingIndicator } from '../../components/Indicators/LoadingIndicator';
@@ -299,6 +299,7 @@ export const DEFAULT_COMPONENTS = {
   MessageOverlayBackground: DefaultMessageOverlayBackground,
 
   // Image
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ImageComponent: Image as React.ComponentType<any>,
 
   // Optional overrides (no defaults — undefined unless user provides via WithComponents)