react-native-financial-charts 1.0.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Tony-Starkus
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,309 @@
+# 📈 React Native Finance Kit
+
+<p align="center">
+  <img src="./docs/assets/0.gif" alt="Interactive Line" />
+</p>
+
+A **high-performance** financial charting library for React Native, built on the power of **Skia** and **Reanimated**.
+
+Designed to render animations at **60/120 FPS** on the UI thread, with absolute touch precision (pixel-perfect) and support for complex gesture interactions.
+
+## ✨ Highlights
+
+- 🚀 **Native Performance:** GPU rendering via Skia.
+- 👆 **Smooth Interaction:** Gestures run entirely on the UI Thread (Worklets).
+- 🎯 **Pixel-Perfect Precision:** Hybrid algorithm using _Lookup Table_ + _Catmull-Rom_ ensures the cursor never drifts off the line.
+- 🎨 **Customizable:** Colors, gradients, tooltips, and dimensions are fully adjustable.
+
+## 📦 Installation
+
+Since this library relies on powerful native modules, you must install the **Peer Dependencies**:
+
+```bash
+yarn add react-native-finance-kit
+
+# Install required dependencies
+yarn add @shopify/react-native-skia react-native-reanimated react-native-gesture-handler d3
+```
+
+> **Note for Expo:**
+> If you are using Expo Go, ensure that the Skia and Reanimated versions are compatible with your SDK.
+> It's recommended using **Development Builds** (`npx expo run:android`) for the best performance.
+
+## ⚡ Basic Usage
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import { Chart } from 'react-native-finance-kit';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+const data = [
+  { timestamp: 1625945400000, value: 33575.25 },
+  { timestamp: 1625946300000, value: 33545.25 },
+  { timestamp: 1625947200000, value: 33510.25 },
+  { timestamp: 1625948100000, value: 33215.25 },
+];
+
+export default function App() {
+  return (
+    <View
+      style={{ flex: 1, justifyContent: 'center', backgroundColor: '#000' }}
+    >
+      <GestureHandlerRootView style={{ flex: 1, marginTop: 200 }}>
+        <Chart.Root data={data} height={250}>
+          <Chart.Canvas>
+            <Chart.Area />
+            <Chart.Line />
+            <Chart.Cursor />
+          </Chart.Canvas>
+
+          <Chart.Tooltip.Value />
+          <Chart.Tooltip.Date />
+        </Chart.Root>
+      </GestureHandlerRootView>
+    </View>
+  );
+}
+```
+
+## 💡 Examples
+
+Here are some common patterns to customize the chart to your needs.
+
+### 1. Custom Colors (The "Bitcoin" Look)
+
+Customize the line color and the area gradient to match specific assets (e.g., Orange for BTC, Blue for ETH).
+
+```tsx
+<Chart.Root data={data}>
+  <Chart.Canvas>
+    <Chart.Area
+      // Gradient from transparent Orange to transparent
+      gradientColors={['#F7931A50', '#F7931A00']}
+    />
+    <Chart.Line
+      colors={['#F7931A']} // Solid Orange
+      strokeWidth={4}
+    />
+    <Chart.Cursor crosshairColor="#F7931A" />
+  </Chart.Canvas>
+</Chart.Root>
+```
+
+![Chart Sample 1](./docs/assets/1.png)
+
+### 2. Minimal Sparkline
+
+A small, simplified chart without tooltips or padding, perfect for lists or crypto tickers.
+
+```tsx
+<Chart.Root
+  data={data}
+  height={60}
+  width={120}
+  padding={0} // Remove padding to touch edges
+>
+  <Chart.Canvas>
+    <Chart.Line
+      strokeWidth={2}
+      colors={['#10B981', '#10B981', '#10B981', '#10B981']}
+    />
+  </Chart.Canvas>
+  {/* No Tooltips, no Cursor */}
+</Chart.Root>
+```
+
+![Chart Sample 2](./docs/assets/2.png)
+
+### 3. Custom Currency Formatting (USD/EUR)
+
+Use a Worklet to format values dynamically on the UI thread.
+
+```tsx
+const formatUSD = (value: number) => {
+  'worklet';
+  return `$ ${value.toFixed(2)}`;
+};
+
+const formatEUR = (value: number) => {
+  'worklet';
+  return `€ ${value.toFixed(2).replace('.', ',')}`;
+};
+
+// Usage
+<Chart.Root data={data}>
+  <Chart.Canvas>
+    <Chart.Area />
+    <Chart.Line />
+    <Chart.Cursor />
+  </Chart.Canvas>
+  <Chart.ToolTip.Value format={formatUSD} />
+</Chart.Root>;
+```
+
+![Chart Sample 3](./docs/assets/3.gif)
+
+### 4. Customizing the Tooltip Style
+
+Change the background color and border radius of the floating tooltip.
+
+```tsx
+<Chart.Root data={data}>
+  <Chart.Canvas>
+    <Chart.Area />
+    <Chart.Line />
+    <Chart.Cursor />
+  </Chart.Canvas>
+  <Chart.Tooltip.Value
+    containerStyle={{
+      backgroundColor: 'white',
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: '#E5E7EB',
+    }}
+    style={{
+      color: 'black',
+      fontSize: 14,
+    }}
+  />
+</Chart.Root>
+```
+
+![Chart Sample 4](./docs/assets/4.gif)
+
+## 🛠️ API Reference
+
+### `<Chart.Root />`
+
+The parent component that manages state and calculations.
+
+| Prop             | Type          | Default        | Description                              |
+| ---------------- | ------------- | -------------- | ---------------------------------------- |
+| `data`           | `DataPoint[]` | **Required**   | `{ timestamp: number, value: number }[]` |
+| `height`         | `number`      | `250`          | Total height of the chart                |
+| `width`          | `number`      | `Screen Width` | Total width of the chart                 |
+| `padding`        | `number`      | `20`           | Internal horizontal padding              |
+| `containerStyle` | `ViewStyle`   | `{}`           | Styles for the main container            |
+
+### `<Chart.Canvas />`
+
+The wrapper for all Skia elements.
+
+| Prop       | Type              | Default | Description                             |
+| ---------- | ----------------- | ------- | --------------------------------------- |
+| `children` | `React.ReactNode` | - - -   | Children element. Must be Skia elements |
+
+### `<Chart.Line />`
+
+Draws the main chart line.
+
+| Prop          | Type       | Default                                        | Description                    |
+| ------------- | ---------- | ---------------------------------------------- | ------------------------------ |
+| `strokeWidth` | `number`   | `3`                                            | Line thickness                 |
+| `colors`      | `string[]` | `['#00E396', '#00E396', '#EA3943', '#EA3943']` | Gradient colors (Top → Bottom) |
+
+### `<Chart.Baseline />`
+
+Draws a dashed horizontal line at the starting value (baseline). Useful for visualizing profit/loss.
+
+| Prop        | Type      | Default   | Description                                              |
+| ----------- | --------- | --------- | -------------------------------------------------------- |
+| `color`     | `string`  | `#858CA2` | Color of the dashed line and starting dot.               |
+| `showLabel` | `boolean` | `true`    | Whether to show the label chip with the formatted value. |
+
+### `<Chart.Area />`
+
+Draws the gradient fill below the line.
+
+| Prop             | Type       | Default                            | Description                                                                      |
+| ---------------- | ---------- | ---------------------------------- | -------------------------------------------------------------------------------- |
+| `gradientColors` | `string[]` | `['#000', '#000', '#000', '#000']` | Array of 4 colors for the area gradient (Top -> Baseline -> Baseline -> Bottom). |
+
+### `<Chart.Cursor />`
+
+The interactive cursor that follows the finger.
+
+| Prop             | Type     | Default   | Description                          |
+| ---------------- | -------- | --------- | ------------------------------------ |
+| `crosshairColor` | `string` | `'white'` | Color of the vertical line           |
+| `circleColor`    | `string` | `'white'` | Border color of the indicator circle |
+
+### `<Chart.Tooltip.Value />`
+
+Displays the current interpolated value (price, score, etc).
+
+| Prop             | Type                        | Default  | Description             |
+| ---------------- | --------------------------- | -------- | ----------------------- |
+| `format`         | `(value: number) => string` | `$ 0.00` | Format function         |
+| `style`          | `TextStyle`                 | `{}`     | Inner text style        |
+| `containerStyle` | `ViewStyle`                 | `{}`     | Tooltip container style |
+
+### `<Chart.Tooltip.Date />`
+
+Displays the current date/time.
+
+| Prop             | Type                        | Default      | Description             |
+| ---------------- | --------------------------- | ------------ | ----------------------- |
+| `style`          | `TextStyle`                 | `{}`         | Inner text style        |
+| `containerStyle` | `ViewStyle`                 | `{}`         | Tooltip container style |
+| `format`         | `(value: number) => string` | `DD/MM/YYYY` | Timestamp formatter     |
+
+## 🎨 Advanced Customization
+
+### Formatting Currency (USD)
+
+```ts
+const formatUSD = (value: number) => {
+  'worklet';
+  return `$ ${value.toFixed(2)}`;
+};
+
+<Chart.Tooltip.Value format={formatUSD} />;
+```
+
+### Styling the Container
+
+```tsx
+<Chart.Root
+  data={data}
+  containerStyle={{
+    backgroundColor: '#1E1E2D',
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#333',
+  }}
+>
+```
+
+## 🐛 Troubleshooting
+
+**Error: `missing libsvg.a` or `skia` crash**
+
+1. `cd android && ./gradlew clean`
+2. `cd .. && rm -rf node_modules && yarn install`
+3. Ensure `@shopify/react-native-skia` is compatible with your RN version.
+
+**Error: `Reanimated failed to create a worklet`**
+
+Add to `babel.config.js`:
+
+```js
+plugins: ['react-native-reanimated/plugin'],
+```
+
+## 🤝 Contributing
+
+1. Fork the project
+2. Create your Feature Branch (`git checkout -b feature/NewFeature`)
+3. Commit your changes (`git commit -m 'Add some NewFeature'`)
+4. Push to the Branch (`git push origin feature/NewFeature`)
+5. Open a Pull Request
+
+---
+
+This library was inspired by the awesome [react-native-wagmi-charts](https://github.com/coinjar/react-native-wagmi-charts). Ideally, I aimed to create a performant Skia-based alternative with a similar easy-to-use API.
+
+## 📄 License
+
+Distributed under the MIT License. See `LICENSE` for more information.

package/lib/module/ChartContext.js

@@ -0,0 +1,269 @@
+"use strict";
+
+import React, { createContext, useContext, useMemo } from 'react';
+import { Dimensions, StyleSheet, View } from 'react-native';
+import * as d3 from 'd3';
+import { Skia } from '@shopify/react-native-skia';
+import { useSharedValue } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { solveCatmullRom } from "./utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const MOCK_SHARED_VAL_NUM = {
+  value: 0
+};
+const MOCK_SHARED_VAL_BOOL = {
+  value: false
+};
+const EMPTY_PATH = Skia.Path.Make();
+const WINDOW_WIDTH = Dimensions.get('window').width;
+const INITIAL_CONTEXT = {
+  originalData: [],
+  width: WINDOW_WIDTH,
+  height: 250,
+  padding: 20,
+  domainX: [0, 1],
+  domainY: [0, 1],
+  yRange: [0, 1],
+  xScale: d3.scaleTime(),
+  yScale: d3.scaleLinear(),
+  path: EMPTY_PATH,
+  areaPath: EMPTY_PATH,
+  baselineY: 0,
+  gradientColors: ['#000', '#000', '#000', '#000'],
+  gradientPositions: [0, 0.5, 0.5, 1],
+  currentX: MOCK_SHARED_VAL_NUM,
+  currentY: MOCK_SHARED_VAL_NUM,
+  isActive: MOCK_SHARED_VAL_BOOL,
+  currentValue: MOCK_SHARED_VAL_NUM,
+  currentTimestamp: MOCK_SHARED_VAL_NUM,
+  // @ts-ignore
+  yMap: new Float32Array(0),
+  // @ts-ignore
+  valueMap: new Float32Array(0)
+};
+export const ChartContext = /*#__PURE__*/createContext(INITIAL_CONTEXT);
+const ChartProvider = ({
+  data,
+  width = Dimensions.get('window').width,
+  height = 250,
+  padding = 20,
+  containerStyle,
+  children
+}) => {
+  // Initialize Reanimated shared values
+  const currentX = useSharedValue(0);
+  const currentY = useSharedValue(0);
+  const isActive = useSharedValue(false);
+  const currentValue = useSharedValue(0);
+  const currentTimestamp = useSharedValue(0);
+
+  // useMemo: "Only execute this heavy logic if data or screen size changes"
+  const processedContext = useMemo(() => {
+    // 1. Safety validations (prevent crashes with empty array)
+    if (!data || data.length < 2 || width === 0) {
+      return {
+        ...INITIAL_CONTEXT,
+        originalData: data || [],
+        width: width || WINDOW_WIDTH,
+        height,
+        padding,
+        currentX,
+        currentY,
+        isActive,
+        currentValue,
+        currentTimestamp
+      };
+    }
+
+    // 2. Extract Data Limits (Min/Max)
+    const timestamps = data.map(d => d.timestamp);
+    const values = data.map(d => d.value);
+    const minTime = Math.min(...timestamps);
+    const maxTime = Math.max(...timestamps);
+    const minValue = Math.min(...values);
+    const maxValue = Math.max(...values);
+
+    // 3. Define Drawing Area (with vertical "breathing room")
+    const verticalSquish = height * 0.15; // Leave 15% margin
+    const minRangeY = height - padding - verticalSquish;
+    const maxRangeY = padding + verticalSquish;
+    const safeMinRangeY = Math.max(minRangeY, maxRangeY + 1);
+    const domainYMin = minValue;
+    const domainYMax = maxValue;
+
+    // 4. Create D3 Scales (Unit Converters)
+    const xScale = d3.scaleTime().domain([minTime, maxTime]).range([padding, width - padding]);
+    const yScale = d3.scaleLinear().domain([domainYMin, domainYMax]).range([safeMinRangeY, maxRangeY]);
+    const firstValue = data[0]?.value || 0;
+    const baselineY = yScale(firstValue);
+
+    // --- THE BIG MAGIC: MANUAL PATH AND MAP GENERATION ---
+    // Instead of asking D3 to draw the line and then trying to guess where it is,
+    // we calculate PIXEL BY PIXEL where the line should pass.
+    // We save this in two places:
+    //   1. skiaPath: To draw on the screen.
+    //   2. yMap / valueMap: Giant arrays for the finger to query instantly.
+
+    const skiaPath = Skia.Path.Make();
+    if (data.length > 0) {
+      skiaPath.moveTo(xScale(data[0]?.timestamp || 0), yScale(data[0]?.value || 0));
+    }
+
+    // Create typed arrays (Float32) the exact size of the screen width.
+    // This is extremely efficient for memory and reading.
+    const mapSize = Math.ceil(width);
+    const yMap = new Float32Array(mapSize).fill(-1);
+    const valueMap = new Float32Array(mapSize).fill(-1);
+    const totalPoints = data.length - 1;
+    const xPixelStart = padding;
+    const xPixelEnd = width - padding;
+    const xTotalRange = xPixelEnd - xPixelStart;
+
+    // === THE MAIN LOOP ===
+    // We iterate through every X coordinate on the screen (0, 1, 2... 400).
+    for (let x = 0; x < width; x++) {
+      // If we are outside the chart's useful area (margins), skip.
+      if (x < xPixelStart || x > xPixelEnd) continue;
+
+      // STEP A: Discover where we are on the timeline.
+      // progress = 0.5 means we are exactly in the middle of the chart.
+      const progress = (x - xPixelStart) / xTotalRange;
+
+      // STEP B: Find which data points surround us.
+      const floatIndex = progress * totalPoints;
+      const index = Math.floor(floatIndex); // Index of the point to the left
+      const safeIndex = Math.min(index, totalPoints - 1);
+
+      // STEP C: Local progress (t) between current and next point.
+      const t = floatIndex - safeIndex;
+
+      // STEP D: Select the 4 control points for Catmull-Rom.
+      // p1 and p2 are the points we are passing between.
+      const p1 = data[safeIndex]?.value || 0;
+      const p2 = data[safeIndex + 1]?.value ?? p1;
+
+      // p0 and p3 are the "distant neighbors" needed to calculate the curve.
+      // If they don't exist (at edges), we duplicate the neighbor (standard D3 strategy).
+      const p0 = safeIndex > 0 ? data[safeIndex - 1]?.value || 0 : p1;
+      const p3 = safeIndex < totalPoints - 1 ? data[safeIndex + 2]?.value || 0 : p2;
+
+      // STEP E: Calculate Exact Interpolated Value
+      const interpolatedValue = solveCatmullRom(p0, p1, p2, p3, t);
+      const interpolatedY = yScale(interpolatedValue);
+
+      // STEP F: Save to maps and drawing
+      yMap[x] = interpolatedY; // Height Map
+      valueMap[x] = interpolatedValue; // Value Map
+
+      // Add line to visual drawing. Since we do this pixel by pixel, the curve is perfect.
+      skiaPath.lineTo(x, interpolatedY);
+    }
+
+    // Close the area (to create the gradient effect below the line)
+    const areaPath = skiaPath.copy();
+    areaPath.lineTo(width - padding, baselineY); // Down to base
+    areaPath.lineTo(padding, baselineY); // Back to start
+    areaPath.close();
+
+    // Gradient calculation (Green on top, Red on bottom)
+    const safeHeight = height || 1;
+    const splitRatio = Math.max(0, Math.min(1, baselineY / safeHeight));
+    return {
+      originalData: data,
+      width,
+      height,
+      padding,
+      domainX: [minTime, maxTime],
+      domainY: [domainYMin, domainYMax],
+      yRange: [safeMinRangeY, maxRangeY],
+      xScale,
+      yScale,
+      path: skiaPath,
+      areaPath: areaPath,
+      baselineY: baselineY || 0,
+      gradientColors: ['#00E396E6', '#00E39600', '#EA394300', '#EA394326'],
+      gradientPositions: [0, splitRatio, splitRatio, 1],
+      currentX,
+      currentY,
+      isActive,
+      currentValue,
+      currentTimestamp,
+      yMap,
+      valueMap
+    };
+  }, [data, width, height, padding, currentX, currentY, isActive, currentValue, currentTimestamp]);
+
+  // --- GESTURE HANDLER (USER INTERACTION) ---
+  // This function runs on the UI Thread (Worklet). It is critical for performance.
+  // It DOES NOT RECALCULATE math. It simply reads the map we created above.
+  const onGestureEvent = touchX => {
+    'worklet';
+
+    // Directive for Reanimated to compile this separately.
+    if (!processedContext.yMap || processedContext.yMap.length === 0) return;
+
+    // 1. Limit touch to chart boundaries (Clamp)
+    const x = Math.max(padding, Math.min(touchX, width - padding));
+    currentX.value = x;
+
+    // 2. DIRECT LOOKUP (O(1) Complexity - Instant)
+    // Since we created a map where index = pixel X, we just round the touch X
+    // and grab the value from the array. No complex math here!
+    const xIndex = Math.round(x);
+
+    // @ts-ignore - Direct access to TypedArray on UI thread
+    const preCalculatedY = processedContext.yMap[xIndex];
+    // @ts-ignore
+    const preCalculatedValue = processedContext.valueMap[xIndex];
+
+    // If we found a valid value in the map, update reactive variables.
+    if (preCalculatedY !== undefined && preCalculatedY !== -1 && preCalculatedValue) {
+      currentY.value = preCalculatedY;
+      currentValue.value = preCalculatedValue;
+    }
+
+    // 3. Timestamp (Time is linear, so we can mathematically calculate without issues)
+    const xRangeStart = padding;
+    const xRangeEnd = width - padding;
+    const progress = (x - xRangeStart) / (xRangeEnd - xRangeStart);
+    const [minTime, maxTime] = processedContext.domainX;
+    currentTimestamp.value = minTime + progress * (maxTime - minTime);
+  };
+
+  // Gesture Configuration
+  const gesture = Gesture.Pan().onBegin(e => {
+    isActive.value = true;
+    onGestureEvent(e.x);
+  }).onChange(e => {
+    onGestureEvent(e.x);
+  }).onFinalize(() => {
+    isActive.value = false;
+  });
+  return /*#__PURE__*/_jsx(ChartContext.Provider, {
+    value: processedContext,
+    children: /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: gesture,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.container, containerStyle],
+        children: children
+      })
+    })
+  });
+};
+export const useChart = () => {
+  const context = useContext(ChartContext);
+  if (!context) {
+    throw new Error('[ChartContext]: the useChart hook must be used inside ChartContext provider');
+  }
+  return context;
+};
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#17171A',
+    borderRadius: 16,
+    position: 'relative',
+    overflow: 'hidden'
+  }
+});
+export default ChartProvider;
+//# sourceMappingURL=ChartContext.js.map

