Skip to content

feat: image gallery redesign#3450

Open
khushal87 wants to merge 2 commits intodevelopfrom
feat/image-gallery-redesign
Open

feat: image gallery redesign#3450
khushal87 wants to merge 2 commits intodevelopfrom
feat/image-gallery-redesign

Conversation

@khushal87
Copy link
Member

This pull request refactors the ImageGallery component and related files to simplify customization, improve modularity, and update video/audio playback controls. The most significant changes include removing the legacy imageGalleryCustomComponents prop in favor of explicit component overrides via context, updating the video and audio components to support playback rate, and cleaning up test files to match the new component API.

ImageGallery Component Refactor and API Simplification

  • Removed the imageGalleryCustomComponents prop and replaced it with explicit context-based overrides for ImageGalleryHeader, ImageGalleryFooter, ImageGalleryVideoControls, and ImageGalleryGrid, making customization more modular and clear. [1] [2]
  • Refactored the bottom sheet implementation to use a simple modal and local state instead of @gorhom/bottom-sheet, improving maintainability and reducing dependencies. [1] [2] [3]

Video and Audio Component Updates

  • Added a rate (playback speed) prop to both Expo and native video components, allowing control over video playback speed. [1] [2] [3] [4]
  • Updated the PlayPauseButton to use standard Play and Pause icons instead of NewPlay and NewPause, ensuring consistency in the UI. [1] [2]

Test File Updates

  • Updated test files to use the new context-based component overrides and removed usage of the legacy custom components API. [1] [2] [3] [4] [5] [6]
  • Simplified tests for the ImageGalleryFooter to use default elements and removed tests for custom footer components, aligning tests with the new API.

Code Cleanup

  • Removed unused imports and legacy code related to the old customization API, streamlining the codebase. [1] [2] [3]

These changes make the image gallery and related components easier to customize, maintain, and test.

@khushal87 khushal87 requested a review from isekovanic March 4, 2026 09:26
@Stream-SDK-Bot
Copy link
Contributor

Stream-SDK-Bot commented Mar 4, 2026

SDK Size

title develop branch diff status
js_bundle_size 375 KB 377 KB +2255 B 🔴

@@ -0,0 +1,16 @@
import React from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have this icon. It's called MenuPointHorizontal

Copy link
Member Author

@khushal87 khushal87 Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed. I added it as per new designs but seems we don't have to include the action menu and the top right icon in this version so I forgot removing it


import { IconProps } from './utils/base';

export const ImageGrid = ({ height, width, ...rest }: IconProps) => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this supposed to be ? Don't get it

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is used to show the Grid icon in the image gallery footer.


import { IconProps } from './utils/base';

export const MessageBubble = ({ height, width, ...props }: IconProps) => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This too, it doesn't seem to be used anywhere

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed. I added it as per new designs but seems we don't have to include the action menu and the top right icon in this version so I forgot removing it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants