feat: Line Path Gradient

example/ios/GraphExample.xcodeproj/project.pbxproj

@@ -265,7 +265,7 @@
 						TestTargetID = 13B07F861A680F5B00A75B9A;
 					};
 					13B07F861A680F5B00A75B9A = {
-						DevelopmentTeam = CJW62Q77E7;
+						DevelopmentTeam = TFP6882UUN;
 						LastSwiftMigration = 1120;
 					};
 					2D02E47A1E0B4A5D006451C7 = {
@@ -542,7 +542,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
-				DEVELOPMENT_TEAM = CJW62Q77E7;
+				DEVELOPMENT_TEAM = TFP6882UUN;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = GraphExample/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";

example/src/screens/GraphPage.tsx

@@ -16,6 +16,7 @@ const POINT_COUNT = 70
 const POINTS = generateRandomGraphData(POINT_COUNT)
 const COLOR = '#6a7ee7'
 const GRADIENT_FILL_COLORS = ['#7476df5D', '#7476df4D', '#7476df00']
+const GRADIENT_LINE_COLORS = ['#FF0000', '#00FF00', '#0000FF']
 const SMALL_POINTS = generateSinusGraphData(9)
 
 export function GraphPage() {
@@ -26,7 +27,8 @@ export function GraphPage() {
   const [enableFadeInEffect, setEnableFadeInEffect] = useState(false)
   const [enableCustomSelectionDot, setEnableCustomSelectionDot] =
     useState(false)
-  const [enableGradient, setEnableGradient] = useState(false)
+  const [enableFillGradient, setEnableFillGradient] = useState(false)
+  const [enableLineGradient, setEnableLineGradient] = useState(false)
   const [enableRange, setEnableRange] = useState(false)
   const [enableIndicator, setEnableIndicator] = useState(false)
   const [indicatorPulsating, setIndicatorPulsating] = useState(false)
@@ -89,9 +91,11 @@ export function GraphPage() {
       <LineGraph
         style={styles.graph}
         animated={isAnimated}
-        color={COLOR}
+        color={enableLineGradient ? GRADIENT_LINE_COLORS : COLOR}
         points={points}
-        gradientFillColors={enableGradient ? GRADIENT_FILL_COLORS : undefined}
+        gradientFillColors={
+          enableFillGradient ? GRADIENT_FILL_COLORS : undefined
+        }
         enablePanGesture={enablePanGesture}
         enableFadeInMask={enableFadeInEffect}
         onGestureStart={() => hapticFeedback('impactLight')}
@@ -126,9 +130,14 @@ export function GraphPage() {
           setIsEnabled={setEnableCustomSelectionDot}
         />
         <Toggle
-          title="Enable Gradient:"
-          isEnabled={enableGradient}
-          setIsEnabled={setEnableGradient}
+          title="Enable Fill Gradient:"
+          isEnabled={enableFillGradient}
+          setIsEnabled={setEnableFillGradient}
+        />
+        <Toggle
+          title="Enable Line Gradient:"
+          isEnabled={enableLineGradient}
+          setIsEnabled={setEnableLineGradient}
         />
         <Toggle
           title="Enable Range:"

package.json

@@ -112,7 +112,8 @@
           "tabWidth": 2,
           "semi": false,
           "trailingComma": "es5",
-          "useTabs": false
+          "useTabs": false,
+          "semi": false
         }
       ]
     }
@@ -126,7 +127,8 @@
     "singleQuote": true,
     "tabWidth": 2,
     "trailingComma": "es5",
-    "useTabs": false
+    "useTabs": false,
+    "semi": false
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -142,4 +144,4 @@
       ]
     ]
   }
-}
+}

src/AnimatedLineGraph.tsx

