feat: add cursor customizations, more documentation, and batched updates

Key Highlights:
- Added cursorColor, cursorLineColor, cursorLineWidth, hideCursor, and
  hideCursorLine props to improve customizability of cursor
- Improved documentation of types
- Introduced batchedUpdates to reduce mount re-render
- Added precision prop

Author: e-younan

example/app/chart.tsx

@@ -4,7 +4,7 @@ import {
   type PanGestureHandlerOnChangeEventPayload,
   HoverGestureHandlerOnChangeEventPayload,
 } from "@codeherence/react-native-graph";
-import { LinearGradient, vec } from "@shopify/react-native-skia";
+import { Paint } from "@shopify/react-native-skia";
 import { useCallback, useMemo, useReducer } from "react";
 import { Button, ScrollView, StyleSheet, Text } from "react-native";
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
@@ -35,7 +35,7 @@ const uiFormatter = (price: number) => {
 };
 
 const priceMap = {
-  msft: msft_prices.results
+  msft: [...msft_prices.results]
     .reverse()
     .map<[number, number]>((r) => [new Date(r.date).getTime(), r.close]),
   aapl: aapl_prices.results
@@ -52,10 +52,10 @@ const priceMap = {
 const priceMapKeys = Object.keys(priceMap) as (keyof typeof priceMap)[];
 
 export default () => {
-  const [counter, increment] = useReducer((s: number) => s + 1, 0);
-
   const { bottom, left, right } = useSafeAreaInsets();
 
+  const [counter, increment] = useReducer((s: number) => s + 1, 0);
+
   const latestPrice = useSharedValue("0");
   const symbol = priceMapKeys[counter % priceMapKeys.length]!;
   const data: [number, number][] = useMemo(() => {
@@ -85,31 +85,33 @@ export default () => {
   return (
     <ScrollView
       style={styles.container}
-      contentContainerStyle={{
-        paddingBottom: bottom,
-        paddingLeft: left,
-        paddingRight: right,
-      }}
+      contentContainerStyle={[
+        styles.contentContainer,
+        {
+          paddingBottom: bottom,
+          paddingLeft: left,
+          paddingRight: right,
+        },
+      ]}
       showsVerticalScrollIndicator={false}
     >
-      <Button title={`Showing ${symbol}. Click to switch.`} onPress={increment} />
+      <Button title={`Showing ${symbol}. Press to switch.`} onPress={increment} />
       <AnimatedText style={styles.price} animatedProps={animatedProps} />
       <LineChart
         points={data}
         style={styles.chart}
+        cursorColor="#000"
+        cursorLineColor="#000"
+        cursorLineWidth={1}
         TopAxisLabel={AxisLabel}
         BottomAxisLabel={AxisLabel}
         onPanGestureChange={onGestureChangeWorklet}
         onPanGestureEnd={onEndWorklet}
         onHoverGestureEnd={onEndWorklet}
         onHoverGestureChange={onHoverChangeWorklet}
         strokeWidth={2}
-        PathFill={({ width }) => (
-          <LinearGradient
-            start={vec(0, 0)}
-            end={vec(width, 0)}
-            colors={["blue", "red", "purple"]}
-          />
+        PathFill={({ strokeWidth }) => (
+          <Paint style="stroke" strokeWidth={strokeWidth} color="lightblue" />
         )}
       />
     </ScrollView>
@@ -118,6 +120,7 @@ export default () => {
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
-  chart: { flex: 1, minHeight: 400 },
+  contentContainer: { flexGrow: 1 },
+  chart: { flex: 1, maxHeight: 300 },
   price: { fontSize: 32 },
 });

example/app/index.tsx

@@ -2,15 +2,15 @@ import { useRouter } from "expo-router";
 import { Pressable, ScrollView, StyleSheet, Text } from "react-native";
 
 export default () => {
-  const { push } = useRouter();
+  const { navigate } = useRouter();
 
   return (
     <ScrollView
       style={styles.container}
       contentContainerStyle={styles.contentContainer}
       showsVerticalScrollIndicator={false}
     >
-      <Pressable onPress={() => push("/chart")}>
+      <Pressable onPress={() => navigate("/chart")}>
         <Text style={styles.link}>Go to Charts</Text>
       </Pressable>
     </ScrollView>

example/ios/Podfile.lock

@@ -1016,7 +1016,7 @@ PODS:
     - React-Core
   - react-native-safe-area-context (4.8.2):
     - React-Core
-  - react-native-skia (1.0.2):
+  - react-native-skia (1.2.3):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React
@@ -1508,7 +1508,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 63913773ed7f96b814a2521e13e6d010282096ad
   react-native-animateable-text: 79b31ec28f4ed14dab76b304eb74a24eeb2fa9c0
   react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89
-  react-native-skia: 0c09a4baff5db09a88dc6c9bfba25bcf4f5bbe8a
+  react-native-skia: 61a8a1c161ebf4e677b2d39af880c997d8847313
   React-nativeconfig: d7af5bae6da70fa15ce44f045621cf99ed24087c
   React-NativeModulesApple: 0123905d5699853ac68519607555a9a4f5c7b3ac
   React-perflogger: 8a1e1af5733004bdd91258dcefbde21e0d1faccd

example/ios/example.xcodeproj/project.pbxproj

@@ -471,7 +471,10 @@
 				ONLY_ACTIVE_ARCH = YES;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
@@ -528,7 +531,10 @@
 				MTL_ENABLE_DEBUG_INFO = NO;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

example/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~3.1.3",
-    "@shopify/react-native-skia": "1.0.2",
+    "@shopify/react-native-skia": "^1.2.3",
     "expo": "~50.0.8",
     "expo-blur": "~12.9.2",
     "expo-constants": "~15.4.5",

example/yarn.lock

@@ -2305,10 +2305,10 @@
     component-type "^1.2.1"
     join-component "^1.1.0"
 
-"@shopify/react-native-skia@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-1.0.2.tgz#3ffa54f5df524ebae0ce55bee1e9efbe3e7cf959"
-  integrity sha512-w6qS+jCeUGKDJAOok5QJV6flWlvFt0Vmc9mNXi2n4jfHkQ+uccYVHFCXazhCAc5b8mFjcfMNygy12SVgP4d46g==
+"@shopify/react-native-skia@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-1.2.3.tgz#d87efd01c362b69f62375ce950c30e453586d6f9"
+  integrity sha512-gyUD/HGsMyZ+YAoWxVh24HYN5juwC/dZWINL/0sKP7Ttee/0igCRxWPneH1BbVH28dhyf+tvksQNUwpMM3VWbg==
   dependencies:
     canvaskit-wasm "0.39.1"
     react-reconciler "0.27.0"

src/components/LineChart/AxisLabel.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useCallback, useState } from "react";
 import { LayoutChangeEvent, StyleSheet, View } from "react-native";
-import Reanimated, {
+import Animated, {
   clamp,
   useAnimatedStyle,
   useDerivedValue,
@@ -33,21 +33,18 @@ export const AxisLabelContainer: React.FC<AxisLabelContainerProps> = ({
     const halfWidth = Math.round(width / 2);
     const minX = 0;
     const maxX = containerWidth - width;
-
     return withTiming(clamp(x - halfWidth, minX, maxX));
   }, [x, containerWidth, width]);
 
   const transform = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateX: translateX.value }],
-    };
+    return { transform: [{ translateX: translateX.value }] };
   });
 
   return (
     <View style={styles.container}>
-      <Reanimated.View style={[styles.child, transform]} onLayout={onLayout}>
+      <Animated.View style={[styles.child, transform]} onLayout={onLayout}>
         {children}
-      </Reanimated.View>
+      </Animated.View>
     </View>
   );
 };

src/components/LineChart/Cursor.tsx

@@ -2,33 +2,78 @@ import { Circle, Group, Line, vec } from "@shopify/react-native-skia";
 import { useDerivedValue } from "react-native-reanimated";
 import type { DerivedValue, SharedValue } from "react-native-reanimated";
 
-interface CursorProps {
+export interface CursorProps {
+  /** The x position of the cursor */
   x: SharedValue<number>;
+  /** The y position of the cursor */
   y: DerivedValue<number>;
+  /** The canvas height */
   height: number;
+  /** The radius of the cursor */
   cursorRadius: number;
+  /** The color of the cursor */
+  cursorColor: string;
+  /**
+   * The color of the cursor line.
+   * @default "rgba(0, 0, 0, 0.5)"
+   */
+  cursorLineColor: string;
+  /**
+   * The width of the cursor line.
+   * @default 2
+   */
+  cursorLineWidth: number;
+  /**
+   * Whether to hide the cursor line.
+   * @default false
+   */
+  hideCursorLine: boolean;
 }
 
-export const Cursor: React.FC<CursorProps> = ({ x, y, height, cursorRadius }) => {
-  const lineTransform = useDerivedValue(() => {
+type CursorLineProps = Pick<CursorProps, "x" | "height" | "cursorLineColor" | "cursorLineWidth">;
+
+const CursorLine: React.FC<CursorLineProps> = ({ x, height, cursorLineColor, cursorLineWidth }) => {
+  const transform = useDerivedValue(() => {
     return [{ translateX: x.value }];
   });
 
-  const transform = useDerivedValue(() => {
+  return (
+    <Line
+      transform={transform}
+      p1={vec(0, 0)}
+      p2={vec(0, height)}
+      color={cursorLineColor}
+      strokeWidth={cursorLineWidth}
+    />
+  );
+};
+
+export const Cursor: React.FC<CursorProps> = ({
+  x,
+  y,
+  height,
+  cursorRadius,
+  cursorColor,
+  cursorLineColor,
+  cursorLineWidth,
+  hideCursorLine,
+}) => {
+  const cursorTransform = useDerivedValue(() => {
     return [{ translateX: x.value }, { translateY: y.value }];
   }, []);
 
   return (
     <>
-      <Line
-        transform={lineTransform}
-        p1={vec(0, 0)}
-        p2={vec(0, height)}
-        color="rgba(0, 0, 0, 0.5)"
-        strokeWidth={2}
-      />
-      <Group transform={transform}>
-        <Circle cx={0} cy={0} r={cursorRadius} color="black" />
+      {!hideCursorLine && (
+        <CursorLine
+          x={x}
+          height={height}
+          cursorLineColor={cursorLineColor}
+          cursorLineWidth={cursorLineWidth}
+        />
+      )}
+      <Group transform={cursorTransform}>
+        <Circle cx={0} cy={0} r={cursorRadius} color={cursorColor} />
       </Group>
     </>
   );

src/components/LineChart/computations.ts

@@ -10,7 +10,6 @@ interface RoundProps {
 
 const round = ({ value, precision = 0 }: RoundProps): number => {
   "worklet";
-
   const p = Math.pow(10, precision);
   return Math.round(value * p) / p;
 };
@@ -23,7 +22,6 @@ interface LinearYForXProps {
 
 const linearYForX = ({ path, x, precision = 2 }: LinearYForXProps): number => {
   "worklet";
-
   const cmds = path.toCmds();
   let from: Vector = vec(0, 0);
   let found = false;
@@ -33,8 +31,10 @@ const linearYForX = ({ path, x, precision = 2 }: LinearYForXProps): number => {
     const cmd = cmds[i];
     if (cmd == null) break;
     if (cmd[0] === PathVerb.Move) {
+      // If the path starts with a move command, set the from point
       from = vec(cmd[1], cmd[2]);
     } else if (cmd[0] === PathVerb.Line) {
+      // If the path contains a line command, check if the x value is within the bounds of the line
       const to = vec(cmd[1], cmd[2]);
       if ((x >= from.x && x <= to.x) || (x <= from.x && x >= to.x)) {
         const t = (x - from.x) / (to.x - from.x);
@@ -84,7 +84,6 @@ export const computePath = ({
   curveType,
 }: ComputePathProps): SkPath => {
   "worklet";
-
   const straightLine = Skia.Path.Make()
     .moveTo(0, height / 2)
     .lineTo(width, height / 2);