From f84dd8fdc28631d6fbc9ce97174f40eb8f260bcc Mon Sep 17 00:00:00 2001
From: Bart Akeley <bart.akeley@gmail.com>
Date: Sat, 29 Sep 2018 11:22:03 -0500
Subject: [PATCH] avoid stretching images, instead zoom to center of image

---
 js/pages/FoodItemDetail.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/js/pages/FoodItemDetail.js b/js/pages/FoodItemDetail.js
index d6a0d3e..7e1b1fe 100644
--- a/js/pages/FoodItemDetail.js
+++ b/js/pages/FoodItemDetail.js
@@ -50,14 +50,21 @@ const FoodItemImages = ({
 	return (
 		<View style={{ flex: 3 }}>
 			{visibleImages.size === 1 && (
-				<Image style={stretchedStyle} source={{ uri: visibleImages.first().get('url', '') }} />
+				<View style={stretchedStyle}>
+					<Image
+						style={{ flex: 1, resizeMode: 'cover' }}
+						resizeMethod="resize"
+						source={{ uri: visibleImages.first().get('url', '') }}
+					/>
+				</View>
 			)}
 			{visibleImages.size > 1 && (
 				<Carousel autoplay={false} onAnimateNextPage={changeCurrentImage} style={stretchedStyle}>
 					{visibleImages.map(image => (
 						<Image
 							key={image.get('url', '')}
-							style={{ flex: 1, resizeMode: 'stretch' }}
+							style={{ flex: 1, resizeMode: 'cover' }}
+							resizeMethod="resize"
 							source={{ uri: image.get('url', '') }}
 						/>
 					))}