This sucks, everything sucks

This commit is contained in:
Dan Abramov
2024-11-02 22:39:26 +00:00
parent 68578f3860
commit b2203ac964
4 changed files with 18 additions and 12 deletions
@@ -49,7 +49,7 @@ type Props = {
onRequestClose: () => void onRequestClose: () => void
onTap: () => void onTap: () => void
onZoom: (isZoomed: boolean) => void onZoom: (isZoomed: boolean) => void
isScrollViewBeingDragged: boolean isPagingAndroid: boolean
showControls: boolean showControls: boolean
dismissSwipePan: PanGesture dismissSwipePan: PanGesture
animatedStyle: StyleProp<ImageStyle> animatedStyle: StyleProp<ImageStyle>
@@ -58,7 +58,7 @@ const ImageItem = ({
imageSrc, imageSrc,
onTap, onTap,
onZoom, onZoom,
isScrollViewBeingDragged, isPagingAndroid,
dismissSwipePan, dismissSwipePan,
animatedStyle, animatedStyle,
}: Props) => { }: Props) => {
@@ -289,7 +289,7 @@ const ImageItem = ({
committedTransform.value = withClampedSpring(finalTransform) committedTransform.value = withClampedSpring(finalTransform)
}) })
const composedGesture = isScrollViewBeingDragged const composedGesture = isPagingAndroid
? // If the parent is not at rest, provide a no-op gesture. ? // If the parent is not at rest, provide a no-op gesture.
Gesture.Manual() Gesture.Manual()
: Gesture.Exclusive( : Gesture.Exclusive(
@@ -34,7 +34,7 @@ type Props = {
onRequestClose: () => void onRequestClose: () => void
onTap: () => void onTap: () => void
onZoom: (scaled: boolean) => void onZoom: (scaled: boolean) => void
isScrollViewBeingDragged: boolean isPagingAndroid: boolean // Unused
showControls: boolean showControls: boolean
dismissSwipePan: PanGesture | null dismissSwipePan: PanGesture | null
animatedStyle: StyleProp<ImageStyle> animatedStyle: StyleProp<ImageStyle>
@@ -12,7 +12,7 @@ type Props = {
onRequestClose: () => void onRequestClose: () => void
onTap: () => void onTap: () => void
onZoom: (scaled: boolean) => void onZoom: (scaled: boolean) => void
isScrollViewBeingDragged: boolean isPagingAndroid: boolean
showControls: boolean showControls: boolean
dismissSwipePan: PanGesture | null dismissSwipePan: PanGesture | null
animatedStyle: StyleProp<ImageStyle> animatedStyle: StyleProp<ImageStyle>
+13 -7
View File
@@ -38,7 +38,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Trans} from '@lingui/macro' import {Trans} from '@lingui/macro'
import {colors, s} from '#/lib/styles' import {colors, s} from '#/lib/styles'
import {isIOS} from '#/platform/detection' import {isAndroid, isIOS} from '#/platform/detection'
import {Lightbox} from '#/state/lightbox' import {Lightbox} from '#/state/lightbox'
import {Button} from '#/view/com/util/forms/Button' import {Button} from '#/view/com/util/forms/Button'
import {Text} from '#/view/com/util/text/Text' import {Text} from '#/view/com/util/text/Text'
@@ -69,7 +69,7 @@ function ImageViewing({
}) { }) {
const {images, index: initialImageIndex} = lightbox const {images, index: initialImageIndex} = lightbox
const [isScaled, setIsScaled] = useState(false) const [isScaled, setIsScaled] = useState(false)
const [isDragging, setIsDragging] = useState(false) const [isPagingAndroid, setIsPagingAndroid] = useState(false)
const [imageIndex, setImageIndex] = useState(initialImageIndex) const [imageIndex, setImageIndex] = useState(initialImageIndex)
const [showControls, setShowControls] = useState(true) const [showControls, setShowControls] = useState(true)
const dismissSwipeTranslateY = useSharedValue(0) const dismissSwipeTranslateY = useSharedValue(0)
@@ -170,7 +170,13 @@ function ImageViewing({
setIsScaled(false) setIsScaled(false)
}} }}
onPageScrollStateChanged={e => { onPageScrollStateChanged={e => {
setIsDragging(e.nativeEvent.pageScrollState !== 'idle') if (isAndroid) {
// Note this would be downright broken on iOS where this method
// can't actually reliably report idle state if you do an extra
// vertical drag while paginating (you had one job, pager view).
// But it's OK because we only need this state on Android anyway.
setIsPagingAndroid(e.nativeEvent.pageScrollState !== 'idle')
}
}} }}
overdrag={true} overdrag={true}
style={styles.pager}> style={styles.pager}>
@@ -182,7 +188,7 @@ function ImageViewing({
onTap={onTap} onTap={onTap}
onZoom={onZoom} onZoom={onZoom}
isActive={i === imageIndex} isActive={i === imageIndex}
isScrollViewBeingDragged={isDragging} isPagingAndroid={isPagingAndroid}
isFlyingAway={isFlyingAway} isFlyingAway={isFlyingAway}
isScaled={isScaled} isScaled={isScaled}
showControls={showControls} showControls={showControls}
@@ -210,7 +216,7 @@ function LightboxPage({
onTap, onTap,
onZoom, onZoom,
isActive, isActive,
isScrollViewBeingDragged, isPagingAndroid,
isFlyingAway, isFlyingAway,
isScaled, isScaled,
showControls, showControls,
@@ -222,7 +228,7 @@ function LightboxPage({
onTap: () => void onTap: () => void
onZoom: (scaled: boolean) => void onZoom: (scaled: boolean) => void
isActive: boolean isActive: boolean
isScrollViewBeingDragged: boolean isPagingAndroid: boolean
isFlyingAway: SharedValue<boolean> isFlyingAway: SharedValue<boolean>
isScaled: boolean isScaled: boolean
showControls: boolean showControls: boolean
@@ -289,7 +295,7 @@ function LightboxPage({
return ( return (
<ImageItem <ImageItem
imageSrc={image} imageSrc={image}
isScrollViewBeingDragged={isScrollViewBeingDragged} isPagingAndroid={isPagingAndroid}
onTap={onTap} onTap={onTap}
onZoom={onZoom} onZoom={onZoom}
onRequestClose={onRequestClose} onRequestClose={onRequestClose}