@@ -97,16 +97,20 @@ export function AnimatedLineGraph({
   const indicatorPulseRadius = useValue(INDICATOR_PULSE_BLUR_RADIUS_SMALL)
   const indicatorPulseOpacity = useValue(1)
 
-  const positions = useComputedValue(
-    () => [
-      0,
-      Math.min(0.15, pathEnd.current),
-      pathEnd.current,
-      pathEnd.current,
-      1,
-    ],
-    [pathEnd]
-  )
+  const positions = useComputedValue(() => {
+    if (typeof color === 'string') {
+      return [
+        0,
+        Math.min(0.15, pathEnd.current),
+        pathEnd.current,
+        pathEnd.current,
+        1,
+      ]
+    } else {
+      return color.map((_, index) => index / (color.length - 1))
+    }
+  }, [pathEnd, color])
+
   const onLayout = useCallback(
     ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
       setWidth(Math.round(layout.width))
@@ -164,7 +168,15 @@ export function AnimatedLineGraph({
     [commandsChanged, indicatorX]
   )
 
-  const indicatorPulseColor = useMemo(() => hexToRgba(color, 0.4), [color])
+  const primaryColor = useMemo(() => {
+    if (typeof color === 'string') return color
+    return color[0] ?? '#FFF'
+  }, [color])
+
+  const indicatorPulseColor = useMemo(
+    () => hexToRgba(primaryColor, 0.4),
+    [primaryColor]
+  )
 
   const shouldFillGradient = gradientFillColors != null
 
@@ -269,22 +281,26 @@ export function AnimatedLineGraph({
   ])
 
   const gradientColors = useMemo(() => {
-    if (enableFadeInMask) {
-      return [
-        `${getSixDigitHex(color)}00`,
-        `${getSixDigitHex(color)}ff`,
-        `${getSixDigitHex(color)}ff`,
-        `${getSixDigitHex(color)}33`,
-        `${getSixDigitHex(color)}33`,
-      ]
+    if (typeof color === 'string') {
+      if (enableFadeInMask) {
+        return [
+          `${getSixDigitHex(color)}00`,
+          `${getSixDigitHex(color)}ff`,
+          `${getSixDigitHex(color)}ff`,
+          `${getSixDigitHex(color)}33`,
+          `${getSixDigitHex(color)}33`,
+        ]
+      } else {
+        return [
+          color,
+          color,
+          color,
+          `${getSixDigitHex(color)}33`,
+          `${getSixDigitHex(color)}33`,
+        ]
+      }
     } else {
-      return [
-        color,
-        color,
-        color,
-        `${getSixDigitHex(color)}33`,
-        `${getSixDigitHex(color)}33`,
-      ]
+      return color
     }
   }, [color, enableFadeInMask])
 
@@ -490,7 +506,7 @@ export function AnimatedLineGraph({
               {SelectionDot != null && (
                 <SelectionDot
                   isActive={isActive}
-                  color={color}
+                  color={primaryColor}
                   lineThickness={lineThickness}
                   circleX={circleX}
                   circleY={circleY}
@@ -522,7 +538,7 @@ export function AnimatedLineGraph({
                     cx={indicatorX}
                     cy={indicatorY}
                     r={indicatorRadius}
-                    color={color}
+                    color={primaryColor}
                   />
                 </Group>
               )}

src/LineGraphProps.ts

@@ -30,9 +30,9 @@ interface BaseLineGraphProps extends ViewProps {
    */
   range?: GraphRange
   /**
-   * Color of the graph line (path)
+   * Color of the graph line (path) either as a single solid color or an array of colors for a line gradient
    */
-  color: string
+  color: string | string[]
   /**
    * (Optional) Colors for the fill gradient below the graph line
    */

src/SelectionDot.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { runOnJS, useAnimatedReaction } from 'react-native-reanimated'
 import {
   runSpring,
@@ -45,6 +45,11 @@ export function SelectionDot({
     [isActive, setIsActive]
   )
 
+  const primaryColor = useMemo(() => {
+    if (typeof color === 'string') return color
+    return color[0] ?? '#FFF'
+  }, [color])
+
   return (
     <Group>
       <Circle
@@ -54,7 +59,7 @@ export function SelectionDot({
         r={circleStrokeRadius}
         color="#333333"
       />
-      <Circle cx={circleX} cy={circleY} r={circleRadius} color={color}>
+      <Circle cx={circleX} cy={circleY} r={circleRadius} color={primaryColor}>
         <Shadow dx={0} dy={0} color="rgba(0,0,0,0.5)" blur={4} />
       </Circle>
     </Group>

src/StaticLineGraph.tsx

@@ -47,25 +47,36 @@ export function StaticLineGraph({
     [height, lineThickness, pathRange, points, width]
   )
 
+  const primaryColor = useMemo(() => {
+    if (typeof color === 'string') return color
+    return color[0] ?? '#FFF'
+  }, [color])
+
   const gradientColors = useMemo(
-    () => [`${getSixDigitHex(color)}00`, `${getSixDigitHex(color)}ff`],
+    () =>
+      typeof color === 'string'
+        ? [`${getSixDigitHex(color)}00`, `${getSixDigitHex(color)}ff`]
+        : color,
     [color]
   )
   const gradientFrom = useMemo(() => vec(0, 0), [])
-  const gradientTo = useMemo(() => vec(width * 0.15, 0), [width])
+  const gradientTo = useMemo(
+    () => vec(typeof color === 'string' ? width * 0.15 : width, 0),
+    [width, color]
+  )
 
   return (
     <View {...props} style={style} onLayout={onLayout}>
       <Canvas style={styles.svg}>
         <Path
           path={path}
           strokeWidth={lineThickness}
-          color={enableFadeInMask ? undefined : color}
+          color={enableFadeInMask ? undefined : primaryColor}
           style="stroke"
           strokeJoin="round"
           strokeCap="round"
         >
-          {enableFadeInMask && (
+          {(enableFadeInMask || typeof color !== 'string') && (
             <LinearGradient
               start={gradientFrom}
               end={gradientTo}