package/lib/module/ChartContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useContext","useMemo","Dimensions","StyleSheet","View","d3","Skia","useSharedValue","Gesture","GestureDetector","solveCatmullRom","jsx","_jsx","MOCK_SHARED_VAL_NUM","value","MOCK_SHARED_VAL_BOOL","EMPTY_PATH","Path","Make","WINDOW_WIDTH","get","width","INITIAL_CONTEXT","originalData","height","padding","domainX","domainY","yRange","xScale","scaleTime","yScale","scaleLinear","path","areaPath","baselineY","gradientColors","gradientPositions","currentX","currentY","isActive","currentValue","currentTimestamp","yMap","Float32Array","valueMap","ChartContext","ChartProvider","data","containerStyle","children","processedContext","length","timestamps","map","d","timestamp","values","minTime","Math","min","maxTime","max","minValue","maxValue","verticalSquish","minRangeY","maxRangeY","safeMinRangeY","domainYMin","domainYMax","domain","range","firstValue","skiaPath","moveTo","mapSize","ceil","fill","totalPoints","xPixelStart","xPixelEnd","xTotalRange","x","progress","floatIndex","index","floor","safeIndex","t","p1","p2","p0","p3","interpolatedValue","interpolatedY","lineTo","copy","close","safeHeight","splitRatio","onGestureEvent","touchX","xIndex","round","preCalculatedY","preCalculatedValue","undefined","xRangeStart","xRangeEnd","gesture","Pan","onBegin","e","onChange","onFinalize","Provider","style","styles","container","useChart","context","Error","create","backgroundColor","borderRadius","position","overflow"],"sourceRoot":"../../src","sources":["ChartContext.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/AnimatedTextInput.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import { TextInput } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+// This trick allows animate the 'text' property of a TextInput directly from Reanimated
+// Because React Native <Text> nodes cannot have their text updated 60 times a second without performance issues.
+// <TextInput editable={false} /> acts as a hgh-performance Label.
+
+// 1. Whitelist the native 'text' prop so Reanimated can modify it directly
+Animated.addWhitelistedNativeProps({
+  text: true
+});
+
+// 2. Extends the standard props to include 'text'
+
+// 3. Create the component
+const AnimatedTextInputComponent = Animated.createAnimatedComponent(TextInput);
+
+// 4. Export with strict typing casting
+// We cast it as a Component that accepts AnimatedTextInputProps
+const AnimatedTextInput = AnimatedTextInputComponent;
+export default AnimatedTextInput;
+//# sourceMappingURL=AnimatedTextInput.js.map

