Always enable swipe to close

This commit is contained in:
Dan Abramov
2023-10-05 20:39:16 +01:00
parent bc354bfedc
commit 193629cbda
4 changed files with 10 additions and 34 deletions
@@ -36,17 +36,11 @@ type Props = {
imageSrc: ImageSource imageSrc: ImageSource
onRequestClose: () => void onRequestClose: () => void
onZoom: (isZoomed: boolean) => void onZoom: (isZoomed: boolean) => void
swipeToCloseEnabled?: boolean
} }
const AnimatedImage = Animated.createAnimatedComponent(Image) const AnimatedImage = Animated.createAnimatedComponent(Image)
const ImageItem = ({ const ImageItem = ({imageSrc, onZoom, onRequestClose}: Props) => {
imageSrc,
onZoom,
onRequestClose,
swipeToCloseEnabled = true,
}: Props) => {
const imageContainer = useRef<ScrollView & NativeMethodsMixin>(null) const imageContainer = useRef<ScrollView & NativeMethodsMixin>(null)
const imageDimensions = useImageDimensions(imageSrc) const imageDimensions = useImageDimensions(imageSrc)
const [translate, scale] = getImageTransform(imageDimensions, SCREEN) const [translate, scale] = getImageTransform(imageDimensions, SCREEN)
@@ -113,11 +107,9 @@ const ImageItem = ({
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={styles.imageScrollContainer} contentContainerStyle={styles.imageScrollContainer}
scrollEnabled={swipeToCloseEnabled} scrollEnabled={true}
{...(swipeToCloseEnabled && { onScroll={onScroll}
onScroll, onScrollEndDrag={onScrollEndDrag}>
onScrollEndDrag,
})}>
<AnimatedImage <AnimatedImage
{...panHandlers} {...panHandlers}
source={imageSrc} source={imageSrc}
@@ -38,17 +38,11 @@ type Props = {
imageSrc: ImageSource imageSrc: ImageSource
onRequestClose: () => void onRequestClose: () => void
onZoom: (scaled: boolean) => void onZoom: (scaled: boolean) => void
swipeToCloseEnabled?: boolean
} }
const AnimatedImage = Animated.createAnimatedComponent(Image) const AnimatedImage = Animated.createAnimatedComponent(Image)
const ImageItem = ({ const ImageItem = ({imageSrc, onZoom, onRequestClose}: Props) => {
imageSrc,
onZoom,
onRequestClose,
swipeToCloseEnabled = true,
}: Props) => {
const scrollViewRef = useRef<ScrollView>(null) const scrollViewRef = useRef<ScrollView>(null)
const [loaded, setLoaded] = useState(false) const [loaded, setLoaded] = useState(false)
const [scaled, setScaled] = useState(false) const [scaled, setScaled] = useState(false)
@@ -85,15 +79,11 @@ const ImageItem = ({
onZoom(currentScaled) onZoom(currentScaled)
setScaled(currentScaled) setScaled(currentScaled)
if ( if (!currentScaled && Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY) {
!currentScaled &&
swipeToCloseEnabled &&
Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY
) {
onRequestClose() onRequestClose()
} }
}, },
[onRequestClose, onZoom, swipeToCloseEnabled], [onRequestClose, onZoom],
) )
const onScroll = ({nativeEvent}: NativeSyntheticEvent<NativeScrollEvent>) => { const onScroll = ({nativeEvent}: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -116,12 +106,10 @@ const ImageItem = ({
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
maximumZoomScale={maxScrollViewZoom} maximumZoomScale={maxScrollViewZoom}
contentContainerStyle={styles.imageScrollContainer} contentContainerStyle={styles.imageScrollContainer}
scrollEnabled={swipeToCloseEnabled} scrollEnabled={true}
onScroll={onScroll}
onScrollEndDrag={onScrollEndDrag} onScrollEndDrag={onScrollEndDrag}
scrollEventThrottle={1} scrollEventThrottle={1}>
{...(swipeToCloseEnabled && {
onScroll,
})}>
{(!loaded || !imageDimensions) && <ImageLoading />} {(!loaded || !imageDimensions) && <ImageLoading />}
<TouchableWithoutFeedback <TouchableWithoutFeedback
onPress={handleDoubleTap} onPress={handleDoubleTap}
@@ -8,7 +8,6 @@ type Props = {
imageSrc: ImageSource imageSrc: ImageSource
onRequestClose: () => void onRequestClose: () => void
onZoom: (scaled: boolean) => void onZoom: (scaled: boolean) => void
swipeToCloseEnabled?: boolean
} }
const ImageItem = (_props: Props) => { const ImageItem = (_props: Props) => {
@@ -45,7 +45,6 @@ type Props = {
presentationStyle?: ModalProps['presentationStyle'] presentationStyle?: ModalProps['presentationStyle']
animationType?: ModalProps['animationType'] animationType?: ModalProps['animationType']
backgroundColor?: string backgroundColor?: string
swipeToCloseEnabled?: boolean
HeaderComponent?: ComponentType<{imageIndex: number}> HeaderComponent?: ComponentType<{imageIndex: number}>
FooterComponent?: ComponentType<{imageIndex: number}> FooterComponent?: ComponentType<{imageIndex: number}>
} }
@@ -62,7 +61,6 @@ function ImageViewing({
onRequestClose, onRequestClose,
onImageIndexChange, onImageIndexChange,
backgroundColor = DEFAULT_BG_COLOR, backgroundColor = DEFAULT_BG_COLOR,
swipeToCloseEnabled,
HeaderComponent, HeaderComponent,
FooterComponent, FooterComponent,
}: Props) { }: Props) {
@@ -141,7 +139,6 @@ function ImageViewing({
onZoom={onZoom} onZoom={onZoom}
imageSrc={imageSrc} imageSrc={imageSrc}
onRequestClose={onRequestCloseEnhanced} onRequestClose={onRequestCloseEnhanced}
swipeToCloseEnabled={swipeToCloseEnabled}
/> />
)} )}
onMomentumScrollEnd={onScroll} onMomentumScrollEnd={onScroll}