Handle division by zero in the hook

src/lib/media/image-sizes.ts

@@ -61,11 +61,11 @@ export function useImageDimensions({
 }: {
   src: string
   knownDimensions: Dimensions | null
-}) {
-  const [dims, setDims] = useState(() => knownDimensions ?? get(src) ?? null)
+}): [number | undefined, Dimensions | undefined] {
+  const [dims, setDims] = useState(() => knownDimensions ?? get(src))
   const [prevSrc, setPrevSrc] = useState(src)
   if (src !== prevSrc) {
-    setDims(knownDimensions ?? get(src) ?? null)
+    setDims(knownDimensions ?? get(src))
     setPrevSrc(src)
   }
 
@@ -81,5 +81,13 @@ export function useImageDimensions({
     }
   }, [dims, setDims, src])
 
-  return dims
+  let aspectRatio: number | undefined
+  if (dims) {
+    aspectRatio = dims.width / dims.height
+    if (Number.isNaN(aspectRatio)) {
+      aspectRatio = undefined
+    }
+  }
+
+  return [aspectRatio, dims]
 }

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx

@@ -52,7 +52,7 @@ const ImageItem = ({
   isScrollViewBeingDragged,
 }: Props) => {
   const [isScaled, setIsScaled] = useState(false)
-  const imageDimensions = useImageDimensions({
+  const [_aspectRatio, imageDimensions] = useImageDimensions({
     src: imageSrc.uri,
     knownDimensions: imageSrc.dimensions,
   })

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx

@@ -47,7 +47,7 @@ const ImageItem = ({
   const scrollViewRef = useAnimatedRef<Animated.ScrollView>()
   const translationY = useSharedValue(0)
   const [scaled, setScaled] = useState(false)
-  const imageDimensions = useImageDimensions({
+  const [_aspectRatio, imageDimensions] = useImageDimensions({
     src: imageSrc.uri,
     knownDimensions: imageSrc.dimensions,
   })
@@ -182,7 +182,7 @@ const styles = StyleSheet.create({
 })
 
 const getZoomRectAfterDoubleTap = (
-  imageDimensions: ImageDimensions | null,
+  imageDimensions: ImageDimensions | undefined,
   touchX: number,
   touchY: number,
 ): {

src/view/com/util/images/AutoSizedImage.tsx

@@ -21,12 +21,11 @@ function useImageAspectRatio({
   src: string
   knownDimensions: Dimensions | null
 }) {
-  const dims = useImageDimensions({src, knownDimensions})
+  const [raw] = useImageDimensions({src, knownDimensions})
   let constrained: number | undefined
   let max: number | undefined
   let isCropped: boolean | undefined
-  if (dims !== undefined) {
-    const raw = calc(dims)
+  if (raw !== undefined) {
     const ratio = 1 / 2 // max of 1:2 ratio in feeds
     constrained = Math.max(raw, ratio)
     max = Math.max(raw, 0.25) // max of 1:4 in thread
@@ -227,10 +226,3 @@ export function AutoSizedImage({
     )
   }
 }
-
-function calc(dim: Dimensions) {
-  if (dim.width === 0 || dim.height === 0) {
-    return 1
-  }
-  return dim.width / dim.height
-}