package/lib/module/components/AnimatedTextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TextInput","Animated","addWhitelistedNativeProps","text","AnimatedTextInputComponent","createAnimatedComponent","AnimatedTextInput"],"sourceRoot":"../../../src","sources":["components/AnimatedTextInput.tsx"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,cAAc;AAExC,OAAOC,QAAQ,MAA8B,yBAAyB;;AAEtE;AACA;AACA;;AAEA;AACAA,QAAQ,CAACC,yBAAyB,CAAC;EAAEC,IAAI,EAAE;AAAK,CAAC,CAAC;;AAElD;;AAKA;AACA,MAAMC,0BAA0B,GAAGH,QAAQ,CAACI,uBAAuB,CAACL,SAAS,CAAC;;AAE9E;AACA;AACA,MAAMM,iBAAiB,GACrBF,0BAEC;AAEH,eAAeE,iBAAiB","ignoreList":[]}

package/lib/module/components/ChartArea.js

@@ -0,0 +1,31 @@
+"use strict";
+
+import { LinearGradient, Path, vec } from '@shopify/react-native-skia';
+import { useChart } from "../ChartContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Draws the background gradient fill.
+ */
+const ChartArea = ({
+  gradientColors: _gradientColors
+}) => {
+  const {
+    areaPath,
+    height,
+    gradientColors,
+    gradientPositions
+  } = useChart();
+  _gradientColors = _gradientColors || gradientColors;
+  return /*#__PURE__*/_jsx(Path, {
+    path: areaPath,
+    style: "fill",
+    children: /*#__PURE__*/_jsx(LinearGradient, {
+      start: vec(0, 0),
+      end: vec(0, height),
+      colors: _gradientColors,
+      positions: gradientPositions
+    })
+  });
+};
+export default ChartArea;
+//# sourceMappingURL=ChartArea.js.map

