rn-native-ios-charts 0.1.0

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "rn-native-ios-charts",
+  "version": "0.1.0",
+  "description": "Native SwiftUI Charts for React Native / Expo. iOS-only, zero-compromise charts that bypass the limitations of cross-platform chart libraries.",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "keywords": [
+    "react-native",
+    "expo",
+    "swiftui",
+    "swift-charts",
+    "ios",
+    "chart",
+    "pie",
+    "donut",
+    "line",
+    "area"
+  ],
+  "author": "Abdalla Emadeldin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abdallaemadeldin/rn-native-ios-charts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/abdallaemadeldin/rn-native-ios-charts/issues"
+  },
+  "homepage": "https://github.com/abdallaemadeldin/rn-native-ios-charts#readme",
+  "files": [
+    "src",
+    "ios",
+    "docs",
+    "expo-module.config.json",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/AreaChart.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import type { ColorValue, ViewStyle } from "react-native";
+import { Chart } from "./Chart";
+import type {
+  AxisConfig,
+  DataPoint,
+  Gradient,
+  Interpolation,
+  LegendConfig,
+  SelectedPoint,
+  TooltipConfig,
+} from "./types";
+
+export type AreaDatum = { x: string; y: number; category?: string };
+
+export type AreaChartProps = {
+  data: AreaDatum[];
+  color?: ColorValue;
+  gradient?: Gradient;
+  interpolation?: Interpolation;
+  xAxis?: AxisConfig;
+  yAxis?: AxisConfig;
+  legend?: LegendConfig;
+  tooltip?: TooltipConfig;
+  onSelect?: (point: SelectedPoint) => void;
+  animate?: boolean;
+  style?: ViewStyle;
+};
+
+export function AreaChart({
+  data,
+  color,
+  gradient = { startOpacity: 0.35, endOpacity: 0.02 },
+  interpolation = "catmullRom",
+  xAxis,
+  yAxis,
+  legend,
+  tooltip,
+  onSelect,
+  animate,
+  style,
+}: AreaChartProps) {
+  const points: DataPoint[] = data.map((p) => ({
+    x: p.x,
+    y: p.y,
+    category: p.category,
+  }));
+  return (
+    <Chart
+      style={style}
+      animate={animate}
+      xAxis={xAxis}
+      yAxis={yAxis}
+      legend={legend}
+      tooltip={tooltip}
+      onSelect={onSelect}
+      marks={[
+        {
+          type: "area",
+          data: points,
+          color,
+          gradient,
+          interpolation,
+        },
+      ]}
+    />
+  );
+}

package/src/BarChart.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import type { ColorValue, ViewStyle } from "react-native";
+import { Chart } from "./Chart";
+import type {
+  AxisConfig,
+  DataPoint,
+  LegendConfig,
+  SelectedPoint,
+  TooltipConfig,
+} from "./types";
+
+export type BarDatum = {
+  x: string;
+  y: number;
+  /** Optional series key for grouped / colored bars. */
+  category?: string;
+  color?: ColorValue;
+};
+
+export type BarChartProps = {
+  data: BarDatum[];
+  color?: ColorValue;
+  cornerRadius?: number;
+  /** Fixed width per bar in pt. 0 = auto. */
+  barWidth?: number;
+  xAxis?: AxisConfig;
+  yAxis?: AxisConfig;
+  legend?: LegendConfig;
+  tooltip?: TooltipConfig;
+  onSelect?: (point: SelectedPoint) => void;
+  animate?: boolean;
+  style?: ViewStyle;
+};
+
+export function BarChart({
+  data,
+  color,
+  cornerRadius = 4,
+  barWidth,
+  xAxis,
+  yAxis,
+  legend,
+  tooltip,
+  onSelect,
+  animate,
+  style,
+}: BarChartProps) {
+  const points: DataPoint[] = data.map((d) => ({
+    x: d.x,
+    y: d.y,
+    category: d.category,
+    color: d.color,
+  }));
+  return (
+    <Chart
+      style={style}
+      animate={animate}
+      xAxis={xAxis}
+      yAxis={yAxis}
+      legend={legend}
+      tooltip={tooltip}
+      onSelect={onSelect}
+      marks={[
+        {
+          type: "bar",
+          data: points,
+          color,
+          cornerRadius,
+          barWidth,
+        },
+      ]}
+    />
+  );
+}

package/src/Chart.tsx

@@ -0,0 +1,50 @@
+import { requireNativeView } from "expo";
+import * as React from "react";
+import { Platform, View } from "react-native";
+import type { ChartProps, SelectedPoint } from "./types";
+
+/**
+ * Generic SwiftUI Charts view. Render any combination of bar / line /
+ * area / point / rectangle / rule / sector marks by passing them in
+ * the `marks` array. iOS-only — on other platforms this is a no-op
+ * placeholder `View`, so consuming code can mount it unconditionally
+ * and feature-detect via `Platform.OS`.
+ *
+ * Use the convenience wrappers (`PieChart`, `LineChart`, `BarChart`,
+ * etc.) for common single-mark cases — they all delegate here.
+ */
+
+// Expo Modules events deliver the payload wrapped in `nativeEvent`.
+// We re-shape it into the public `SelectedPoint` type at the boundary
+// so consumers don't have to deal with the bridge layout.
+type NativeChartProps = Omit<ChartProps, "onSelect"> & {
+  onSelect?: (event: {
+    nativeEvent: { x?: string; y?: number };
+  }) => void;
+};
+
+const NativeChart =
+  Platform.OS === "ios"
+    ? requireNativeView<NativeChartProps>("NativeIosCharts", "ChartView")
+    : null;
+
+export function Chart(props: ChartProps) {
+  if (!NativeChart) {
+    return <View style={props.style} />;
+  }
+
+  const { onSelect, ...rest } = props;
+
+  // Wrap the user's callback to unwrap the native event shape. Empty
+  // payloads (`{}`) signal a cleared selection — emit `null` for them.
+  const handleSelect = onSelect
+    ? (event: { nativeEvent: { x?: string; y?: number } }) => {
+        const { x, y } = event.nativeEvent ?? {};
+        const point: SelectedPoint =
+          typeof x === "string" && typeof y === "number" ? { x, y } : null;
+        onSelect(point);
+      }
+    : undefined;
+
+  return <NativeChart {...rest} onSelect={handleSelect} />;
+}

package/src/LineChart.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import type { ColorValue, ViewStyle } from "react-native";
+import { Chart } from "./Chart";
+import type {
+  AxisConfig,
+  DataPoint,
+  Gradient,
+  Interpolation,
+  LegendConfig,
+  SelectedPoint,
+  Symbol,
+  TooltipConfig,
+} from "./types";
+
+export type LinePoint = { x: string; y: number; category?: string };
+
+export type LineChartProps = {
+  data: LinePoint[];
+  color?: ColorValue;
+  lineWidth?: number;
+  interpolation?: Interpolation;
+  dashArray?: number[];
+  /**
+   * Set this to render a gradient-filled area beneath the line as
+   * well — the standard "shaded line chart" pattern. Same shape as
+   * the generic `Gradient`.
+   */
+  area?: Gradient | boolean;
+  showPoints?: boolean;
+  symbol?: Symbol;
+  symbolSize?: number;
+  xAxis?: AxisConfig;
+  yAxis?: AxisConfig;
+  legend?: LegendConfig;
+  tooltip?: TooltipConfig;
+  onSelect?: (point: SelectedPoint) => void;
+  animate?: boolean;
+  style?: ViewStyle;
+};
+
+export function LineChart({
+  data,
+  color,
+  lineWidth = 2.5,
+  interpolation = "catmullRom",
+  dashArray,
+  area,
+  showPoints,
+  symbol,
+  symbolSize,
+  xAxis,
+  yAxis,
+  legend,
+  tooltip,
+  onSelect,
+  animate,
+  style,
+}: LineChartProps) {
+  const points: DataPoint[] = data.map((p) => ({
+    x: p.x,
+    y: p.y,
+    category: p.category,
+  }));
+
+  const marks = [];
+
+  // Render the area FIRST (so the line draws on top).
+  if (area) {
+    const gradient: Gradient =
+      typeof area === "object" ? area : { startOpacity: 0.35, endOpacity: 0.02 };
+    marks.push({
+      type: "area" as const,
+      data: points,
+      color,
+      gradient,
+      interpolation,
+    });
+  }
+
+  marks.push({
+    type: "line" as const,
+    data: points,
+    color,
+    lineWidth,
+    dashArray,
+    interpolation,
+    showPoints,
+    symbol,
+    symbolSize,
+  });
+
+  return (
+    <Chart
+      style={style}
+      animate={animate}
+      xAxis={xAxis}
+      yAxis={yAxis}
+      legend={legend}
+      tooltip={tooltip}
+      onSelect={onSelect}
+      marks={marks}
+    />
+  );
+}

package/src/PieChart.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import type { ColorValue, ViewStyle } from "react-native";
+import { Chart } from "./Chart";
+import type {
+  CenterLabel,
+  DataPoint,
+  LegendConfig,
+  SelectedPoint,
+} from "./types";
+
+export type PieSlice = {
+  label: string;
+  value: number;
+  color?: ColorValue;
+};
+
+export type PieChartProps = {
+  data: PieSlice[];
+  /** Donut hole ratio, 0–1. 0 = full pie, 0.62 = thin donut. Default 0.62. */
+  innerRadius?: number;
+  /** Outer radius ratio, 0–1. 0 = auto. */
+  outerRadius?: number;
+  /** Gap between adjacent slices, pt. Default 2. */
+  angularInset?: number;
+  cornerRadius?: number;
+  /** Center label rendered inside the donut hole. */
+  centerLabel?: CenterLabel;
+  legend?: LegendConfig;
+  /**
+   * Fires when the user taps a slice. The payload `x` is the slice
+   * label and `y` is its value. `null` when the selection clears.
+   * No visual callout is drawn — wire `centerLabel` from this event
+   * to update the donut hole copy.
+   */
+  onSelect?: (point: SelectedPoint) => void;
+  animate?: boolean;
+  style?: ViewStyle;
+};
+
+export function PieChart({
+  data,
+  innerRadius = 0.62,
+  outerRadius,
+  angularInset = 2,
+  cornerRadius = 2,
+  centerLabel,
+  legend,
+  onSelect,
+  animate,
+  style,
+}: PieChartProps) {
+  const points: DataPoint[] = data.map((s) => ({
+    x: s.label,
+    y: s.value,
+    color: s.color,
+    category: s.label,
+  }));
+  return (
+    <Chart
+      style={style}
+      animate={animate}
+      legend={legend ?? { hidden: true }}
+      centerLabel={centerLabel}
+      onSelect={onSelect}
+      marks={[
+        {
+          type: "sector",
+          data: points,
+          innerRadius,
+          outerRadius,
+          angularInset,
+          cornerRadius,
+        },
+      ]}
+    />
+  );
+}

package/src/RangeBarChart.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import type { ColorValue, ViewStyle } from "react-native";
+import { Chart } from "./Chart";
+import type {
+  AxisConfig,
+  DataPoint,
+  LegendConfig,
+  SelectedPoint,
+  TooltipConfig,
+} from "./types";
+
+export type RangeDatum = {
+  x: string;
+  yStart: number;
+  yEnd: number;
+  category?: string;
+  color?: ColorValue;
+};
+
+export type RangeBarChartProps = {
+  data: RangeDatum[];
+  color?: ColorValue;
+  cornerRadius?: number;
+  xAxis?: AxisConfig;
+  yAxis?: AxisConfig;
+  legend?: LegendConfig;
+  tooltip?: TooltipConfig;
+  onSelect?: (point: SelectedPoint) => void;
+  animate?: boolean;
+  style?: ViewStyle;
+};
+
+/**
+ * Range bars — drawn as `RectangleMark` between `yStart` and `yEnd`.
+ * Use for candlestick / OHLC visualisations, Gantt-style timelines,
+ * or low/high bands.
+ */
+export function RangeBarChart({
+  data,
+  color,
+  cornerRadius = 2,
+  xAxis,
+  yAxis,
+  legend,
+  tooltip,
+  onSelect,
+  animate,
+  style,
+}: RangeBarChartProps) {
+  const points: DataPoint[] = data.map((d) => ({
+    x: d.x,
+    y: d.yStart,
+    yEnd: d.yEnd,
+    category: d.category,
+    color: d.color,
+  }));
+  return (
+    <Chart
+      style={style}
+      animate={animate}
+      xAxis={xAxis}
+      yAxis={yAxis}
+      legend={legend}
+      tooltip={tooltip}
+      onSelect={onSelect}
+      marks={[
+        {
+          type: "rectangle",
+          data: points,
+          color,
+          cornerRadius,
+        },
+      ]}
+    />
+  );
+}

package/src/ScatterChart.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import type { ColorValue, ViewStyle } from "react-native";
+import { Chart } from "./Chart";
+import type {
+  AxisConfig,
+  DataPoint,
+  LegendConfig,
+  SelectedPoint,
+  Symbol,
+  TooltipConfig,
+} from "./types";
+
+export type ScatterDatum = {
+  x: string;
+  y: number;
+  category?: string;
+  color?: ColorValue;
+};
+
+export type ScatterChartProps = {
+  data: ScatterDatum[];
+  color?: ColorValue;
+  symbol?: Symbol;
+  symbolSize?: number;
+  xAxis?: AxisConfig;
+  yAxis?: AxisConfig;
+  legend?: LegendConfig;
+  tooltip?: TooltipConfig;
+  onSelect?: (point: SelectedPoint) => void;
+  animate?: boolean;
+  style?: ViewStyle;
+};
+
+export function ScatterChart({
+  data,
+  color,
+  symbol = "circle",
+  symbolSize = 36,
+  xAxis,
+  yAxis,
+  legend,
+  tooltip,
+  onSelect,
+  animate,
+  style,
+}: ScatterChartProps) {
+  const points: DataPoint[] = data.map((d) => ({
+    x: d.x,
+    y: d.y,
+    category: d.category,
+    color: d.color,
+  }));
+  return (
+    <Chart
+      style={style}
+      animate={animate}
+      xAxis={xAxis}
+      yAxis={yAxis}
+      legend={legend}
+      tooltip={tooltip}
+      onSelect={onSelect}
+      marks={[
+        {
+          type: "point",
+          data: points,
+          color,
+          symbol,
+          symbolSize,
+        },
+      ]}
+    />
+  );
+}

package/src/index.ts

@@ -0,0 +1,43 @@
+// ── Runtime feature detection ──
+export { isChartSupported } from "./support";
+
+// ── Generic chart (any combination of marks) ──
+export { Chart } from "./Chart";
+
+// ── Convenience wrappers for the common single-mark cases ──
+export { PieChart } from "./PieChart";
+export type { PieChartProps, PieSlice } from "./PieChart";
+
+export { LineChart } from "./LineChart";
+export type { LineChartProps, LinePoint } from "./LineChart";
+
+export { AreaChart } from "./AreaChart";
+export type { AreaChartProps, AreaDatum } from "./AreaChart";
+
+export { BarChart } from "./BarChart";
+export type { BarChartProps, BarDatum } from "./BarChart";
+
+export { ScatterChart } from "./ScatterChart";
+export type { ScatterChartProps, ScatterDatum } from "./ScatterChart";
+
+export { RangeBarChart } from "./RangeBarChart";
+export type { RangeBarChartProps, RangeDatum } from "./RangeBarChart";
+
+// ── Public types — use these to assemble your own marks for the
+//    generic `<Chart>` component or to type-share data across screens.
+export type {
+  AxisConfig,
+  CenterLabel,
+  ChartProps,
+  DataPoint,
+  Gradient,
+  GradientStop,
+  Interpolation,
+  LegendConfig,
+  LineCap,
+  Mark,
+  MarkType,
+  SelectedPoint,
+  Symbol,
+  TooltipConfig,
+} from "./types";

package/src/support.ts

@@ -0,0 +1,30 @@
+import { Platform } from "react-native";
+
+/**
+ * Runtime feature-detection helper. Returns true only on devices
+ * that can actually render the charts — iOS 17 and above. Use it to
+ * mount a fallback chart library (or a placeholder) on older iOS
+ * versions and on Android / web:
+ *
+ * ```tsx
+ * import { isChartSupported, LineChart } from "rn-native-ios-charts";
+ * import { OtherLineChart } from "some-cross-platform-chart-lib";
+ *
+ * export function MyLineChart(props) {
+ *   if (isChartSupported()) return <LineChart {...props} />;
+ *   return <OtherLineChart {...props} />;
+ * }
+ * ```
+ *
+ * The check is cheap (a parse of `Platform.Version`) and stable
+ * across the lifetime of the process — safe to call inline in render.
+ */
+export function isChartSupported(): boolean {
+  if (Platform.OS !== "ios") return false;
+  // Platform.Version on iOS is a string like "17.4". Parsing the
+  // leading integer is enough; SwiftUI Charts' unified API
+  // (`Chart {}`, `SectorMark`, `chartBackground`,
+  // `chartXSelection`) all became available in iOS 17.0.
+  const major = parseInt(String(Platform.Version), 10);
+  return Number.isFinite(major) && major >= 17;
+}