diff --git a/src/components/images/Gallery/index.web.tsx b/src/components/images/Gallery/index-old-2.web.tsx similarity index 100% rename from src/components/images/Gallery/index.web.tsx rename to src/components/images/Gallery/index-old-2.web.tsx diff --git a/src/components/images/Gallery/index.tsx b/src/components/images/Gallery/index.tsx index ed26edc161..96ca6e9643 100644 --- a/src/components/images/Gallery/index.tsx +++ b/src/components/images/Gallery/index.tsx @@ -109,23 +109,21 @@ export function Gallery({ */ const {bleedRef, bleedWidth} = useGalleryBleed() const contentRef = useRef(null) - const [insets, setInsets] = useState<{left: number; right: number}>() + const [contentDims, setContentDims] = useState<{x: number; width: number}>() const measure = () => { - if (contentRef.current && bleedRef.current && bleedWidth > 0) { + if (contentRef.current && bleedRef.current) { contentRef.current.measureLayout( bleedRef.current, (x, _y, w) => { - setInsets({ - left: x, - right: Math.max(0, bleedWidth - x - w), - }) + setContentDims({x, width: w}) }, () => {}, ) } } - const insetLeft = insets?.left ?? 0 - const insetRight = insets?.right ?? 0 + const insetLeft = contentDims?.x ?? 0 + const insetRight = + bleedWidth - (contentDims?.x || 0) - (contentDims?.width || 0) || 0 const width = bleedWidth || Math.min(600, window.width) /* End container overflow styles */ @@ -151,15 +149,17 @@ export function Gallery({ alwaysBounceVertical={false} scrollEventThrottle={16} data={images} - keyExtractor={(item) => item.thumb} + keyExtractor={item => item.thumb} renderItem={({item}) => { return }} - style={[{ - height: contentHeight, - marginLeft: -insetLeft, - width, - }]} + style={[ + { + height: contentHeight, + marginLeft: -insetLeft, + width, + }, + ]} contentContainerStyle={{ gap: ITEM_GAP, paddingLeft: insetLeft, @@ -211,7 +211,8 @@ function GalleryImage({ const dims = computeDims({height, aspectRatio}) return ( - +