diff --git a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts b/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts index 7f0851af..cb46fd0d 100644 --- a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts +++ b/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts @@ -39,29 +39,10 @@ const useImageDimensions = (image: ImageSource): Dimensions | null => { // eslint-disable-next-line @typescript-eslint/no-shadow const getImageDimensions = (image: ImageSource): Promise => { return new Promise(resolve => { - if (typeof image === 'number') { - const cacheKey = `${image}` - let imageDimensions = imageDimensionsCache.get(cacheKey) - - if (!imageDimensions) { - const {width, height} = Image.resolveAssetSource(image) - imageDimensions = {width, height} - imageDimensionsCache.set(cacheKey, imageDimensions) - } - - resolve(imageDimensions) - - return - } - - // @ts-ignore if (image.uri) { const source = image as ImageURISource - const cacheKey = source.uri as string - const imageDimensions = imageDimensionsCache.get(cacheKey) - if (imageDimensions) { resolve(imageDimensions) } else { diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index b6b321c4..248f1ceb 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -38,8 +38,7 @@ import {Edge, SafeAreaView} from 'react-native-safe-area-context' type Props = { images: ImageSource[] - keyExtractor?: (imageSrc: ImageSource, index: number) => string - imageIndex: number + initialImageIndex: number visible: boolean onRequestClose: () => void presentationStyle?: ModalProps['presentationStyle'] @@ -60,8 +59,7 @@ const ANIMATION_CONFIG = { function ImageViewing({ images, - keyExtractor, - imageIndex, + initialImageIndex, visible, onRequestClose, backgroundColor = DEFAULT_BG_COLOR, @@ -71,7 +69,7 @@ function ImageViewing({ const imageList = useRef>(null) const [isScaled, setIsScaled] = useState(false) const [isDragging, setIsDragging] = useState(false) - const [currentImageIndex, setImageIndex] = useState(imageIndex) + const [imageIndex, setImageIndex] = useState(initialImageIndex) const [headerTranslate] = useState( () => new Animated.ValueXY(INITIAL_POSITION), ) @@ -125,10 +123,13 @@ function ImageViewing({ }, []) const onLayout = useCallback(() => { - if (imageIndex) { - imageList.current?.scrollToIndex({index: imageIndex, animated: false}) + if (initialImageIndex) { + imageList.current?.scrollToIndex({ + index: initialImageIndex, + animated: false, + }) } - }, [imageList, imageIndex]) + }, [imageList, initialImageIndex]) // This is a hack. // RNGH doesn't have an easy way to express that pinch of individual items @@ -159,7 +160,7 @@ function ImageViewing({ {typeof HeaderComponent !== 'undefined' ? ( React.createElement(HeaderComponent, { - imageIndex: currentImageIndex, + imageIndex, }) ) : ( @@ -205,19 +206,12 @@ function ImageViewing({ setIsScaled(false) onScroll(e) }} - //@ts-ignore - keyExtractor={(imageSrc, index) => - keyExtractor - ? keyExtractor(imageSrc, index) - : typeof imageSrc === 'number' - ? `${imageSrc}` - : imageSrc.uri - } + keyExtractor={imageSrc => imageSrc.uri} /> {typeof FooterComponent !== 'undefined' && ( {React.createElement(FooterComponent, { - imageIndex: currentImageIndex, + imageIndex, })} )} @@ -250,7 +244,7 @@ const styles = StyleSheet.create({ }) const EnhancedImageViewing = (props: Props) => ( - + ) export default EnhancedImageViewing diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx index ad66dce3..92c30f49 100644 --- a/src/view/com/lightbox/Lightbox.tsx +++ b/src/view/com/lightbox/Lightbox.tsx @@ -26,7 +26,7 @@ export const Lightbox = observer(function Lightbox() { return ( ({...img}))} - imageIndex={opts.index} + initialImageIndex={opts.index} visible onRequestClose={onClose} FooterComponent={LightboxFooter}