From 2d1e38be720541a38790bfb02c54f906ebb1fb7e Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Fri, 3 Feb 2023 10:55:08 -0600
Subject: [PATCH] Calculate image aspect ratio on load (#146)

* Calculate image aspect ratio on load

* Move aspect ratio bounds to constants
---
 src/view/com/util/images/Image.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/view/com/util/images/Image.tsx b/src/view/com/util/images/Image.tsx
index dc8df6dd01..29c1d32bc6 100644
--- a/src/view/com/util/images/Image.tsx
+++ b/src/view/com/util/images/Image.tsx
@@ -1,8 +1,12 @@
 import React from 'react'
 import {StyleProp, StyleSheet, TouchableOpacity, ViewStyle} from 'react-native'
-import FastImage from 'react-native-fast-image'
+import FastImage, {OnLoadEvent} from 'react-native-fast-image'
 import {DELAY_PRESS_IN} from './constants'
 import {LOADING} from '../../../lib/assets'
+import {clamp} from '../../../../lib/numbers'
+
+const MIN_ASPECT_RATIO = 0.33 // 1/3
+const MAX_ASPECT_RATIO = 5 // 5/1
 
 export function Image({
   uri,
@@ -17,6 +21,16 @@ export function Image({
   onPressIn?: () => void
   style?: StyleProp<ViewStyle>
 }) {
+  const [aspectRatio, setAspectRatio] = React.useState<number>(1)
+  const onLoad = (e: OnLoadEvent) => {
+    setAspectRatio(
+      clamp(
+        e.nativeEvent.width / e.nativeEvent.height,
+        MIN_ASPECT_RATIO,
+        MAX_ASPECT_RATIO,
+      ),
+    )
+  }
   return (
     <TouchableOpacity
       onPress={onPress}
@@ -24,7 +38,12 @@ export function Image({
       onPressIn={onPressIn}
       delayPressIn={DELAY_PRESS_IN}
       style={[styles.container, style]}>
-      <FastImage style={styles.image} source={{uri}} defaultSource={LOADING} />
+      <FastImage
+        style={[styles.image, {aspectRatio}]}
+        source={{uri}}
+        defaultSource={LOADING}
+        onLoad={onLoad}
+      />
     </TouchableOpacity>
   )
 }
@@ -35,6 +54,5 @@ const styles = StyleSheet.create({
   },
   image: {
     width: '100%',
-    aspectRatio: 1,
   },
 })