Tile.CompleteAnimation

Success animation overlay component that displays a celebratory animation when measurements are completed, providing positive user feedback and visual confirmation.

Quick ExampleCopy Anchor Link

import { Tile } from "@ovok/native";
import React from "react";

const CompleteAnimationExample = () => {
  const [showAnimation, setShowAnimation] = React.useState(true);

  const handleAnimationEnd = () => {
    console.log("Animation completed");
    setShowAnimation(false);
  };

  return (
    <Tile>
      <Tile.StartSection
        isCompleted={true}
        testID="measurement-start-section"
      />
      <Tile.Title testID="measurement-title">
        Blood Pressure Measurement
      </Tile.Title>
      {showAnimation && (
        <Tile.CompleteAnimation
          onAnimationEnd={handleAnimationEnd}
          testID="success-animation"
        />
      )}
    </Tile>
  );
};

export default CompleteAnimationExample;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/tile API reference.

Component BehaviorCopy Anchor Link

The CompleteAnimation component:

1. Overlay: Positions absolutely over the entire tile content
2. Entry Animation: Fades in smoothly when displayed
3. Success Icon: Shows large green checkmark (TickCircle, 50px, Bold variant)
4. Completion Text: Displays "Completed" message below the icon
5. Duration: Runs for 3 seconds before triggering callback
6. Exit Animation: Fades out smoothly when removed
7. Callback: Executes onAnimationEnd when animation finishes

Animation TimelineCopy Anchor Link

0ms     - Component mounts
0-300ms - FadeIn entrance animation
3000ms  - Animation duration completes
        - onAnimationEnd callback fired (if provided)
3000ms+ - FadeOut exit animation (when component unmounts)

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• theme.colors.surface - Background overlay color
• theme.colors.success - Checkmark icon color
• theme.spacing(2) - Gap between icon and text

Related ComponentsCopy Anchor Link

• Tile.MeasuringSpinner - Loading state before completion
• Tile.MeasuredValue - Result display after animation
• Tile.Status - Status updates throughout measurement process