feat(hearts): adding colors and theming support for hearts

mateoguzmana · Aug 21, 2022 · 6adfead · 6adfead
1 parent 71cb894
commit 6adfead
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 13 deletions.
diff --git a/docs/docs/components/hearts.mdx b/docs/docs/components/hearts.mdx
@@ -12,9 +12,9 @@ A set of animated hearts.
 
 ### Set of hearts
 
-| Name            | Type       | Description                                                                               |
-| :-------------- | :--------- | :---------------------------------------------------------------------------------------- |
-| theme?          | `string[]` | An array of colors used to add theming to the animation. Fiesta theme is used by default. |
+| Name   | Type       | Description                                                                               |
+| :----- | :--------- | :---------------------------------------------------------------------------------------- |
+| theme? | `string[]` | An array of colors used to add theming to the animation. Fiesta theme is used by default. |
 
 ```js
 import { StyleSheet, View } from 'react-native';
@@ -44,6 +44,7 @@ You can also use a single heart. Notice that you need to wrap the heart with a `
 | x         | `number`  | Initial x position of the heart.                                           |
 | y         | `number`  | Initial y position of the heart.                                           |
 | autoplay? | `boolean` | Whether the heart should animate automatically or not (default is `true`). |
+| color?    | `boolean` | Heart color (default is `rgba(238, 17, 131, 1)`).                          |
 
 ```js
 import { StyleSheet } from 'react-native';

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -97,7 +97,13 @@ function App() {
         </TouchableOpacity>
 
         <TouchableOpacity
-          onPress={() => setComponentToRender(<Hearts />)}
+          onPress={() =>
+            setComponentToRender(
+              <Hearts
+                theme={lightMode ? FiestaThemes.dark : FiestaThemes.light}
+              />
+            )
+          }
           style={styles.pressable}
         >
           <Canvas style={styles.canvas}>

diff --git a/src/components/Heart.tsx b/src/components/Heart.tsx
@@ -7,9 +7,10 @@ export interface HeartProps {
   x: number;
   y: number;
   autoplay?: boolean;
+  color?: string;
 }
 
-function Heart({ x, y, autoplay = true }: HeartProps) {
+function Heart({ x, y, autoplay = true, color = palette.red }: HeartProps) {
   const opacity = useValue(1);
 
   const changeOpacity = useCallback(
@@ -30,7 +31,7 @@ function Heart({ x, y, autoplay = true }: HeartProps) {
         <Group transform={[{ scale: 0.05 }]}>
           <Path
             path="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.76 135.93 170.09 228.56 303.31 87.574-132.4 228.56-172.86 228.56-303.31 0-66.24-53.76-120-120-120-48.048 0-89.402 28.37-108.56 69.188-19.161-40.817-60.514-69.188-108.56-69.188z"
-            color={palette.red}
+            color={color}
             opacity={opacity}
           />
         </Group>

diff --git a/src/components/Hearts.tsx b/src/components/Hearts.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect } from 'react';
+import React, { memo, useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import {
   Canvas,
@@ -11,13 +11,23 @@ import { screenHeight } from '../constants/dimensions';
 import { screenWidth } from '../constants/dimensions';
 import Heart from './Heart';
 import { shuffleArray } from '../utils/array';
+import { colorsFromTheme } from '../utils/colors';
+import { FiestaThemes } from '../constants/theming';
 
 const xGap = 40;
-const optimalNumberOfStars = Math.floor(screenWidth / xGap);
-const starsToRenderArray = [...Array(optimalNumberOfStars)];
-const yPositions = shuffleArray(starsToRenderArray.map((_, i) => i * xGap));
+const optimalNumberOfHearts = Math.floor(screenWidth / xGap);
+const heartsToRenderArray = [...Array(optimalNumberOfHearts)];
+const yPositions = shuffleArray(heartsToRenderArray.map((_, i) => i * xGap));
 
-function Hearts() {
+interface HeartsProps {
+  theme?: string[];
+}
+
+function Hearts({ theme = FiestaThemes.default }: HeartsProps) {
+  const colors = useMemo(
+    () => colorsFromTheme(theme, optimalNumberOfHearts),
+    [theme]
+  );
   const yPosition = useValue(screenHeight);
 
   const changeItemPosition = useCallback(
@@ -44,8 +54,13 @@ function Hearts() {
   return (
     <Canvas style={styles.canvas}>
       <Group transform={transform}>
-        {starsToRenderArray.map((_, index) => (
-          <Heart key={index} x={xGap * index} y={yPositions[index]} />
+        {heartsToRenderArray.map((_, index) => (
+          <Heart
+            key={index}
+            x={xGap * index}
+            y={yPositions[index]}
+            color={colors[index]}
+          />
         ))}
       </Group>
     </Canvas>