Use safe aspect for lightbox calculations

This commit is contained in:
Dan Abramov
2024-11-01 03:04:21 +00:00
parent c95f8e8659
commit 5e1a2fcf06
2 changed files with 10 additions and 13 deletions
@@ -52,7 +52,7 @@ const ImageItem = ({
isScrollViewBeingDragged,
}: Props) => {
const [isScaled, setIsScaled] = useState(false)
const [_aspectRatio, imageDimensions] = useImageDimensions({
const [imageAspect, imageDimensions] = useImageDimensions({
src: imageSrc.uri,
knownDimensions: imageSrc.dimensions,
})
@@ -122,12 +122,12 @@ const ImageItem = ({
candidateTransform: TransformMatrix,
) {
'worklet'
if (!imageDimensions) {
if (!imageAspect) {
return [0, 0]
}
const [nextTranslateX, nextTranslateY, nextScale] =
readTransform(candidateTransform)
const scaledDimensions = getScaledDimensions(imageDimensions, nextScale)
const scaledDimensions = getScaledDimensions(imageAspect, nextScale)
const clampedTranslateX = clampTranslation(
nextTranslateX,
scaledDimensions.width,
@@ -251,7 +251,7 @@ const ImageItem = ({
.numberOfTaps(2)
.onEnd(e => {
'worklet'
if (!imageDimensions) {
if (!imageDimensions || !imageAspect) {
return
}
const [, , committedScale] = readTransform(committedTransform.value)
@@ -263,7 +263,6 @@ const ImageItem = ({
}
// Try to zoom in so that we get rid of the black bars (whatever the orientation was).
const imageAspect = imageDimensions.width / imageDimensions.height
const screenAspect = SCREEN.width / SCREEN.height
const candidateScale = Math.max(
imageAspect / screenAspect,
@@ -366,11 +365,10 @@ const styles = StyleSheet.create({
})
function getScaledDimensions(
imageDimensions: ImageDimensions,
imageAspect: number,
scale: number,
): ImageDimensions {
'worklet'
const imageAspect = imageDimensions.width / imageDimensions.height
const screenAspect = SCREEN.width / SCREEN.height
const isLandscape = imageAspect > screenAspect
if (isLandscape) {