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