Fix animation to wrong index

This commit is contained in:
Dan Abramov
2024-11-02 03:40:26 +00:00
parent e8ec306839
commit b472d54b34
+18 -2
View File
@@ -54,6 +54,7 @@ function ImageViewing({
lightbox, lightbox,
openProgress, openProgress,
onFlyAway, onFlyAway,
onChangeIndex,
onRequestClose, onRequestClose,
onPressSave, onPressSave,
onPressShare, onPressShare,
@@ -61,6 +62,7 @@ function ImageViewing({
lightbox: Lightbox lightbox: Lightbox
openProgress: SharedValue<number> openProgress: SharedValue<number>
onFlyAway: () => void onFlyAway: () => void
onChangeIndex: (index: number) => void
onRequestClose: () => void onRequestClose: () => void
onPressSave: (uri: string) => void onPressSave: (uri: string) => void
onPressShare: (uri: string) => void onPressShare: (uri: string) => void
@@ -207,6 +209,7 @@ function ImageViewing({
onPageSelected={e => { onPageSelected={e => {
setImageIndex(e.nativeEvent.position) setImageIndex(e.nativeEvent.position)
setIsScaled(false) setIsScaled(false)
onChangeIndex(e.nativeEvent.position)
}} }}
onPageScrollStateChanged={e => { onPageScrollStateChanged={e => {
setIsDragging(e.nativeEvent.pageScrollState !== 'idle') setIsDragging(e.nativeEvent.pageScrollState !== 'idle')
@@ -424,6 +427,8 @@ function ImageViewingRoot({
}) { }) {
const [activeLightbox, setActiveLightbox] = useState(nextLightbox) const [activeLightbox, setActiveLightbox] = useState(nextLightbox)
const openProgress = useSharedValue(0) const openProgress = useSharedValue(0)
const isAnimatable = useSharedValue(false)
const isInitialIndex = useSharedValue(true)
if (!activeLightbox && nextLightbox) { if (!activeLightbox && nextLightbox) {
setActiveLightbox(nextLightbox) setActiveLightbox(nextLightbox)
@@ -436,13 +441,21 @@ function ImageViewingRoot({
nextLightbox.thumbDims nextLightbox.thumbDims
) { ) {
openProgress.value = withClampedSpring(1) openProgress.value = withClampedSpring(1)
isAnimatable.value = true
} else { } else {
openProgress.value = 1 openProgress.value = 1
isAnimatable.value = false
} }
isInitialIndex.value = true
} else { } else {
openProgress.value = withClampedSpring(0) // TODO: Support animation to non-initial index.
if (isAnimatable.value && isInitialIndex.value) {
openProgress.value = withClampedSpring(0)
} else {
openProgress.value = 0
}
} }
}, [nextLightbox, openProgress]) }, [nextLightbox, openProgress, isAnimatable, isInitialIndex])
useAnimatedReaction( useAnimatedReaction(
() => openProgress.value === 0, () => openProgress.value === 0,
@@ -463,6 +476,9 @@ function ImageViewingRoot({
lightbox={activeLightbox} lightbox={activeLightbox}
openProgress={openProgress} openProgress={openProgress}
onRequestClose={onRequestClose} onRequestClose={onRequestClose}
onChangeIndex={index => {
isInitialIndex.value = index === activeLightbox.index
}}
onFlyAway={() => { onFlyAway={() => {
'worklet' 'worklet'
openProgress.value = 0 openProgress.value = 0