diff options
4 files changed, 57 insertions, 42 deletions
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx index 927657baf..6276a1a14 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -22,7 +22,7 @@ import {Image} from 'expo-image' import useImageDimensions from '../../hooks/useImageDimensions' import usePanResponder from '../../hooks/usePanResponder' -import {getImageStyles, getImageTransform} from '../../utils' +import {getImageTransform} from '../../utils' import {ImageSource} from '../../@types' import {ImageLoading} from './ImageLoading' @@ -133,4 +133,27 @@ const styles = StyleSheet.create({ }, }) +const getImageStyles = ( + image: {width: number; height: number} | null, + translate: Animated.ValueXY, + scale?: Animated.Value, +) => { + if (!image?.width || !image?.height) { + return {width: 0, height: 0} + } + + const transform = translate.getTranslateTransform() + + if (scale) { + // @ts-ignore TODO - is scale incorrect? might need to remove -prf + transform.push({scale}, {perspective: new Animated.Value(1000)}) + } + + return { + width: image.width, + height: image.height, + transform, + } +} + export default React.memo(ImageItem) diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx index f379df22f..b9f3ae510 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -23,7 +23,7 @@ import {Image} from 'expo-image' import useImageDimensions from '../../hooks/useImageDimensions' -import {getImageStyles, getImageTransform} from '../../utils' +import {getImageTransform} from '../../utils' import {ImageSource} from '../../@types' import {ImageLoading} from './ImageLoading' @@ -52,23 +52,14 @@ const ImageItem = ({imageSrc, onZoom, onRequestClose}: Props) => { const [scaled, setScaled] = useState(false) const imageDimensions = useImageDimensions(imageSrc) const [translate, scale] = getImageTransform(imageDimensions, SCREEN) - - // TODO: It's not valid to reinitialize Animated values during render. - // This is a bug. - const scrollValueY = new Animated.Value(0) - const scaleValue = new Animated.Value(scale || 1) - const translateValue = new Animated.ValueXY(translate) + const [scrollValueY] = useState(() => new Animated.Value(0)) const maxScrollViewZoom = MAX_SCALE / (scale || 1) const imageOpacity = scrollValueY.interpolate({ inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET], outputRange: [0.5, 1, 0.5], }) - const imagesStyles = getImageStyles( - imageDimensions, - translateValue, - scaleValue, - ) + const imagesStyles = getImageStyles(imageDimensions, translate, scale || 1) const imageStylesWithOpacity = {...imagesStyles, opacity: imageOpacity} const onScrollEndDrag = useCallback( @@ -260,4 +251,28 @@ const getZoomRectAfterDoubleTap = ( } } +const getImageStyles = ( + image: {width: number; height: number} | null, + translate: {readonly x: number; readonly y: number} | undefined, + scale?: number, +) => { + if (!image?.width || !image?.height) { + return {width: 0, height: 0} + } + const transform = [] + if (translate) { + transform.push({translateX: translate.x}) + transform.push({translateY: translate.y}) + } + if (scale) { + // @ts-ignore TODO - is scale incorrect? might need to remove -prf + transform.push({scale}, {perspective: new Animated.Value(1000)}) + } + return { + width: image.width, + height: image.height, + transform, + } +} + export default React.memo(ImageItem) diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index 3b659e2db..4b7208a22 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -69,11 +69,12 @@ function ImageViewing({ const imageList = useRef<VirtualizedList<ImageSource>>(null) const [opacity, setOpacity] = useState(1) const [currentImageIndex, setImageIndex] = useState(imageIndex) - - // TODO: It's not valid to reinitialize Animated values during render. - // This is a bug. - const headerTranslate = new Animated.ValueXY(INITIAL_POSITION) - const footerTranslate = new Animated.ValueXY(INITIAL_POSITION) + const [headerTranslate] = useState( + () => new Animated.ValueXY(INITIAL_POSITION), + ) + const [footerTranslate] = useState( + () => new Animated.ValueXY(INITIAL_POSITION), + ) const toggleBarsVisible = (isVisible: boolean) => { if (isVisible) { diff --git a/src/view/com/lightbox/ImageViewing/utils.ts b/src/view/com/lightbox/ImageViewing/utils.ts index 03f28d61a..6fc411638 100644 --- a/src/view/com/lightbox/ImageViewing/utils.ts +++ b/src/view/com/lightbox/ImageViewing/utils.ts @@ -6,7 +6,6 @@ * */ -import {Animated} from 'react-native' import {Dimensions, Position} from './@types' export const getImageTransform = ( @@ -25,29 +24,6 @@ export const getImageTransform = ( return [{x, y}, scale] as const } -export const getImageStyles = ( - image: Dimensions | null, - translate: Animated.ValueXY, - scale?: Animated.Value, -) => { - if (!image?.width || !image?.height) { - return {width: 0, height: 0} - } - - const transform = translate.getTranslateTransform() - - if (scale) { - // @ts-ignore TODO - is scale incorrect? might need to remove -prf - transform.push({scale}, {perspective: new Animated.Value(1000)}) - } - - return { - width: image.width, - height: image.height, - transform, - } -} - export const getImageTranslate = ( image: Dimensions, screen: Dimensions, |