stream-chat-react-native-core 9.0.0-beta.9 → 9.0.0

package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { act, render } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
+import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
+import * as ChannelActionItemsModule from '../../ChannelList/hooks/useChannelActionItems';
+import * as ChannelActionsModule from '../../ChannelList/hooks/useChannelActions';
+import { ChannelSwipableWrapper } from '../ChannelSwipableWrapper';
+import * as UseIsChannelMutedModule from '../hooks/useIsChannelMuted';
+
+const rightActionsProbe = {
+  items: [] as Array<{ action: () => void; id: string }>,
+};
+
+const mockSwipableWrapper = jest.fn(
+  ({
+    children,
+    swipableProps,
+  }: React.PropsWithChildren<{
+    swipableProps?: { renderRightActions?: (...args: never[]) => void };
+  }>) => {
+    const rightActions = swipableProps?.renderRightActions?.({} as never, {} as never);
+    return (
+      <>
+        {children}
+        {rightActions}
+      </>
+    );
+  },
+);
+
+jest.mock('../../../contexts/themeContext/ThemeContext', () => ({
+  useTheme: () => ({
+    theme: {
+      semantics: {
+        accentPrimary: '#00f',
+        backgroundCoreSurfaceDefault: '#fff',
+        textOnAccent: '#000',
+        textPrimary: '#111',
+      },
+    },
+  }),
+}));
+
+jest.mock('../../../contexts/swipeableContext/SwipeRegistryContext', () => ({
+  useSwipeRegistryContext: () => ({
+    closeAll: jest.fn(),
+  }),
+}));
+
+jest.mock('../../UIComponents/BottomSheetModal', () => ({
+  BottomSheetModal: ({ children }: React.PropsWithChildren) => <>{children}</>,
+}));
+
+jest.mock('../../UIComponents/SwipableWrapper', () => ({
+  RightActions: ({ items }: { items: Array<{ action: () => void; id: string }> }) => {
+    rightActionsProbe.items = items;
+    return null;
+  },
+  SwipableWrapper: (...args: unknown[]) => mockSwipableWrapper(...args),
+}));
+
+describe('ChannelSwipableWrapper', () => {
+  const channel = { cid: 'messaging:test-channel', id: 'test-channel' } as Channel;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    rightActionsProbe.items = [];
+  });
+
+  it('uses channel mute for direct-channel swipe actions and keeps mute user in the sheet', () => {
+    const muteChannel = jest.fn();
+    const unmuteChannel = jest.fn();
+    const customBottomSheet = jest.fn(() => null);
+    const items: ChannelActionItem[] = [
+      {
+        Icon: () => null,
+        action: jest.fn(),
+        id: 'mute',
+        label: 'Mute User',
+        placement: 'sheet',
+        type: 'standard',
+      },
+      {
+        Icon: () => null,
+        action: jest.fn(),
+        id: 'archive',
+        label: 'Archive Chat',
+        placement: 'sheet',
+        type: 'standard',
+      },
+    ];
+
+    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
+      archive: jest.fn(),
+      blockUser: jest.fn(),
+      deleteChannel: jest.fn(),
+      leave: jest.fn(),
+      muteChannel,
+      muteUser: jest.fn(),
+      pin: jest.fn(),
+      unarchive: jest.fn(),
+      unblockUser: jest.fn(),
+      unmuteChannel,
+      unmuteUser: jest.fn(),
+      unpin: jest.fn(),
+    });
+    jest.spyOn(ChannelActionItemsModule, 'useChannelActionItems').mockReturnValue(items);
+    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
+      createdAt: null,
+      expiresAt: null,
+      muted: false,
+    });
+
+    render(
+      <WithComponents overrides={{ ChannelDetailsBottomSheet: customBottomSheet }}>
+        <ChannelSwipableWrapper channel={channel}>
+          <Text>child</Text>
+        </ChannelSwipableWrapper>
+      </WithComponents>,
+    );
+
+    expect(customBottomSheet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channel,
+        items,
+      }),
+      undefined,
+    );
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+
+    act(() => {
+      rightActionsProbe.items[1].action();
+    });
+
+    expect(muteChannel).toHaveBeenCalledTimes(1);
+    expect(unmuteChannel).not.toHaveBeenCalled();
+  });
+
+  it('removes mute group from the sheet while keeping mute as the quick swipe action', () => {
+    const muteChannel = jest.fn();
+    const customBottomSheet = jest.fn(() => null);
+    const muteItem = {
+      Icon: () => null,
+      action: jest.fn(),
+      id: 'mute',
+      label: 'Mute Group',
+      placement: 'swipe',
+      type: 'standard',
+    } as const satisfies ChannelActionItem;
+    const archiveItem = {
+      Icon: () => null,
+      action: jest.fn(),
+      id: 'archive',
+      label: 'Archive Group',
+      placement: 'both',
+      type: 'standard',
+    } as const satisfies ChannelActionItem;
+
+    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
+      archive: jest.fn(),
+      blockUser: jest.fn(),
+      deleteChannel: jest.fn(),
+      leave: jest.fn(),
+      muteChannel,
+      muteUser: jest.fn(),
+      pin: jest.fn(),
+      unarchive: jest.fn(),
+      unblockUser: jest.fn(),
+      unmuteChannel: jest.fn(),
+      unmuteUser: jest.fn(),
+      unpin: jest.fn(),
+    });
+    jest
+      .spyOn(ChannelActionItemsModule, 'useChannelActionItems')
+      .mockReturnValue([muteItem, archiveItem]);
+    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
+      createdAt: null,
+      expiresAt: null,
+      muted: false,
+    });
+
+    render(
+      <WithComponents overrides={{ ChannelDetailsBottomSheet: customBottomSheet }}>
+        <ChannelSwipableWrapper channel={channel}>
+          <Text>child</Text>
+        </ChannelSwipableWrapper>
+      </WithComponents>,
+    );
+
+    expect(customBottomSheet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channel,
+        items: [archiveItem],
+      }),
+      undefined,
+    );
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+
+    act(() => {
+      rightActionsProbe.items[1].action();
+    });
+
+    expect(muteChannel).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -23,7 +23,7 @@ export const useChannelPreviewData = (
 ) => {
   const [forceUpdate, setForceUpdate] = useState(0);
   const [lastMessage, setLastMessageInner] = useState<LastMessageType>(
-    () => channel.state.messages[channel.state.messages.length - 1],
+    () => channel.state.latestMessages[channel.state.latestMessages.length - 1],
   );
   const throttledSetLastMessage = useMemo(
     () =>
@@ -42,7 +42,7 @@ export const useChannelPreviewData = (
   const { forceUpdate: contextForceUpdate } = useChannelsContext();
   const channelListForceUpdate = forceUpdateOverride ?? contextForceUpdate;
 
-  const channelLastMessage = channel.lastMessage();
+  const channelLastMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
   const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;
 
   const refreshUnreadCount = useMemo(

package/src/components/Chat/Chat.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
-import { Image, Platform } from 'react-native';
+import { Platform } from 'react-native';
 
 import { Channel, OfflineDBState } from 'stream-chat';
 
@@ -10,6 +10,7 @@ import { useIsOnline } from './hooks/useIsOnline';
 
 import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useDebugContext } from '../../contexts/debugContext/DebugContext';
 import { DeepPartial, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { Theme } from '../../contexts/themeContext/utils/theme';
@@ -30,7 +31,7 @@ import { version } from '../../version.json';
 init();
 
 export type ChatProps = Pick<ChatContextValue, 'client'> &
-  Partial<Pick<ChatContextValue, 'ImageComponent' | 'isMessageAIGenerated'>> & {
+  Partial<Pick<ChatContextValue, 'isMessageAIGenerated'>> & {
     /**
      * When false, ws connection won't be disconnection upon backgrounding the app.
      * To receive push notifications, its necessary that user doesn't have active
@@ -94,12 +95,6 @@ export type ChatProps = Pick<ChatContextValue, 'client'> &
      * ```
      */
     i18nInstance?: Streami18n;
-    /**
-     * Custom loading indicator component to be used to represent the loading state of the chat.
-     *
-     * This can be used during the phase when db is not initialised.
-     */
-    LoadingIndicator?: React.ComponentType | null;
     /**
      * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/themeContext/utils/theme.ts)
      *
@@ -144,11 +139,10 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
     closeConnectionOnBackground = true,
     enableOfflineSupport = false,
     i18nInstance,
-    ImageComponent = Image,
     isMessageAIGenerated,
-    LoadingIndicator = null,
     style,
   } = props;
+  const { ChatLoadingIndicator } = useComponentsContext();
 
   const [channel, setChannel] = useState<Channel>();
 
@@ -257,7 +251,6 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
     client,
     connectionRecovering,
     enableOfflineSupport,
-    ImageComponent,
     isMessageAIGenerated,
     isOnline,
     mutedUsers,
@@ -266,7 +259,7 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
 
   if (userID && enableOfflineSupport && !initialisedDatabase) {
     // if user id has been set and offline support is enabled, we need to wait for database to be initialised
-    return LoadingIndicator ? <LoadingIndicator /> : null;
+    return ChatLoadingIndicator ? <ChatLoadingIndicator /> : null;
   }
 
   return (

package/src/components/Chat/hooks/useCreateChatContext.ts

@@ -8,7 +8,6 @@ export const useCreateChatContext = ({
   client,
   connectionRecovering,
   enableOfflineSupport,
-  ImageComponent,
   isMessageAIGenerated,
   isOnline,
   mutedUsers,
@@ -29,7 +28,6 @@ export const useCreateChatContext = ({
       client,
       connectionRecovering,
       enableOfflineSupport,
-      ImageComponent,
       isMessageAIGenerated,
       isOnline,
       mutedUsers,

package/src/components/ImageGallery/ImageGallery.tsx

@@ -13,9 +13,15 @@ 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,
@@ -63,13 +69,13 @@ const imageGallerySelector = (state: ImageGalleryState) => ({
 
 type ImageGalleryWithContextProps = Pick<
   ImageGalleryProviderProps,
-  | 'numberOfImageGalleryGridColumns'
-  | 'ImageGalleryHeader'
-  | 'ImageGalleryFooter'
-  | 'ImageGalleryVideoControls'
-  | 'ImageGalleryGrid'
+  'numberOfImageGalleryGridColumns'
 > &
-  Pick<OverlayContextValue, 'overlayOpacity'>;
+  Pick<OverlayContextValue, 'overlayOpacity'> & {
+    ImageGalleryHeader?: React.ComponentType<ImageGalleryHeaderProps>;
+    ImageGalleryFooter?: React.ComponentType<ImageGalleryFooterProps>;
+    ImageGalleryGrid?: React.ComponentType<ImageGalleryGridProps>;
+  };
 
 export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) => {
   const {
@@ -77,7 +83,6 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     overlayOpacity,
     ImageGalleryHeader,
     ImageGalleryFooter,
-    ImageGalleryVideoControls,
     ImageGalleryGrid,
   } = props;
   const [isGridViewVisible, setIsGridViewVisible] = useState(false);
@@ -279,12 +284,15 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     <Animated.View
       accessibilityLabel='Image Gallery'
       pointerEvents={'auto'}
-      style={[StyleSheet.absoluteFillObject, showScreenStyle]}
+      style={[StyleSheet.absoluteFill, showScreenStyle]}
     >
-      <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
+      <Animated.View style={[StyleSheet.absoluteFill, containerBackground]} />
       <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
-        <Animated.View style={StyleSheet.absoluteFillObject}>
-          <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
+        <Animated.View style={StyleSheet.absoluteFill}>
+          <Animated.View
+            testID='image-gallery-pager'
+            style={[styles.animatedContainer, pagerStyle, pager]}
+          >
             {assets.map((photo, i) =>
               photo.type === FileTypes.Video ? (
                 <AnimatedGalleryVideo
@@ -342,7 +350,6 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
           opacity={headerFooterOpacity}
           openGridView={openGridView}
           visible={headerFooterVisible}
-          ImageGalleryVideoControls={ImageGalleryVideoControls}
         />
       ) : null}
 
@@ -367,13 +374,8 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
 export type ImageGalleryProps = Partial<ImageGalleryWithContextProps>;
 
 export const ImageGallery = (props: ImageGalleryProps) => {
-  const {
-    numberOfImageGalleryGridColumns,
-    ImageGalleryHeader,
-    ImageGalleryFooter,
-    ImageGalleryVideoControls,
-    ImageGalleryGrid,
-  } = useImageGalleryContext();
+  const { numberOfImageGalleryGridColumns } = useImageGalleryContext();
+  const { ImageGalleryHeader, ImageGalleryFooter, ImageGalleryGrid } = useComponentsContext();
   const { overlayOpacity } = useOverlayContext();
   return (
     <ImageGalleryWithContext
@@ -381,7 +383,6 @@ export const ImageGallery = (props: ImageGalleryProps) => {
       overlayOpacity={overlayOpacity}
       ImageGalleryHeader={ImageGalleryHeader}
       ImageGalleryFooter={ImageGalleryFooter}
-      ImageGalleryVideoControls={ImageGalleryVideoControls}
       ImageGalleryGrid={ImageGalleryGrid}
       {...props}
     />
@@ -399,6 +400,7 @@ export const clamp = (value: number, lowerBound: number, upperBound: number) =>
 const styles = StyleSheet.create({
   animatedContainer: {
     alignItems: 'center',
+    direction: 'ltr',
     flexDirection: 'row',
   },
 });

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { I18nManager, StyleSheet } from 'react-native';
 
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -8,10 +9,6 @@ import duration from 'dayjs/plugin/duration';
 
 import { LocalMessage } from 'stream-chat';
 
-import { ImageGalleryFooter as ImageGalleryFooterDefault } from '../../../components/ImageGallery/components/ImageGalleryFooter';
-import { ImageGalleryHeader as ImageGalleryHeaderDefault } from '../../../components/ImageGallery/components/ImageGalleryHeader';
-import { ImageGalleryVideoControl as ImageGalleryVideoControlDefault } from '../../../components/ImageGallery/components/ImageGalleryVideoControl';
-import { ImageGalleryGrid as ImageGalleryGridDefault } from '../../../components/ImageGallery/components/ImageGrid';
 import {
   ImageGalleryContext,
   ImageGalleryContextValue,
@@ -65,10 +62,6 @@ const ImageGalleryComponent = (props: ImageGalleryProps & { message: LocalMessag
         value={
           {
             imageGalleryStateStore,
-            ImageGalleryHeader: ImageGalleryHeaderDefault,
-            ImageGalleryFooter: ImageGalleryFooterDefault,
-            ImageGalleryVideoControls: ImageGalleryVideoControlDefault,
-            ImageGalleryGrid: ImageGalleryGridDefault,
           } as unknown as ImageGalleryContextValue
         }
       >
@@ -79,6 +72,19 @@ const ImageGalleryComponent = (props: ImageGalleryProps & { message: LocalMessag
 };
 
 describe('ImageGallery', () => {
+  const originalIsRTL = I18nManager.isRTL;
+
+  const setRTL = (value: boolean) => {
+    Object.defineProperty(I18nManager, 'isRTL', {
+      configurable: true,
+      value,
+    });
+  };
+
+  afterEach(() => {
+    setRTL(originalIsRTL);
+  });
+
   it('render image gallery component', async () => {
     render(
       <ImageGalleryComponent
@@ -99,4 +105,23 @@ describe('ImageGallery', () => {
       expect(screen.queryAllByLabelText('Image Gallery Video')).toHaveLength(1);
     });
   });
+
+  it('keeps the pager in ltr coordinates when rtl is enabled', async () => {
+    setRTL(true);
+
+    render(
+      <ImageGalleryComponent
+        message={
+          generateMessage({
+            attachments: [generateImageAttachment()],
+          }) as unknown as LocalMessage
+        }
+      />,
+    );
+
+    await waitFor(() => {
+      const pagerStyle = StyleSheet.flatten(screen.getByTestId('image-gallery-pager').props.style);
+      expect(pagerStyle.direction).toBe('ltr');
+    });
+  });
 });

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

@@ -6,7 +6,7 @@ import { render, screen, userEvent, waitFor } from '@testing-library/react-nativ
 
 import { Attachment, LocalMessage } from 'stream-chat';
 
-import { ImageGalleryFooter as ImageGalleryFooterDefault } from '../../../components/ImageGallery/components/ImageGalleryFooter';
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   ImageGalleryContext,
   ImageGalleryContextValue,
@@ -60,16 +60,18 @@ const ImageGalleryComponentVideo = (props: ImageGalleryProps) => {
 
   return (
     <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
-      <ImageGalleryContext.Provider
-        value={
-          {
-            imageGalleryStateStore,
-            ImageGalleryFooter: ImageGalleryFooterDefault,
-          } as unknown as ImageGalleryContextValue
-        }
-      >
-        <ImageGallery {...props} />
-      </ImageGalleryContext.Provider>
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+      <WithComponents overrides={{ ImageGalleryHeader: undefined as any }}>
+        <ImageGalleryContext.Provider
+          value={
+            {
+              imageGalleryStateStore,
+            } as unknown as ImageGalleryContextValue
+          }
+        >
+          <ImageGallery {...props} />
+        </ImageGalleryContext.Provider>
+      </WithComponents>
     </OverlayProvider>
   );
 };
@@ -100,16 +102,18 @@ const ImageGalleryComponentImage = (
 
   return (
     <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
-      <ImageGalleryContext.Provider
-        value={
-          {
-            imageGalleryStateStore,
-            ImageGalleryFooter: ImageGalleryFooterDefault,
-          } as unknown as ImageGalleryContextValue
-        }
-      >
-        <ImageGallery {...props} />
-      </ImageGalleryContext.Provider>
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+      <WithComponents overrides={{ ImageGalleryHeader: undefined as any }}>
+        <ImageGalleryContext.Provider
+          value={
+            {
+              imageGalleryStateStore,
+            } as unknown as ImageGalleryContextValue
+          }
+        >
+          <ImageGallery {...props} />
+        </ImageGalleryContext.Provider>
+      </WithComponents>
     </OverlayProvider>
   );
 };

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

@@ -4,12 +4,13 @@ import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-na
 
 import type { ImageGalleryFooterProps, ImageGalleryVideoControlProps } from './types';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { Share as ShareIconDefault } from '../../../icons';
-import { ImageGrid } from '../../../icons/ImageGrid';
+import { ImageGrid } from '../../../icons/gallery';
 import { isFileSystemAvailable, isShareImageAvailable, NativeHandlers } from '../../../native';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
@@ -42,7 +43,8 @@ const imageGallerySelector = (state: ImageGalleryState) => ({
 });
 
 export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterProps) => {
-  const { accessibilityLabel, opacity, openGridView, visible, ImageGalleryVideoControls } = props;
+  const { accessibilityLabel, opacity, openGridView, visible } = props;
+  const { ImageGalleryVideoControls } = useComponentsContext();
 
   const [height, setHeight] = useState(200);
   const [savingInProgress, setSavingInProgress] = useState(false);

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -11,7 +11,7 @@ import { useOverlayContext } from '../../../contexts/overlayContext/OverlayConte
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { ChevronLeft } from '../../../icons/ChevronLeft';
+import { ChevronLeft } from '../../../icons/chevron-left';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
 import { primitives } from '../../../theme';

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -6,8 +6,8 @@ import type { ImageGalleryVideoControlProps } from './types';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Pause } from '../../../icons/Pause';
-import { Play } from '../../../icons/Play';
+import { Pause } from '../../../icons/pause-fill';
+import { Play } from '../../../icons/play-fill';
 import { IconProps } from '../../../icons/utils/base';
 import { VideoPlayerState } from '../../../state-store/video-player';
 import { primitives } from '../../../theme';

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -12,6 +12,7 @@ import type {
   ImageGalleryAsset,
   ImageGalleryState,
 } from '../../../state-store/image-gallery-state-store';
+import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 
@@ -108,8 +109,9 @@ const useStyles = () => {
     return StyleSheet.create({
       contentContainer: {
         flexGrow: 1,
-        ...contentContainer,
         backgroundColor: semantics.backgroundCoreApp,
+        marginTop: primitives.spacingSm,
+        ...contentContainer,
       },
       image: { margin: 1, ...gridImage },
     });

package/src/components/ImageGallery/components/types.ts

@@ -1,5 +1,3 @@
-import type React from 'react';
-
 import type { SharedValue } from 'react-native-reanimated';
 
 export type ImageGalleryVideoControlProps = {
@@ -13,7 +11,6 @@ export type ImageGalleryHeaderProps = {
 
 export type ImageGalleryFooterProps = {
   accessibilityLabel: string;
-  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
   opacity: SharedValue<number>;
   openGridView: () => void;
   visible: SharedValue<number>;

package/src/components/Indicators/LoadingIndicator.tsx

@@ -6,7 +6,7 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 import { primitives } from '../../theme';
 import { Spinner } from '../UIComponents/Spinner';
 
-type LoadingIndicatorWrapperProps = { text: string };
+type LoadingIndicatorWrapperProps = { text: string | undefined };
 
 const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
   const styles = useStyles();
@@ -14,9 +14,11 @@ const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
   return (
     <View style={styles.container}>
       <Spinner height={20} width={20} />
-      <Text style={styles.loadingText} testID='loading'>
-        {text}
-      </Text>
+      {text ? (
+        <Text style={styles.loadingText} testID='loading'>
+          {text}
+        </Text>
+      ) : null}
     </View>
   );
 };
@@ -44,7 +46,7 @@ export const LoadingIndicator = (props: LoadingProps) => {
     case 'message':
       return <LoadingIndicatorWrapper text={t('Loading messages...')} />;
     case 'threads':
-      return <LoadingIndicatorWrapper text={t('Loading threads...')} />;
+      return <LoadingIndicatorWrapper text={undefined} />;
     default:
       return <LoadingIndicatorWrapper text={t('Loading...')} />;
   }