From 2b35cabbcbb0a7dd4ebc2e24152f3ccae10f55fb Mon Sep 17 00:00:00 2001
From: Amanda Bullington <35536439+albullington@users.noreply.github.com>
Date: Tue, 30 May 2023 14:51:35 -0700
Subject: [PATCH] Add border to Pressable, not image; closes #622; closes #603
 (#648)

---
 package-lock.json                           |  4 +--
 src/components/MediaViewer/PhotoSelector.js | 28 +++++++++++----------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f5df6f599..1bf6859ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "inaturalistreactnative",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "inaturalistreactnative",
-      "version": "0.4.0",
+      "version": "0.5.0",
       "hasInstallScript": true,
       "dependencies": {
         "@babel/eslint-parser": "^7.21.3",
diff --git a/src/components/MediaViewer/PhotoSelector.js b/src/components/MediaViewer/PhotoSelector.js
index d92430825..d678a0673 100644
--- a/src/components/MediaViewer/PhotoSelector.js
+++ b/src/components/MediaViewer/PhotoSelector.js
@@ -30,23 +30,25 @@ const PhotoSelector = ( {
     <Pressable
       accessibilityRole="button"
       onPress={( ) => scrollToIndex( index )}
+      className={classnames(
+        "overflow-hidden",
+        {
+          "border border-white border-[3px]": selectedPhotoIndex === index
+        },
+        {
+          "mt-[18px]": isLargeScreen && isLandscapeMode,
+          "mt-[47px]": isLargeScreen && !isLandscapeMode
+        },
+        {
+          [`${smallPhotoClass}`]: !isLargeScreen,
+          [`${largePhotoClass}`]: isLargeScreen
+        }
+      )}
     >
       <Image
         source={{ uri: item }}
         accessibilityIgnoresInvertColors
-        className={classnames(
-          {
-            "border border-white border-[3px]": selectedPhotoIndex === index
-          },
-          {
-            "mt-[18px]": isLargeScreen && isLandscapeMode,
-            "mt-[47px]": isLargeScreen && !isLandscapeMode
-          },
-          {
-            [`${smallPhotoClass}`]: !isLargeScreen,
-            [`${largePhotoClass}`]: isLargeScreen
-          }
-        )}
+        className="w-full h-full"
       />
     </Pressable>
   );