Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

authored by

dan and committed by
GitHub
a0acd514 50287533

+18 -2
+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} />