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

* 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
4 changed files with 57 additions and 42 deletions
@@ -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)