Small fixes

src/components/images/Gallery/const.ts

@@ -0,0 +1,3 @@
+export const CONTAINER_ASPECT_RATIO = 3 / 2
+export const ITEM_GAP = 8 // tokens.space.sm
+export const MIN_PEEK = 40

src/components/images/Gallery/index.tsx

@@ -29,10 +29,7 @@ import {useAnalytics} from '#/analytics'
 import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
 import {useKeyboardHandlers} from '#/components/images/Gallery/useKeyboardHandlers'
 import {usePointerHandlers} from '#/components/images/Gallery/usePointerHandlers'
-
-const CONTAINER_ASPECT_RATIO = 3 / 2
-const ITEM_GAP = 8 // tokens.space.sm
-const MIN_PEEK = 40
+import {CONTAINER_ASPECT_RATIO, ITEM_GAP, MIN_PEEK} from '#/components/images/Gallery/const'
 
 interface GalleryProps {
   images: AppBskyEmbedImages.ViewImage[]
@@ -69,6 +66,7 @@ export function GalleryBleed({children}: {children: React.ReactNode}) {
         ref: mergeRefs([ref, node?.props?.ref]),
         onLayout: (e: {nativeEvent: {layout: {width: number}}}) => {
           setBleedWidth(e.nativeEvent.layout.width)
+          node.props.onLayout?.(e)
         },
       })}
     </Context.Provider>
@@ -125,7 +123,7 @@ export function Gallery({
   }
   const insetLeft = contentDims?.x ?? 0
   const insetRight =
-    bleedWidth - (contentDims?.x || 0) - (contentDims?.width || 0) || 0
+    bleedWidth - (contentDims?.x ?? 0) - (contentDims?.width ?? 0) || 0
   const width = bleedWidth || Math.min(600, window.width)
   /* End container overflow styles */
 

src/components/images/Gallery/usePointerHandlers.web.ts

@@ -1,9 +1,8 @@
 import {useEffect} from 'react'
 import {type FlatList} from 'react-native'
 
+import {ITEM_GAP} from '#/components/images/Gallery/const'
 import {tween} from '#/components/images/Gallery/tween'
-
-const ITEM_GAP = 8
 const DRAG_THRESHOLD = 3
 const FLICK_DECAY = 0.85
 const FLICK_MIN_VELOCITY = 0.1