Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 3x 3x 3x 6x 6x 4x 6x 3x 3x 2x | import { SharedValue, useAnimatedReaction, withTiming } from 'react-native-reanimated';
import { ANIMATION_DURATION_SHORT, EASING_OUT_CUBIC } from '@/constants/animation';
interface UseImageAnimationProps {
imageAnimationProgress?: SharedValue<number>;
translateY: SharedValue<number>;
currentIndex: number;
index: number;
height?: number;
isNextItemNewRequest?: boolean;
isCurrentItemNewRequest?: boolean;
}
const ANIMATION_DURATION = ANIMATION_DURATION_SHORT;
const ANIMATION_EASING = EASING_OUT_CUBIC;
export const useImageAnimation = ({
imageAnimationProgress,
translateY,
currentIndex,
index,
isCurrentItemNewRequest,
}: UseImageAnimationProps) => {
useAnimatedReaction(
() => {
if (!imageAnimationProgress || currentIndex !== index) return null;
return {
isAtRest: translateY.value === 0,
isNew: isCurrentItemNewRequest,
};
},
state => {
if (!state?.isAtRest || !imageAnimationProgress) return;
const target = state.isNew ? 0 : 1;
if (imageAnimationProgress.value === target) return;
imageAnimationProgress.value = withTiming(target, {
duration: ANIMATION_DURATION,
easing: ANIMATION_EASING,
});
},
[currentIndex, index, isCurrentItemNewRequest],
);
};
|