forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge pull request #2695 from bluesky-social/hailey/fix-android-swipe
fix left swipe on android
+35
-11
+5
-2
src/view/com/util/images/Gallery.tsx
+5
-2
src/view/com/util/images/Gallery.tsx
···
4
4
import {Image} from 'expo-image'
5
5
import {msg} from '@lingui/macro'
6
6
import {useLingui} from '@lingui/react'
7
+
import {isWeb} from 'platform/detection'
7
8
8
9
type EventFunction = (index: number) => void
9
10
···
70
71
paddingHorizontal: 6,
71
72
paddingVertical: 3,
72
73
position: 'absolute',
73
-
left: 8,
74
-
bottom: 8,
74
+
// Related to margin/gap hack. This keeps the alt label in the same position
75
+
// on all platforms
76
+
left: isWeb ? 8 : 5,
77
+
bottom: isWeb ? 8 : 5,
75
78
},
76
79
alt: {
77
80
color: 'white',
+30
-9
src/view/com/util/images/ImageLayoutGrid.tsx
+30
-9
src/view/com/util/images/ImageLayoutGrid.tsx
···
2
2
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
3
3
import {AppBskyEmbedImages} from '@atproto/api'
4
4
import {GalleryItem} from './Gallery'
5
+
import {isWeb} from 'platform/detection'
5
6
6
7
interface ImageLayoutGridProps {
7
8
images: AppBskyEmbedImages.ViewImage[]
···
47
48
case 3:
48
49
return (
49
50
<View style={styles.flexRow}>
50
-
<View style={{flex: 2, aspectRatio: 1}}>
51
+
<View style={styles.threeSingle}>
51
52
<GalleryItem {...props} index={0} imageStyle={styles.image} />
52
53
</View>
53
-
<View style={{flex: 1}}>
54
+
<View style={styles.threeDouble}>
54
55
<View style={styles.smallItem}>
55
56
<GalleryItem {...props} index={1} imageStyle={styles.image} />
56
57
</View>
···
88
89
}
89
90
}
90
91
91
-
// This is used to compute margins (rather than flexbox gap) due to Yoga bugs:
92
+
// On web we use margin to calculate gap, as aspectRatio does not properly size
93
+
// all images on web. On native though we cannot rely on margin, since the
94
+
// negative margin interferes with the swipe controls on pagers.
92
95
// https://github.com/facebook/yoga/issues/1418
96
+
// https://github.com/bluesky-social/social-app/issues/2601
93
97
const IMAGE_GAP = 5
94
98
95
99
const styles = StyleSheet.create({
96
-
container: {
97
-
marginHorizontal: -IMAGE_GAP / 2,
98
-
marginVertical: -IMAGE_GAP / 2,
100
+
container: isWeb
101
+
? {
102
+
marginHorizontal: -IMAGE_GAP / 2,
103
+
marginVertical: -IMAGE_GAP / 2,
104
+
}
105
+
: {
106
+
gap: IMAGE_GAP,
107
+
},
108
+
flexRow: {
109
+
flexDirection: 'row',
110
+
gap: isWeb ? undefined : IMAGE_GAP,
99
111
},
100
-
flexRow: {flexDirection: 'row'},
101
112
smallItem: {flex: 1, aspectRatio: 1},
102
-
image: {
103
-
margin: IMAGE_GAP / 2,
113
+
image: isWeb
114
+
? {
115
+
margin: IMAGE_GAP / 2,
116
+
}
117
+
: {},
118
+
threeSingle: {
119
+
flex: 2,
120
+
aspectRatio: isWeb ? 1 : undefined,
121
+
},
122
+
threeDouble: {
123
+
flex: 1,
124
+
gap: isWeb ? undefined : IMAGE_GAP,
104
125
},
105
126
})