forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Lightbox] Fix jump when zooming out on iOS (#6633)
+18
-2
+18
-2
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+18
-2
src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
···
16
16
import Animated, {
17
17
runOnJS,
18
18
SharedValue,
19
+
useAnimatedProps,
19
20
useAnimatedReaction,
20
21
useAnimatedRef,
21
22
useAnimatedStyle,
23
+
useSharedValue,
22
24
} from 'react-native-reanimated'
23
25
import {useSafeAreaFrame} from 'react-native-safe-area-context'
24
26
import {Image} from 'expo-image'
···
75
77
}: Props) => {
76
78
const scrollViewRef = useAnimatedRef<Animated.ScrollView>()
77
79
const [scaled, setScaled] = useState(false)
80
+
const isDragging = useSharedValue(false)
78
81
const screenSizeDelayedForJSThreadOnly = useSafeAreaFrame()
79
82
const maxZoomScale = Math.max(
80
83
MIN_SCREEN_ZOOM,
···
86
89
87
90
const scrollHandler = useAnimatedScrollHandler({
88
91
onScroll(e) {
92
+
'worklet'
89
93
const nextIsScaled = e.zoomScale > 1
90
94
if (scaled !== nextIsScaled) {
91
95
runOnJS(handleZoom)(nextIsScaled)
92
96
}
97
+
},
98
+
onBeginDrag() {
99
+
'worklet'
100
+
isDragging.value = true
101
+
},
102
+
onEndDrag() {
103
+
'worklet'
104
+
isDragging.value = false
93
105
},
94
106
})
95
107
···
199
211
const borderRadius =
200
212
type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
201
213
214
+
const scrollViewProps = useAnimatedProps(() => ({
215
+
// Don't allow bounce at 1:1 rest so it can be swiped away.
216
+
bounces: scaled || isDragging.value,
217
+
}))
218
+
202
219
return (
203
220
<GestureDetector gesture={composedGesture}>
204
221
<Animated.ScrollView
···
210
227
maximumZoomScale={maxZoomScale}
211
228
onScroll={scrollHandler}
212
229
style={containerStyle}
213
-
bounces={scaled}
214
-
bouncesZoom={true}
230
+
animatedProps={scrollViewProps}
215
231
centerContent>
216
232
{showLoader && (
217
233
<ActivityIndicator size="small" color="#FFF" style={styles.loading} />