Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

fix left swipe on android

authored by

Hailey and committed by
GitHub
a175922c ca9b2a55

+35 -11
+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
··· 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 })