zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Fix animations and gestures getting reset on state updates in the lightbox (#1618)

Browse source 
* Fix translation resetting on state update

* Copy getImageStyles into iOS and Android forks

* Fix opacity resetting on state update
This commit is contained in:
dan 2023-10-05 23:52:04 +01:00 • committed by GitHub
parent 260b03a05c
commit 4ec5fabdd1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
View file

@ -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)