diff --git a/src/lib/custom-animations/CountWheel.tsx b/src/lib/custom-animations/CountWheel.tsx index b4ca62c6e2..b448ad2277 100644 --- a/src/lib/custom-animations/CountWheel.tsx +++ b/src/lib/custom-animations/CountWheel.tsx @@ -91,15 +91,15 @@ export function CountWheel({ likeCount, big, isLiked, - isToggle, + hasBeenToggled, }: { likeCount: number big?: boolean isLiked: boolean - isToggle: boolean + hasBeenToggled: boolean }) { const t = useTheme() - const shouldAnimate = !useReducedMotion() && isToggle + const shouldAnimate = !useReducedMotion() && hasBeenToggled const shouldRoll = decideShouldRoll(isLiked, likeCount) // Incrementing the key will cause the `Animated.View` to re-render, with the newly selected entering/exiting diff --git a/src/lib/custom-animations/LikeIcon.tsx b/src/lib/custom-animations/LikeIcon.tsx index 5c736e88d4..1bc48d43ba 100644 --- a/src/lib/custom-animations/LikeIcon.tsx +++ b/src/lib/custom-animations/LikeIcon.tsx @@ -71,15 +71,15 @@ const circle2Keyframe = new Keyframe({ export function AnimatedLikeIcon({ isLiked, big, - isToggle, + hasBeenToggled, }: { isLiked: boolean big?: boolean - isToggle: boolean + hasBeenToggled: boolean }) { const t = useTheme() const size = big ? 22 : 18 - const shouldAnimate = !useReducedMotion() && isToggle + const shouldAnimate = !useReducedMotion() && hasBeenToggled return ( @@ -95,12 +95,10 @@ export function AnimatedLikeIcon({ width={size} /> )} - {isLiked ? ( + {isLiked && shouldAnimate ? ( <> - const [isToggleLikeIcon, setIsToggleLikeIcon] = React.useState(false) + const [hasLikeIconBeenToggled, setHasLikeIconBeenToggled] = + React.useState(false) const onPressToggleLike = React.useCallback(async () => { if (isBlocked) { @@ -119,7 +120,7 @@ let PostCtrls = ({ } try { - setIsToggleLikeIcon(true) + setHasLikeIconBeenToggled(true) if (!post.viewer?.like) { playHaptic('Light') sendInteraction({ @@ -311,13 +312,13 @@ let PostCtrls = ({