diff --git a/package/src/components/Attachment/Gallery.tsx b/package/src/components/Attachment/Gallery.tsx index ff41031538..41c4731020 100644 --- a/package/src/components/Attachment/Gallery.tsx +++ b/package/src/components/Attachment/Gallery.tsx @@ -43,6 +43,7 @@ import { getUrlWithoutParams } from '../../utils/utils'; export type GalleryPropsWithContext = Pick & Pick< MessageContextValue, + | 'alignment' | 'images' | 'videos' | 'onLongPress' @@ -69,6 +70,7 @@ export type GalleryPropsWithContext = Pick { const { additionalPressableProps, + alignment, imageGalleryStateStore, ImageLoadingFailedIndicator, ImageLoadingIndicator, @@ -141,6 +143,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => { styles.container, { flexDirection: invertedDirections ? 'column' : 'row', + alignSelf: alignment === 'right' ? 'flex-end' : 'flex-start', }, images.length !== 1 ? { width: gridWidth, height: gridHeight } @@ -439,18 +442,25 @@ const GalleryImageThumbnail = ({ const areEqual = (prevProps: GalleryPropsWithContext, nextProps: GalleryPropsWithContext) => { const { + alignment: prevAlignment, images: prevImages, message: prevMessage, myMessageTheme: prevMyMessageTheme, videos: prevVideos, } = prevProps; const { + alignment: nextAlignment, images: nextImages, message: nextMessage, myMessageTheme: nextMyMessageTheme, videos: nextVideos, } = nextProps; + const alignmentEqual = prevAlignment === nextAlignment; + if (!alignmentEqual) { + return false; + } + const messageEqual = prevMessage?.id === nextMessage?.id && `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}`; @@ -498,6 +508,7 @@ export type GalleryProps = Partial; */ export const Gallery = (props: GalleryProps) => { const { + alignment: propAlignment, additionalPressableProps: propAdditionalPressableProps, ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator, ImageLoadingIndicator: PropImageLoadingIndicator, @@ -517,6 +528,7 @@ export const Gallery = (props: GalleryProps) => { const { imageGalleryStateStore } = useImageGalleryContext(); const { + alignment: contextAlignment, images: contextImages, message: contextMessage, onLongPress: contextOnLongPress, @@ -539,7 +551,7 @@ export const Gallery = (props: GalleryProps) => { const images = propImages || contextImages; const videos = propVideos || contextVideos; const message = propMessage || contextMessage; - + const alignment = propAlignment || contextAlignment; if (!images.length && !videos.length) { return null; } @@ -568,6 +580,7 @@ export const Gallery = (props: GalleryProps) => { { }, container: { flexDirection: 'row', - justifyContent: 'center', gap: primitives.spacingXxs, }, imageContainer: {}, diff --git a/package/src/components/Attachment/GalleryImage.tsx b/package/src/components/Attachment/GalleryImage.tsx index f8e252c98f..fa174b0831 100644 --- a/package/src/components/Attachment/GalleryImage.tsx +++ b/package/src/components/Attachment/GalleryImage.tsx @@ -9,7 +9,7 @@ export type GalleryImageWithContextProps = GalleryImageProps & Pick; export const GalleryImageWithContext = (props: GalleryImageWithContextProps) => { - const { ImageComponent = Image, uri, ...rest } = props; + const { ImageComponent = Image, uri, style, ...rest } = props; // Caching image components such as FastImage will not work with local images. // This for the case of local uris, we use the default Image component. @@ -18,7 +18,7 @@ export const GalleryImageWithContext = (props: GalleryImageWithContextProps) => { return (