Merge pull request #2695 from bluesky-social/hailey/fix-android-swipe

fix left swipe on android

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

@@ -4,6 +4,7 @@ import {StyleSheet, Text, Pressable, View} from 'react-native'
 import {Image} from 'expo-image'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {isWeb} from 'platform/detection'
 
 type EventFunction = (index: number) => void
 
@@ -70,8 +71,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 6,
     paddingVertical: 3,
     position: 'absolute',
-    left: 8,
-    bottom: 8,
+    // Related to margin/gap hack. This keeps the alt label in the same position
+    // on all platforms
+    left: isWeb ? 8 : 5,
+    bottom: isWeb ? 8 : 5,
   },
   alt: {
     color: 'white',

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

@@ -2,6 +2,7 @@ import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {AppBskyEmbedImages} from '@atproto/api'
 import {GalleryItem} from './Gallery'
+import {isWeb} from 'platform/detection'
 
 interface ImageLayoutGridProps {
   images: AppBskyEmbedImages.ViewImage[]
@@ -47,10 +48,10 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
     case 3:
       return (
         <View style={styles.flexRow}>
-          <View style={{flex: 2, aspectRatio: 1}}>
+          <View style={styles.threeSingle}>
             <GalleryItem {...props} index={0} imageStyle={styles.image} />
           </View>
-          <View style={{flex: 1}}>
+          <View style={styles.threeDouble}>
             <View style={styles.smallItem}>
               <GalleryItem {...props} index={1} imageStyle={styles.image} />
             </View>
@@ -88,18 +89,38 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
   }
 }
 
-// This is used to compute margins (rather than flexbox gap) due to Yoga bugs:
+// On web we use margin to calculate gap, as aspectRatio does not properly size
+// all images on web. On native though we cannot rely on margin, since the
+// negative margin interferes with the swipe controls on pagers.
 // https://github.com/facebook/yoga/issues/1418
+// https://github.com/bluesky-social/social-app/issues/2601
 const IMAGE_GAP = 5
 
 const styles = StyleSheet.create({
-  container: {
-    marginHorizontal: -IMAGE_GAP / 2,
-    marginVertical: -IMAGE_GAP / 2,
+  container: isWeb
+    ? {
+        marginHorizontal: -IMAGE_GAP / 2,
+        marginVertical: -IMAGE_GAP / 2,
+      }
+    : {
+        gap: IMAGE_GAP,
+      },
+  flexRow: {
+    flexDirection: 'row',
+    gap: isWeb ? undefined : IMAGE_GAP,
   },
-  flexRow: {flexDirection: 'row'},
   smallItem: {flex: 1, aspectRatio: 1},
-  image: {
-    margin: IMAGE_GAP / 2,
+  image: isWeb
+    ? {
+        margin: IMAGE_GAP / 2,
+      }
+    : {},
+  threeSingle: {
+    flex: 2,
+    aspectRatio: isWeb ? 1 : undefined,
+  },
+  threeDouble: {
+    flex: 1,
+    gap: isWeb ? undefined : IMAGE_GAP,
   },
 })