use gap on native

zio/stable
Hailey 2024-01-30 16:37:26 -08:00
parent 640ce5e47b
commit df740c85e0
2 changed files with 20 additions and 12 deletions

View File

@ -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,8 @@ const styles = StyleSheet.create({
paddingHorizontal: 6,
paddingVertical: 3,
position: 'absolute',
left: 8,
bottom: 8,
left: isWeb ? 8 : 5,
bottom: isWeb ? 8 : 5,
},
alt: {
color: 'white',

View File

@ -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={{flex: 2, aspectRatio: isWeb ? 1 : undefined}}>
<GalleryItem {...props} index={0} imageStyle={styles.image} />
</View>
<View style={{flex: 1}}>
<View style={{flex: 1, gap: !isWeb ? 5 : undefined}}>
<View style={styles.smallItem}>
<GalleryItem {...props} index={1} imageStyle={styles.image} />
</View>
@ -93,13 +94,19 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
const IMAGE_GAP = 5
const styles = StyleSheet.create({
container: {
container: isWeb
? {
marginHorizontal: -IMAGE_GAP / 2,
marginVertical: -IMAGE_GAP / 2,
}
: {
gap: IMAGE_GAP,
},
flexRow: {flexDirection: 'row'},
flexRow: {flexDirection: 'row', gap: !isWeb ? IMAGE_GAP : undefined},
smallItem: {flex: 1, aspectRatio: 1},
image: {
image: isWeb
? {
margin: IMAGE_GAP / 2,
},
}
: {},
})