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

mateoguzmana · Aug 21, 2022 · 71cb894 · 71cb894
1 parent 1548a62
commit 71cb894
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/docs/docs/components/stars.mdx b/docs/docs/components/stars.mdx
@@ -44,6 +44,7 @@ You can also use a single star. Notice that you need to wrap the star with a `Ca
 | x         | `number`  | Initial x position of the star.                                           |
 | y         | `number`  | Initial y position of the star.                                           |
 | autoplay? | `boolean` | Whether the star should animate automatically or not (default is `true`). |
+| color?    | `boolean` | Star color (default is `rgba(255, 255, 0, 1)`).                           |
 
 ```js
 import { StyleSheet } from 'react-native';

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

diff --git a/src/components/Star.tsx b/src/components/Star.tsx
@@ -7,9 +7,10 @@ export interface StarProps {
   x: number;
   y: number;
   autoplay?: boolean;
+  color?: string;
 }
 
-function Star({ x, y, autoplay = true }: StarProps) {
+function Star({ x, y, autoplay = true, color = palette.yellow }: StarProps) {
   const opacity = useValue(1);
 
   const changeOpacity = useCallback(
@@ -30,7 +31,7 @@ function Star({ x, y, autoplay = true }: StarProps) {
         <Group transform={[{ scale: 0.1 }]}>
           <Path
             path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
-            color={palette.yellow}
+            color={color}
             opacity={opacity}
           />
         </Group>

diff --git a/src/components/Stars.tsx b/src/components/Stars.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,24 @@ import { screenHeight } from '../constants/dimensions';
 import { screenWidth } from '../constants/dimensions';
 import Star from './Star';
 import { shuffleArray } from '../utils/array';
+import { FiestaThemes } from '../constants/theming';
+import { colorsFromTheme } from '../utils/colors';
 
 const xGap = 40;
 const optimalNumberOfStars = Math.floor(screenWidth / xGap);
 const starsToRenderArray = [...Array(optimalNumberOfStars)];
 const yPositions = shuffleArray(starsToRenderArray.map((_, i) => i * xGap));
 
-function Stars() {
+interface StarsProps {
+  theme?: string[];
+}
+
+function Stars({ theme = FiestaThemes.default }: StarsProps) {
+  const colors = useMemo(
+    () => colorsFromTheme(theme, optimalNumberOfStars),
+    [theme]
+  );
+
   const yPosition = useValue(screenHeight);
 
   const changeItemPosition = useCallback(
@@ -45,7 +56,12 @@ function Stars() {
     <Canvas style={styles.canvas}>
       <Group transform={transform}>
         {starsToRenderArray.map((_, index) => (
-          <Star key={index} x={xGap * index} y={yPositions[index]} />
+          <Star
+            key={index}
+            x={xGap * index}
+            y={yPositions[index]}
+            color={colors[index]}
+          />
         ))}
       </Group>
     </Canvas>