[Lightbox] Fix jump when zooming out on iOS (#6633)

This commit is contained in:
dan
2024-11-22 13:34:16 +00:00
committed by GitHub
parent 5028753367
commit a0acd514ab
@@ -16,9 +16,11 @@ import {
import Animated, {
runOnJS,
SharedValue,
useAnimatedProps,
useAnimatedReaction,
useAnimatedRef,
useAnimatedStyle,
useSharedValue,
} from 'react-native-reanimated'
import {useSafeAreaFrame} from 'react-native-safe-area-context'
import {Image} from 'expo-image'
@@ -75,6 +77,7 @@ const ImageItem = ({
}: Props) => {
const scrollViewRef = useAnimatedRef<Animated.ScrollView>()
const [scaled, setScaled] = useState(false)
const isDragging = useSharedValue(false)
const screenSizeDelayedForJSThreadOnly = useSafeAreaFrame()
const maxZoomScale = Math.max(
MIN_SCREEN_ZOOM,
@@ -86,11 +89,20 @@ const ImageItem = ({
const scrollHandler = useAnimatedScrollHandler({
onScroll(e) {
'worklet'
const nextIsScaled = e.zoomScale > 1
if (scaled !== nextIsScaled) {
runOnJS(handleZoom)(nextIsScaled)
}
},
onBeginDrag() {
'worklet'
isDragging.value = true
},
onEndDrag() {
'worklet'
isDragging.value = false
},
})
function handleZoom(nextIsScaled: boolean) {
@@ -199,6 +211,11 @@ const ImageItem = ({
const borderRadius =
type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
const scrollViewProps = useAnimatedProps(() => ({
// Don't allow bounce at 1:1 rest so it can be swiped away.
bounces: scaled || isDragging.value,
}))
return (
<GestureDetector gesture={composedGesture}>
<Animated.ScrollView
@@ -210,8 +227,7 @@ const ImageItem = ({
maximumZoomScale={maxZoomScale}
onScroll={scrollHandler}
style={containerStyle}
bounces={scaled}
bouncesZoom={true}
animatedProps={scrollViewProps}
centerContent>
{showLoader && (
<ActivityIndicator size="small" color="#FFF" style={styles.loading} />