@wavyheart/heart-progress

A customizable animated heart progress component for React Native.

Installation

npm install @wavyheart/heart-progress
# or
yarn add @wavyheart/heart-progress

Note: This package requires react-native-svg as a peer dependency.

Usage

import HeartProgress from "@wavyheart/heart-progress";

<HeartProgress percentage={75} size={150} Username="John Doe" />;

Props

| Prop | Type | Default | Description | | ---------------- | ---------------- | ---------------------- | ----------------------------------------- | | percentage | number | 50 | Progress percentage (0-100) | | size | number | 120 | Width/height of the heart in pixels | | Username | string | | Username to display below the heart | | gradientColors | [string, string] | ['#ff6b6b', '#e63946'] | Gradient colors for the wave fill | | backgroundColor | string | '#eee' | Background color of the heart | | waveAmplitude | number | 8 | Amplitude of the wave animation | | waveSpeed | number | 2000 | Speed of the wave animation in ms | | textColor | string | '#000' | Color of the percentage and username text | | fontSize | number | 16 | Font size for the percentage text | | usernameFontSize | number | 18 | Font size for the username text | | showPercentage | boolean | true | Show the percentage text | | showUsername | boolean | true | Show the username text | | style | object | | Additional style for the container |

Usage Examples

import HeartProgress from "@wavyheart/heart-progress";

// Default usage
<HeartProgress percentage={75} size={150} Username="John Doe" />

// Fully customized
<HeartProgress
  percentage={60}
  size={180}
  Username="Jane Smith"
  gradientColors={["#36d1c4", "#1fa2ff"]}
  backgroundColor="#fff0f0"
  waveAmplitude={12}
  waveSpeed={1200}
  textColor="#333"
  fontSize={20}
  usernameFontSize={22}
  showPercentage={true}
  showUsername={true}
  style={{ marginVertical: 32 }}
/>

Read More

Introducing Heart Progress: A Stylish Wavy Heart-Shaped Progress Indicator for React Native (Medium Article)

License

MIT