Always enable swipe to close
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user