package/lib/module/components/ChartArea.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["LinearGradient","Path","vec","useChart","jsx","_jsx","ChartArea","gradientColors","_gradientColors","areaPath","height","gradientPositions","path","style","children","start","end","colors","positions"],"sourceRoot":"../../../src","sources":["components/ChartArea.tsx"],"mappings":";;AAAA,SAASA,cAAc,EAAEC,IAAI,EAAEC,GAAG,QAAQ,4BAA4B;AACtE,SAASC,QAAQ,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAM3C;AACA;AACA;AACA,MAAMC,SAA2B,GAAGA,CAAC;EAAEC,cAAc,EAAEC;AAAgB,CAAC,KAAK;EAC3E,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEH,cAAc;IAAEI;EAAkB,CAAC,GAAGR,QAAQ,CAAC,CAAC;EAE1EK,eAAe,GAAGA,eAAe,IAAID,cAAc;EAEnD,oBACEF,IAAA,CAACJ,IAAI;IAACW,IAAI,EAAEH,QAAS;IAACI,KAAK,EAAC,MAAM;IAAAC,QAAA,eAChCT,IAAA,CAACL,cAAc;MACbe,KAAK,EAAEb,GAAG,CAAC,CAAC,EAAE,CAAC,CAAE;MACjBc,GAAG,EAAEd,GAAG,CAAC,CAAC,EAAEQ,MAAM,CAAE;MACpBO,MAAM,EAAET,eAAgB;MACxBU,SAAS,EAAEP;IAAkB,CAC9B;EAAC,CACE,CAAC;AAEX,CAAC;AAED,eAAeL,SAAS","ignoreList":[]}