diff --git a/src/ImageViewing.tsx b/src/ImageViewing.tsx index d4cffe7c..3782ee0e 100644 --- a/src/ImageViewing.tsx +++ b/src/ImageViewing.tsx @@ -6,7 +6,7 @@ * */ -import React, { ComponentType, useCallback, useEffect } from "react"; +import React, { ComponentType, useCallback, useRef, useEffect } from "react"; import { Animated, Dimensions, @@ -67,14 +67,11 @@ function ImageViewing({ HeaderComponent, FooterComponent, }: Props) { - const imageList = React.createRef>(); + const imageList = useRef>(null); const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose); const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex, SCREEN); - const [ - headerTransform, - footerTransform, - toggleBarsVisible, - ] = useAnimatedComponents(); + const [headerTransform, footerTransform, toggleBarsVisible] = + useAnimatedComponents(); useEffect(() => { if (onImageIndexChange) { @@ -88,7 +85,7 @@ function ImageViewing({ imageList?.current?.setNativeProps({ scrollEnabled: !isScaled }); toggleBarsVisible(!isScaled); }, - [imageList], + [imageList] ); if (!visible) { @@ -108,15 +105,13 @@ function ImageViewing({ - {typeof HeaderComponent !== "undefined" - ? ( - React.createElement(HeaderComponent, { - imageIndex: currentImageIndex, - }) - ) - : ( - - )} + {typeof HeaderComponent !== "undefined" ? ( + React.createElement(HeaderComponent, { + imageIndex: currentImageIndex, + }) + ) : ( + + )} keyExtractor ? keyExtractor(imageSrc, index) : imageSrc.uri || `${imageSrc}`} + keyExtractor={(imageSrc, index) => + keyExtractor + ? keyExtractor(imageSrc, index) + : typeof imageSrc === "number" + ? `${imageSrc}` + : imageSrc.uri + } /> {typeof FooterComponent !== "undefined" && ( { - const imageContainer = React.createRef(); + const imageContainer = useRef(null); const imageDimensions = useImageDimensions(imageSrc); const [translate, scale] = getImageTransform(imageDimensions, SCREEN); const scrollValueY = new Animated.Value(0); const [isLoaded, setLoadEnd] = useState(false); const onLoaded = useCallback(() => setLoadEnd(true), []); - const onZoomPerformed = (isZoomed: boolean) => { - onZoom(isZoomed); - if (imageContainer?.current) { - // @ts-ignore - imageContainer.current.setNativeProps({ - scrollEnabled: !isZoomed, - }); - } - }; + const onZoomPerformed = useCallback( + (isZoomed: boolean) => { + onZoom(isZoomed); + if (imageContainer?.current) { + imageContainer.current.setNativeProps({ + scrollEnabled: !isZoomed, + }); + } + }, + [imageContainer] + ); const onLongPressHandler = useCallback(() => { onLongPress(imageSrc); @@ -113,7 +117,7 @@ const ImageItem = ({ }; return ( - {(!isLoaded || !imageDimensions) && } - + ); }; diff --git a/src/components/ImageItem/ImageItem.ios.tsx b/src/components/ImageItem/ImageItem.ios.tsx index 4a96d911..de85a146 100644 --- a/src/components/ImageItem/ImageItem.ios.tsx +++ b/src/components/ImageItem/ImageItem.ios.tsx @@ -119,7 +119,6 @@ const ImageItem = ({ ref={scrollViewRef} style={styles.listItem} pinchGestureEnabled - nestedScrollEnabled={true} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} maximumZoomScale={maxScale}