feat: ability to customize SelectionDot component (#35)

* feat: ability to customize SelectionDot component

* feat: ability to customize SelectionDot component

* fix: pass props directly to view

Author: robinvw1

README.md

@@ -122,14 +122,16 @@ Example:
 
 ---
 
-### `selectionDotShadowColor`
+### `SelectionDot`
 
 <img src="./img/selection-dot.jpeg" align="right" height="250" />
 
-The color of the selection dot.
+Used to render the selection dot.
 
 >  Requires `animated` and `enablePanGesture` to be `true`.
 
+If `SelectionDot` is missing or `undefined`, a default one is provided with an outer ring and light shadow.
+
 Example:
 
 ```jsx
@@ -138,10 +140,12 @@ Example:
   animated={true}
   color="#4484B2"
   enablePanGesture={true}
-  selectionDotShadowColor="#333333"
+  SelectionDot={CustomSelectionDot}
 />
 ```
 
+See this [example `<SelectionDot />` component](./example/src/components/CustomSelectionDot.tsx).
+
 ## Sponsor
 
 <img src="./img/pinkpanda.png" align="right" height="50">

example/src/components/CustomSelectionDot.tsx

@@ -0,0 +1,52 @@
+/**
+ * An example for a custom SelectionDot component.
+ *
+ * Usage:
+ *
+ * ```jsx
+ * <LineGraph
+ *   points={priceHistory}
+ *   animated={true}
+ *   enablePanGesture={true}
+ *   SelectionDot={CustomSelectionDot}
+ * />
+ * ```
+ *
+ * This example has removed the outer ring and light
+ * shadow from the default one to make it more flat.
+ */
+import React, { useCallback } from 'react'
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated'
+import { runSpring, useValue, Circle } from '@shopify/react-native-skia'
+import type { SelectionDotProps } from 'react-native-graph'
+
+export function SelectionDot({
+  isActive,
+  color,
+  circleX,
+  circleY,
+}: SelectionDotProps): React.ReactElement {
+  const circleRadius = useValue(0)
+
+  const setIsActive = useCallback(
+    (active: boolean) => {
+      runSpring(circleRadius, active ? 5 : 0, {
+        mass: 1,
+        stiffness: 1000,
+        damping: 50,
+        velocity: 0,
+      })
+    },
+    [circleRadius]
+  )
+
+  useAnimatedReaction(
+    () => isActive.value,
+    (active) => {
+      runOnJS(setIsActive)(active)
+    },
+    [isActive, setIsActive]
+  )
+
+  return <Circle cx={circleX} cy={circleY} r={circleRadius} color={color} />
+}

example/src/screens/GraphPage.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react'
 import { View, StyleSheet, Text, Button } from 'react-native'
 import { LineGraph } from 'react-native-graph'
 import StaticSafeAreaInsets from 'react-native-static-safe-area-insets'
+import { SelectionDot } from '../components/CustomSelectionDot'
 import { Toggle } from '../components/Toggle'
 import {
   generateRandomGraphData,
@@ -51,7 +52,7 @@ export function GraphPage() {
         enablePanGesture={enablePanGesture}
         enableFadeInMask={enableFadeInEffect}
         onGestureStart={() => hapticFeedback('impactLight')}
-        selectionDotShadowColor={colors.foreground}
+        SelectionDot={SelectionDot}
       />
 
       <Button title="Refresh" onPress={refreshData} />

src/AnimatedLineGraph.tsx

@@ -10,12 +10,11 @@ import {
   useValue,
   useComputedValue,
   vec,
-  Circle,
   Group,
-  Shadow,
   PathCommand,
 } from '@shopify/react-native-skia'
 import type { AnimatedLineGraphProps } from './LineGraphProps'
+import { SelectionDot as DefaultSelectionDot } from './SelectionDot'
 import { createGraphPath } from './CreateGraphPath'
 import Reanimated, {
   runOnJS,
@@ -38,9 +37,9 @@ export function AnimatedLineGraph({
   onPointSelected,
   onGestureStart,
   onGestureEnd,
+  SelectionDot = DefaultSelectionDot,
   TopAxisLabel,
   BottomAxisLabel,
-  selectionDotShadowColor,
   ...props
 }: AnimatedLineGraphProps): React.ReactElement {
   const [width, setWidth] = useState(0)
@@ -163,11 +162,6 @@ export function AnimatedLineGraph({
   const circleX = useValue(0)
   const circleY = useValue(0)
   const pathEnd = useValue(0)
-  const circleRadius = useValue(0)
-  const circleStrokeRadius = useComputedValue(
-    () => circleRadius.current * 6,
-    [circleRadius]
-  )
 
   const setFingerX = useCallback(
     (fingerX: number) => {
@@ -188,18 +182,11 @@ export function AnimatedLineGraph({
   )
   const setIsActive = useCallback(
     (active: boolean) => {
-      runSpring(circleRadius, active ? 5 : 0, {
-        mass: 1,
-        stiffness: 1000,
-        damping: 50,
-        velocity: 0,
-      })
       if (!active) pathEnd.current = 1
-
       if (active) onGestureStart?.()
       else onGestureEnd?.()
     },
-    [circleRadius, onGestureEnd, onGestureStart, pathEnd]
+    [onGestureEnd, onGestureStart, pathEnd]
   )
   useAnimatedReaction(
     () => x.value,
@@ -260,24 +247,14 @@ export function AnimatedLineGraph({
                 </Path>
               </Group>
 
-              {enablePanGesture && (
-                <Group>
-                  <Circle
-                    opacity={0.05}
-                    cx={circleX}
-                    cy={circleY}
-                    r={circleStrokeRadius}
-                    color={selectionDotShadowColor}
-                  />
-                  <Circle
-                    cx={circleX}
-                    cy={circleY}
-                    r={circleRadius}
-                    color={color}
-                  >
-                    <Shadow dx={0} dy={0} color="rgba(0,0,0,0.5)" blur={4} />
-                  </Circle>
-                </Group>
+              {SelectionDot != null && (
+                <SelectionDot
+                  isActive={isActive}
+                  color={color}
+                  lineThickness={lineThickness}
+                  circleX={circleX}
+                  circleY={circleY}
+                />
               )}
             </Canvas>
           </View>

src/LineGraphProps.ts

@@ -1,11 +1,21 @@
 import type React from 'react'
 import type { ViewProps } from 'react-native'
+import type { SharedValue } from 'react-native-reanimated'
+import type { SkiaMutableValue } from '@shopify/react-native-skia'
 
 export interface GraphPoint {
   value: number
   date: Date
 }
 
+export interface SelectionDotProps {
+  isActive: SharedValue<boolean>
+  color: BaseLineGraphProps['color']
+  lineThickness: BaseLineGraphProps['lineThickness']
+  circleX: SkiaMutableValue<number>
+  circleY: SkiaMutableValue<number>
+}
+
 interface BaseLineGraphProps extends ViewProps {
   /**
    * All points to be marked in the graph. Coordinate system will adjust to scale automatically.
@@ -36,11 +46,6 @@ export type AnimatedLineGraphProps = BaseLineGraphProps & {
    */
   enablePanGesture?: boolean
 
-  /**
-   * The color of the selection dot when the user is panning the graph.
-   */
-  selectionDotShadowColor?: string
-
   /**
    * Called for each point while the user is scrubbing/panning through the graph
    */
@@ -54,10 +59,16 @@ export type AnimatedLineGraphProps = BaseLineGraphProps & {
    */
   onGestureEnd?: () => void
 
+  /**
+   * The element that renders the selection dot
+   */
+  SelectionDot?: React.ComponentType<SelectionDotProps> | null
+
   /**
    * The element that gets rendered above the Graph (usually the "max" point/value of the Graph)
    */
   TopAxisLabel?: () => React.ReactElement | null
+
   /**
    * The element that gets rendered below the Graph (usually the "min" point/value of the Graph)
    */

src/SelectionDot.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react'
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated'
+import {
+  runSpring,
+  useValue,
+  useComputedValue,
+  Circle,
+  Group,
+  Shadow,
+} from '@shopify/react-native-skia'
+import type { SelectionDotProps } from './LineGraphProps'
+
+export function SelectionDot({
+  isActive,
+  color,
+  circleX,
+  circleY,
+}: SelectionDotProps): React.ReactElement {
+  const circleRadius = useValue(0)
+  const circleStrokeRadius = useComputedValue(
+    () => circleRadius.current * 6,
+    [circleRadius]
+  )
+
+  const setIsActive = useCallback(
+    (active: boolean) => {
+      runSpring(circleRadius, active ? 5 : 0, {
+        mass: 1,
+        stiffness: 1000,
+        damping: 50,
+        velocity: 0,
+      })
+    },
+    [circleRadius]
+  )
+
+  useAnimatedReaction(
+    () => isActive.value,
+    (active) => {
+      runOnJS(setIsActive)(active)
+    },
+    [isActive, setIsActive]
+  )
+
+  return (
+    <Group>
+      <Circle
+        opacity={0.05}
+        cx={circleX}
+        cy={circleY}
+        r={circleStrokeRadius}
+        color="#333333"
+      />
+      <Circle cx={circleX} cy={circleY} r={circleRadius} color={color}>
+        <Shadow dx={0} dy={0} color="rgba(0,0,0,0.5)" blur={4} />
+      </Circle>
+    </Group>
+  )
+}

src/index.ts

@@ -1 +1,7 @@
+export * from './SelectionDot'
 export * from './LineGraph'
+export type {
+  GraphPoint,
+  LineGraphProps,
+  SelectionDotProps,
+} from './LineGraphProps'