From 474c4eff29b6a2454a20febf78a1edd5cf58663a Mon Sep 17 00:00:00 2001 From: dan Date: Sun, 17 Nov 2024 15:06:28 +0000 Subject: Use compiler-safe Reanimated get/set APIs (#6391) * Convert lightbox to get/set * Work around software-mansion/react-native-reanimated#6613 * Use get/set in more places * Port MainScrollProvider to get/set * Port more to get/set * Port composer to get/set * Remove unnecessary thread hops in composer * Port more things to get/set * Convert more to get/set, remove redundant runOnJS * Convert remaining cases to get/set --- .../lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx') diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx index f06a59ed6..c7be4f3e3 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -148,7 +148,7 @@ const ImageItem = ({ ) const containerStyle = useAnimatedStyle(() => { - const {scaleAndMoveTransform, isHidden} = transforms.value + const {scaleAndMoveTransform, isHidden} = transforms.get() return { flex: 1, transform: scaleAndMoveTransform, @@ -158,7 +158,7 @@ const ImageItem = ({ const imageCropStyle = useAnimatedStyle(() => { const screenSize = measureSafeArea() - const {cropFrameTransform} = transforms.value + const {cropFrameTransform} = transforms.get() return { overflow: 'hidden', transform: cropFrameTransform, @@ -171,7 +171,7 @@ const ImageItem = ({ }) const imageStyle = useAnimatedStyle(() => { - const {cropContentTransform} = transforms.value + const {cropContentTransform} = transforms.get() return { transform: cropContentTransform, width: '100%', @@ -184,7 +184,7 @@ const ImageItem = ({ const [hasLoaded, setHasLoaded] = useState(false) useAnimatedReaction( () => { - return transforms.value.isResting && !hasLoaded + return transforms.get().isResting && !hasLoaded }, (show, prevShow) => { if (show && !prevShow) { -- cgit 1.4.1 From 5028753367facb269ac226477091b77fad966f17 Mon Sep 17 00:00:00 2001 From: Paul Coroneos Date: Fri, 22 Nov 2024 05:59:47 -0600 Subject: Fix lightbox spinner (#6561) * refactor imageitem useanimatedreaction logic * revert copy/paste fix * revert last commit * Fix conditions --------- Co-authored-by: Dan Abramov --- .../ImageViewing/components/ImageItem/ImageItem.android.tsx | 6 +++--- .../lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) (limited to 'src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx') diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx index 7aca8721b..8e046e5ba 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -363,10 +363,10 @@ const ImageItem = ({ return transforms.get().isResting && !hasLoaded }, (show, prevShow) => { - if (show && !prevShow) { - runOnJS(setShowLoader)(false) - } else if (!prevShow && show) { + if (!prevShow && show) { runOnJS(setShowLoader)(true) + } else if (prevShow && !show) { + runOnJS(setShowLoader)(false) } }, ) diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx index c7be4f3e3..d42fb70c1 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -187,10 +187,10 @@ const ImageItem = ({ return transforms.get().isResting && !hasLoaded }, (show, prevShow) => { - if (show && !prevShow) { - runOnJS(setShowLoader)(false) - } else if (!prevShow && show) { + if (!prevShow && show) { runOnJS(setShowLoader)(true) + } else if (prevShow && !show) { + runOnJS(setShowLoader)(false) } }, ) -- cgit 1.4.1 From a0acd514abd83c444575616cc3b920a846c2fd08 Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 22 Nov 2024 13:34:16 +0000 Subject: [Lightbox] Fix jump when zooming out on iOS (#6633) --- .../components/ImageItem/ImageItem.ios.tsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) (limited to 'src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx') diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx index d42fb70c1..c103e131b 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -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() 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 ( {showLoader && ( -- cgit 1.4.1