Skip to main content

Tile.CompleteAnimation

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

Quick Example​

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;

Props​

PropTypeRequiredDefaultDescription
onAnimationEnd() => void--Callback fired when animation completes
testIDstring--Test identifier for automated testing

Component Behavior​

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 Timeline​

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

Styling​

Theme Colors Used​

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