Wuba React Native ECharts

https://github.com/wuba/react-native-echarts
Admin
A React Native implementation of Apache ECharts with support for both Skia and SVG rendering...
Tokens:34,434
Snippets:252
Trust Score:7.8
License:Apache-2.0
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Start the example app packager

Source: https://github.com/wuba/react-native-echarts/blob/main/CONTRIBUTING.md

Starts the Metro packager for the example app. Run from the root directory.

```sh
yarn example start
```

--------------------------------

### Run example app on Web

Source: https://github.com/wuba/react-native-echarts/blob/main/CONTRIBUTING.md

Runs the example app on Web. Run from the root directory.

```sh
yarn example web
```

--------------------------------

### Run example app on iOS

Source: https://github.com/wuba/react-native-echarts/blob/main/CONTRIBUTING.md

Runs the example app on iOS. Run from the root directory.

```sh
yarn example ios
```

--------------------------------

### Install dependencies

Source: https://github.com/wuba/react-native-echarts/blob/main/README.md

Install the core library and ECharts using yarn.

```sh
yarn add @wuba/react-native-echarts echarts
```

--------------------------------

### Run example app on Android

Source: https://github.com/wuba/react-native-echarts/blob/main/CONTRIBUTING.md

Runs the example app on Android. Run from the root directory.

```sh
yarn example android
```

--------------------------------

### Install dependencies with yarn

Source: https://github.com/wuba/react-native-echarts/blob/main/CONTRIBUTING.md

Installs the required dependencies for each package in the monorepo. Run from the root directory. Yarn workspaces are required; npm cannot be used without manually migrating.

```sh
yarn
```

--------------------------------

### Implement a basic chart component

Source: https://github.com/wuba/react-native-echarts/blob/main/README.md

Example showing how to register ECharts components, initialize the chart using the SvgChart renderer, and use it within a React component.

```js
// Choose your preferred renderer
// import { SkiaChart, SVGRenderer } from '@wuba/react-native-echarts';
import { SvgChart, SVGRenderer } from '@wuba/react-native-echarts';
import * as echarts from 'echarts/core';
import { useRef, useEffect } from 'react';
import {
  BarChart,
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from 'echarts/components';

// Register extensions
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  SVGRenderer,
  // ...
  BarChart,
])

const E_HEIGHT = 250;
const E_WIDTH = 300;

// Initialize
function ChartComponent({ option }) {
  const chartRef = useRef<any>(null);

  useEffect(() => {
    let chart: any;
    if (chartRef.current) {
      // @ts-ignore
      chart = echarts.init(chartRef.current, 'light', {
        renderer: 'svg',
        width: E_WIDTH,
        height: E_HEIGHT,
      });
      chart.setOption(option);
    }
    return () => chart?.dispose();
  }, [option]);

  // Choose your preferred chart component
  // return <SkiaChart ref={chartRef} />;
  return <SvgChart ref={chartRef} />;
}

// Component usage
export default function App() {
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
    ],
  }
  return <ChartComponent option={option} />
}
```

--------------------------------

### Usage example for SVGRenderer

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SVGRenderer.md

Shows how to import and register SVGRenderer with echarts.use, and includes commented initialization code. Register before init to avoid missing-painter errors.

```js
import * as echarts from 'echarts/core';
import { SVGRenderer, SvgChart } from '@wuba/react-native-echarts';
import { PieChart } from 'echarts/charts';

echarts.use([SVGRenderer, PieChart, TitleComponent]);

// <SvgChart ref={chartRef} />
// echarts.init(chartRef.current, 'light', { renderer: 'svg', width: 300, height: 250 });
```

--------------------------------

### Import and setup SkiaChart and SvgChart with props and ref

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/types.md

Import the main components and types from the library, then define props for Skia and SVG charts and a ref for dispatching events. The commented line shows how to dispatch a mousedown event with coordinates.

```tsx
import {
  SkiaChart,
  SvgChart,
  type SkiaChartProps,
  type SVGChartProps,
  type ChartElement,
  type DispatchEvents,
  type HandlerName,
  type GestureProps,
} from '@wuba/react-native-echarts';

const skiaProps: SkiaChartProps = { handleGesture: true, useRNGH: false, style: { width: 300, height: 250 } };
const svgProps: SVGChartProps = { node: undefined, style: { width: 300, height: 250 } };

const chartRef = useRef<ChartElement & any>(null);
// chartRef.current.dispatchEvents(['mousedown'], touchEvent, { zrX: 10, zrY: 10 });
```

--------------------------------

### SkiaPathRebuilder usage example

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaCore.md

Shows how to create a brush scope, instantiate SkiaPathRebuilder, build a path with moveTo, lineTo, and ellipse, and retrieve the SkPath. Includes a commented line about clipPathCache assignment as done by getClipPath.

```ts
import { createBrushScope, type BrushScope } from './core';
import SkiaPathRebuilder from './SkiaPathRebuilder';

const scope = createBrushScope('zr0');
const builder = new SkiaPathRebuilder();
builder.moveTo(0, 0);
builder.lineTo(100, 0);
builder.ellipse(50, 50, 20, 10, 0, 0, Math.PI * 1.5, true);
const skPath = builder.getPath();
// scope.clipPathCache[clipPathId] = skPath; // as done by getClipPath
```

--------------------------------

### Usage example for SkiaRenderer

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaRenderer.md

Complete usage example: imports echarts core, SkiaRenderer, and a chart type, then registers SkiaRenderer via echarts.use. The commented init call shows creating an ECharts instance with renderer: 'skia'.

```js
import * as echarts from 'echarts/core';
import { SkiaRenderer } from '@wuba/react-native-echarts';
import { BarChart } from 'echarts/charts';

echarts.use([SkiaRenderer, BarChart]);
// later: echarts.init(ref.current, 'light', { renderer: 'skia', width: 300, height: 250 });
```

--------------------------------

### Basic usage of SkiaChart with echarts.init and SkiaRenderer

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaChart.md

Basic example: register SkiaRenderer and required echarts modules, initialize a chart with renderer 'skia' and explicit width/height, set the option, and dispose on unmount. The SkiaChart component is used with a ref to the chart instance.

```tsx
import { SkiaChart, SkiaRenderer } from '@wuba/react-native-echarts';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { useEffect, useRef } from 'react';

echarts.use([SkiaRenderer, BarChart, GridComponent, TooltipComponent]);

function MyChart({ option }: { option: any }) {
  const chartRef = useRef<any>(null);

  useEffect(() => {
    let chart: any;
    if (chartRef.current) {
      chart = echarts.init(chartRef.current, 'light', {
        renderer: 'skia',
        width: 300,
        height: 250,
      });
      chart.setOption(option);
    }
    return () => chart?.dispose();
  }, [option]);

  return <SkiaChart ref={chartRef} />;
}
```

--------------------------------

### Advanced usage with RNGH gestures, explicit size, snapshot, error-safe teardown

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaChart.md

Advanced example: uses useRNGH for gesture handling, disables the built-in gesture overlay (handleGesture={false}) to intercept gestures manually, sets explicit width/height, wraps init in try/catch, and safely disposes the chart in cleanup. Note: makeImageSnapshot returns a base64 data URI or null.

```tsx
import { SkiaChart } from '@wuba/react-native-echarts';
import { useEffect, useRef } from 'react';

function Advanced() {
  const chartRef = useRef<any>(null);

  useEffect(() => {
    let chart: any;
    try {
      if (chartRef.current) {
        chart = echarts.init(chartRef.current, null, {
          renderer: 'skia',
          width: 400,
          height: 300,
        });
        chart.setOption({ xAxis: { type: 'value' }, yAxis: { type: 'value' } });
      }
    } catch (e) {
      console.warn('chart init failed', e);
    }
    return () => {
      try {
        chart?.dispose();
      } catch {}
    };
  }, []);

  return (
    <SkiaChart
      ref={chartRef}
      style={{ width: 400, height: 300 }}
      useRNGH
      handleGesture={false} // disable overlay to intercept gestures yourself
    />
  );
}
```

--------------------------------

### SkiaPainter.refresh() usage

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaGraphic.md

Example usage inside SkiaPainter.refresh() in src/skia/painter.tsx. Shows how the brush function is called with displayable and scope, then the resulting nodes are patched onto the root element.

```tsx
// inside SkiaPainter.refresh(): src/skia/painter.tsx
const nodes = brush(displayable, scope);
root.elm.patch(children);
```

--------------------------------

### Lazy loading of react-native-gesture-handler with fallback

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/GestureHandler.md

Attempts to require the optional react-native-gesture-handler module. If it is not installed, logs a warning and falls back to PanResponder. The warning is emitted once per install.

```ts
let RNGH: any = null;
try {
  RNGH = require('react-native-gesture-handler');
} catch {
  console.warn(
    'react-native-gesture-handler is not installed. Falling back to PanResponder.'
  );
}
```

--------------------------------

### Serialize a chart node tree with vNodeToString

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SVGCore.md

Example of serializing a chart node tree with vNodeToString. The path with stroke-width 0 is rewritten to stroke-opacity="0" in the output.

```ts
import { vNodeToString, type SVGVNode } from './SVGCore';

const node: SVGVNode = {
  tag: 'svg',
  attrs: { width: '300', height: '250', viewBox: '0 0 300 250' },
  key: 'root',
  children: [
    { tag: 'path', attrs: { d: 'M0,0 L100,0', fill: 'none', 'stroke-width': 0 }, key: 'p' },
  ],
};

const markup = vNodeToString(node, { newline: true });
// <svg width="300" height="250" viewBox="0 0 300 250">
// <path d="M0,0 L100,0" fill="none" stroke-opacity="0"></path></svg>
```

--------------------------------

### Module side effects for SVGRenderer

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SVGRenderer.md

At import time, enables SVG support in zrender's env and installs @xmldom/xmldom's DOMParser globally for server-side parsing.

```ts
env.svgSupported = true;                 // zrender/lib/core/env
global.DOMParser = DOMParser;            // from @xmldom/xmldom
```

--------------------------------

### Using RNGH gestures with SvgChart and custom double-tap

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/GestureHandler.md

Shows how to enable react-native-gesture-handler (RNGH) gestures on a chart. The first example uses default gestures (tap, pan, pinch) with `useRNGH`. The second example customizes gestures by adding a double-tap that dispatches a 'dblclick' event, while keeping the default gestures via `Gesture.Race`. If RNGH is not installed, `useRNGH` silently falls back to PanResponder after a console.warn.

```tsx
import { SvgChart, type GestureProps } from '@wuba/react-native-echarts';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

// 1. Default RNGH gestures (tap / pan / pinch):
<SvgChart ref={chartRef} useRNGH />

// 2. Custom gesture — keep defaults, add a double-tap:
function MyChart() {
  const chartRef = useRef<any>(null);
  const gesture = (defaultGestures: any, dispatchEvents: any) =>
    Gesture.Race(
      ...defaultGestures,
      Gesture.Tap()
        .numberOfTaps(2)
        .onEnd((e) => dispatchEvents(['dblclick'], e))
    );

  return <SkiaChart ref={chartRef} useRNGH gesture={gesture} />;
}
```

--------------------------------

### GestureProps discriminated union on useRNGH

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/types.md

Defines a discriminated union on `useRNGH`. When `useRNGH` is `true`, `react-native-gesture-handler` must be installed or the component falls back to PanResponder.

```ts
export type GestureBuiltinProps = {
  useRNGH?: false;
  gesture?: never;
};

export type GestureRNGHProps = {
  useRNGH: true;
  gesture?: RNGestureHandlerGesture;
};

export type GestureProps = GestureBuiltinProps | GestureRNGHProps;
```

--------------------------------

### CustomSVGPainter constructor DOM attachment

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SVGRenderer.md

Calls super with a null DOM root, then attaches the host's elm and sets up the SVG DOM.

```ts
this._svgDom = this._oldVNode.elm = root.elm;
this._svgDom.setZrenderId?.(id);
updateAttrs(null, this._oldVNode);
this.root = root;
```

--------------------------------

### refreshHover / configLayer

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Unsupported methods that log an error in non-production builds.

```APIDOC
## refreshHover / configLayer

### Description
Both are replaced by a stub that, outside production builds, logs via zrender's `logError`.
```

--------------------------------

### SVGPainter constructor implementation

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Initializes the painter with the Skia chart root, zrender storage, options, and instance id. Sets the SVG DOM via root.elm, calls setZrenderId, and resizes to opts.width/height. Uses a module-level svgId counter.

```typescript
constructor(
  root: RootProps,
  storage: Storage,
  opts: SVGPainterOption,
  id: number
) {
  this.root = root;
  this.storage = storage;
  this._id = 'zr' + svgId++;
  // @ts-ignore
  this._svgDom = root.elm;
  this._svgDom.setZrenderId?.(id);
  this._width = 0;
  this._height = 0;
  this.resize(opts.width ?? 0, opts.height ?? 0);
}
```

--------------------------------

### Export SkiaChart, SvgChart, and types from package entry point

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/index.md

Entry point of the package, re-exporting the Skia and SVG chart components along with their renderers and all types. Use this to import the library's public API.

```tsx
export { default as SkiaChart, SkiaRenderer } from './skia/skiaChart';
export { default as SvgChart, SVGRenderer } from './svg/svgChart';
export * from './types';
```

--------------------------------

### Run unit tests

Source: https://github.com/wuba/react-native-echarts/blob/main/CONTRIBUTING.md

Runs unit tests with Jest. Run from the root directory.

```sh
yarn test
```

--------------------------------

### setPlatformAPI call in SvgChart module

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SvgChart.md

Install the library's measureText implementation into zrender's platform API at module import time, replacing the DOM canvas-based implementation so text metrics work in React Native.

```ts
setPlatformAPI({ measureText });
```

--------------------------------

### Resolve initial width and height

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaChart.md

Resolves initial canvas dimensions: explicit width/height props take precedence over style.width/height; if neither is given, the size starts at 0 and is typically set via elm.setAttribute('width') by ECharts.

```tsx
const initialWidth = inlineWidth || (style?.width as number);
const initialHeight = inlineHeight || (style?.height as number);
```

--------------------------------

### resize()

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Resizes the painting surface.

```APIDOC
## resize(width, height)

### Description
Resizes the painting surface. Only acts when either dimension changed.

### Parameters
- **width** (`number`) - Required - The new width.
- **height** (`number`) - Required - The new height.
```

--------------------------------

### Run typecheck and lint

Source: https://github.com/wuba/react-native-echarts/blob/main/CONTRIBUTING.md

Verifies that code passes TypeScript type checking and ESLint linting. Run both commands from the root directory.

```sh
yarn typecheck
```

```sh
yarn lint
```

--------------------------------

### Imperative handle (through ref)

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaChart.md

Documentation for the imperative handle exposed via ref on the Skia chart component, including methods for attribute manipulation, patching, snapshots, event dispatch, and size retrieval.

```APIDOC
## Imperative handle (through `ref`)

### Description
The object exposed by `useImperativeHandle` (`src/skia/skiaChart.tsx` lines 116–164) provides imperative methods to interact with the Skia chart instance.

### Methods

#### `elm`

##### Description
The zrender "SVGDOM" facade. This is what `CustomSVGPainter`/`SkiaPainter` call into during `echarts.init`.

##### Methods

- **`setAttribute(name: string, value: any): void`** - Only `'width'` and `'height'` are honored; updates internal refs and re-renders the canvas size. Any other name is ignored.
- **`setAttributeNS(_name: string, _value: any): void`** - No-op stub.
- **`removeAttribute(_name: string): void`** - No-op stub.
- **`patch(elms: ReactElement[]): void`** - Replaces the list of Skia React elements rendered inside the `<Canvas>`. If the identical array reference is passed twice, the update is skipped.
- **`setZrenderId(id: number): void`** - Stores the zrender instance id used by `dispatchEvents` to route events.
- **`makeImageSnapshot(): string | null`** - Returns `data:image/png;base64,...` from the current canvas snapshot, or `null` if the snapshot is unavailable.
- **`makeImageSnapshotAsync(): Promise<string | null>`** - Async variant; falls back to `drawAsImage(<Group>…</Group>, { width, height })` when an in-canvas snapshot is unavailable and a size + children exist.

#### `viewprot`

##### Description
An empty object literal `{}` (sic — the property name as spelled in the source). Present on the handle; no behavior.

#### `dispatchEvents`

##### Description
Dispatches each given `HandlerName` to the zrender handler registered under the id previously stored with `setZrenderId`, merging `eventArgs` into the dispatched event payload. No-op if no zrender id was set.

##### Signature
```ts
type DispatchEvents = (
  types: HandlerName[],
  nativeEvent: any,
  eventArgs?: Record<string, unknown>
) => void;
```

#### `getChartSize()`

##### Description
Returns `{ width, height }` of the current render state. Used by the Skia painter constructor to resolve chart dimensions.

##### Returns
- **`{ width: number, height: number }`** - The current chart dimensions.
```

--------------------------------

### Import SvgChart or SkiaChart individually

Source: https://github.com/wuba/react-native-echarts/blob/main/README.md

Alternative import methods for using only one of the available renderers.

```js
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
```

```js
import SkiaChart, { SkiaRenderer } from '@wuba/react-native-echarts/skiaChart';
```

--------------------------------

### getWidth() / getHeight()

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Returns the current width or height.

```APIDOC
## getWidth() / getHeight()

### Description
Return `this._width` / `this._height` (numbers).

### Returns
- **number** - The current width or height.
```

--------------------------------

### Fix formatting errors with lint --fix

Source: https://github.com/wuba/react-native-echarts/blob/main/CONTRIBUTING.md

Fixes formatting errors automatically with ESLint. Run from the root directory.

```sh
yarn lint --fix
```

--------------------------------

### toDataURL method implementation

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Returns a PNG data URL by delegating to the host's makeImageSnapshot. Returns undefined if the snapshot is missing, as no guard is present.

```typescript
toDataURL(): string {
  return this._svgDom.makeImageSnapshot?.();
}
```

--------------------------------

### refreshHover and configLayer stubs

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Replaces unsupported methods with a stub that logs an error in non-production builds. The createMethodNotSupport function is defined here.

```typescript
refreshHover = createMethodNotSupport('refreshHover') as PainterBase['refreshHover'];
configLayer = createMethodNotSupport('configLayer') as PainterBase['configLayer'];
```

```typescript
function createMethodNotSupport(method: string): any {
  return function () {
    if (process.env.NODE_ENV !== 'production') {
      logError('In SVG mode painter not support method "' + method + '"');
    }
  };
}
```

--------------------------------

### refresh()

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Performs the core paint pass.

```APIDOC
## refresh(): void

### Description
The core paint pass. Pulls the display list, short-circuits when already rendered, otherwise creates a BrushScope, paints background and displayables, and delivers the resulting ReactElement[] to the host via `root.elm.patch(children)`.
```

--------------------------------

### Metro log confirming new architecture

Source: https://github.com/wuba/react-native-echarts/blob/main/CONTRIBUTING.md

Expected Metro log message confirming the app runs with the new architecture. The properties "fabric":true and "concurrentRoot":true indicate the new architecture is active.

```sh
Running "ReactNativeEchartsExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
```

--------------------------------

### Initialize echarts with Skia renderer and set background color

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Shows how to initialize an echarts instance with the Skia renderer and set a background color. The width and height init options are mapped through resize via elm.setAttribute. The setBackgroundColor method routes to SkiaPainter's setBackgroundColor.

```javascript
echarts.init(ref.current, 'light', { renderer: 'skia', width: 300, height: 250 })
  .setBackgroundColor('rgba(0,0,0,0.05)');
```

--------------------------------

### brushSVGTSpan: Convert zrender TSpan to Skia Paragraph

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaGraphic.md

Paints zrender text (TSpan) as a Skia <Paragraph>. Extracts x, y, fontFamily (default DEFAULT_FONT_FAMILY), fontSize (default DEFAULT_FONT_SIZE), fontStyle, fontWeight, text, fill, textAlign, textBaseline from el.style. Returns null when text is empty. Uses ParagraphBuilder.Make({}) with heightMultiplier: 1, fontFamilies: [fontFamily], numeric fontSize (string sizes parsed with parseInt), and color: Skia.Color(fill) when fill is a string. fontStyle.weight maps 'normal' to FontWeight.Normal, 'bold' to FontWeight.Bold, 'bolder' to FontWeight.ExtraBold, 'lighter' to FontWeight.Light, other strings parsed as parseInt; numbers pass through. fontStyle.slant maps 'italic' to FontSlant.Italic, 'oblique' to FontSlant.Oblique, default FontSlant.Upright. Alignment offsets: textAlign 'center' shifts x by -textWidth / 2; 'start'/'left' → 0; otherwise -textWidth. textBaseline 'middle' shifts y by -textHeight / 2; 'top' → 0; otherwise -textHeight. fill-opacity is copied to opacity.

```tsx
export function brushSVGTSpan(
  el: TSpan,
  scope: BrushScope
): ReactElement | null
```

--------------------------------

### Render pre-built vnode with error guard

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SvgChart.md

Renders a pre-built SVGVNode and guards against init errors. The `getChartSize()` method resolves width/height from `node.attrs` (strings coerced via `Number(...)`).

```tsx
import { SvgChart } from '@wuba/react-native-echarts';
import type { SVGVNode } from '@wuba/react-native-echarts';

const vnode: SVGVNode = {
  tag: 'svg',
  attrs: { width: '300', height: '250' },
  children: [],
};

function Static() {
  const ref = useRef<any>(null);
  useEffect(() => {
    try {
      const chart = ref.current ? echarts.init(ref.current, null, {
        renderer: 'svg', width: 300, height: 250,
      }) : null;
      return () => chart?.dispose();
    } catch (e) {
      console.warn('init failed', e);
      return undefined;
    }
  }, []);
  return <SvgChart ref={ref} node={vnode} useRNGH />;
}
```

--------------------------------

### Node prop initialization

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SvgChart.md

Initializes the SVG node state from the 'node' prop, allowing a pre-rendered SVG virtual node tree to be rendered directly.

```tsx
const [svgNode, setSvgNode] = useState<SVGVNode | undefined>(node);
```

--------------------------------

### usePanResponder

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/GestureHandler.md

Hook that creates a PanResponder instance for touch event handling.

```APIDOC
## `usePanResponder`

### Description
Builds (memoized on `dispatchEvents`) and returns a `PanResponder` instance that maps native touch events to zrender events.

### Signature
```ts
export function usePanResponder(
  dispatchEvents: DispatchEvents
): [PanResponderInstance]
```

### Parameters
- `dispatchEvents` (DispatchEvents) - Required - Function to dispatch events.

### Event Mapping
| PanResponder callback | Dispatched zrender events | Notes |
|---|---|---|
| `onPanResponderGrant` | `['mousedown', 'mousemove']` | every grant |
| `onPanResponderMove`, 1 touch | `['mousemove']` | skipped on first move after a mode switch (guards `moving`/`zooming` flags) |
| `onPanResponderMove`, 2 touches | `['mousewheel']` | with `zrX/zrY` = pinch center `calcCenter(x0,y0,x1,y1)` and `zrDelta = (distance − prevDistance) / 120` |
| `onPanResponderRelease` | `['mouseup', 'click']` | only when `zooming` is false |

### Behavior
All responder negotiation callbacks return `true`; `onShouldBlockNativeResponder` returns `false`; `onPanResponderTerminate` is a no-op.
```

--------------------------------

### SkiaPainter Constructor

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Constructor for the SkiaPainter class.

```APIDOC
## Constructor

```ts
constructor(
  root: RootProps,
  storage: Storage,
  opts: SVGPainterOption,
  id: number
)
```

### Description
Creates a new SkiaPainter instance, initializing the SVG DOM element, storage, and surface size.

### Parameters
- **root** (`RootProps`) - Required - The SkiaChart imperative handle; `elm` becomes `_svgDom` and `getChartSize()` is consulted for sizing.
- **storage** (`Storage`) - Required - The zrender storage holding the display list to paint.
- **opts** (`SVGPainterOption`) - Required - `width`/`height` seed the initial surface size; `ssr` toggles brush-scope server-side-rendering behavior.
- **id** (`number`) - Required - The zrender instance id, forwarded to `elm.setZrenderId`.
```

--------------------------------

### calcDistance and calcCenter helper signatures

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/GestureHandler.md

Exported helper functions used for pinch gestures. `calcDistance` computes the Euclidean distance between two points; `calcCenter` returns the midpoint as `{ x, y }`.

```ts
export function calcDistance(x0: number, y0: number, x1: number, y1: number)
// sqrt((x0-x1)^2 + (y0-y1)^2)

export function calcCenter(x0: number, y0: number, x1: number, y1: number)
// returns { x: (x1+x0)/2, y: (y1+y0)/2 }
```

--------------------------------

### getViewportRoot()

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Returns the root element of the viewport.

```APIDOC
## getViewportRoot(): HTMLElement

### Description
Returns the root element of the viewport.

### Returns
- **HTMLElement** - The root element.
```

--------------------------------

### setBackgroundColor()

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Sets the background paint for the painter.

```APIDOC
## setBackgroundColor(backgroundColor)

### Description
Sets the background paint. Same-value calls are ignored; otherwise `_backgroundDirty = true` forces a repaint. `'none'` (the default) or any falsy background renders no background node.

### Parameters
- **backgroundColor** (`string | GradientObject | PatternObject`) - Required - The background color or pattern.
```

--------------------------------

### CustomSVGPainter constructor dimension resolution

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SVGRenderer.md

Resolves dimensions by falling back to root.getChartSize() when opts.width or opts.height are not provided.

```ts
const { width, height } = root.getChartSize();
opts.width = opts.width || width;
opts.height = opts.height || height;
```

--------------------------------

### usePanResponder hook signature

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/GestureHandler.md

Builds and returns a memoized `PanResponder` instance based on `dispatchEvents`. Maps pan responder callbacks to zrender events: grant dispatches `mousedown` and `mousemove`; move with one touch dispatches `mousemove` (skipped on first move after a mode switch); move with two touches dispatches `mousewheel` with pinch center and `zrDelta`; release dispatches `mouseup` and `click` only when `zooming` is false.

```ts
export function usePanResponder(
  dispatchEvents: DispatchEvents
): [PanResponderInstance]
```

--------------------------------

### getType()

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Returns the painter type name.

```APIDOC
## getType(): string

### Description
Returns the literal string `'svg'` (the painter type name, matching the `type` property).

### Returns
- **string** - The painter type name.
```

--------------------------------

### Publish to npm with yarn release

Source: https://github.com/wuba/react-native-echarts/blob/main/CONTRIBUTING.md

Publishes new versions to npm using release-it. Handles version bumping, tags, and releases.

```sh
yarn release
```

--------------------------------

### dispose()

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Disposes the painter (no-op).

```APIDOC
## dispose(): void

### Description
No-op (empty body).
```

--------------------------------

### SkiaPainter class signature

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Defines the full class signature with fields, constructor, and methods. Note that refreshHover and configLayer are not supported.

```tsx
export class SkiaPainter implements PainterBase {
  type: string = 'svg';
  root: HTMLElement;
  storage: Storage;
  private _displayableCache = new WeakMap<Displayable, ReactElement[]>();
  private _id: string;
  private _width: number;
  private _height: number;
  private _svgDom: any;
  private _backgroundColor: SVGPainterBackgroundColor = 'none';
  private _backgroundDirty = true;
  private _surfaceDirty = true;
  private _hasRendered = false;
  private _lastDisplayables: Displayable[] = [];

  constructor(
    root: RootProps,
    storage: Storage,
    opts: SVGPainterOption,
    id: number
  );
  getType(): string;
  setBackgroundColor(backgroundColor: SVGPainterBackgroundColor): void;
  getViewportRoot: () => HTMLElement;
  getViewportRootOffset: () => { offsetLeft: number; offsetTop: number };
  refresh(): void;
  private _paintList(list: Displayable[], scope: BrushScope, out?: ReactElement[]);
  private _getDisplayableNodes(displayable: Displayable, scope: BrushScope): ReactElement[];
  clear(): void;
  toDataURL(): string;
  resize(width: number, height: number): void;
  dispose(): void;
  getWidth(): number;
  getHeight(): number;
  refreshHover: PainterBase['refreshHover']; // not supported
  configLayer: PainterBase['configLayer'];   // not supported
}
```

--------------------------------

### resize method implementation

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Updates the surface size and marks it dirty only if width or height changed. Sets the SVG root element's width and height attributes.

```typescript
resize(width: number, height: number) {
  if (this._width !== width || this._height !== height) {
    this._width = width;
    this._height = height;
    this._surfaceDirty = true;
    this._svgDom.setAttribute('width', width);
    this._svgDom.setAttribute('height', height);
  }
}
```

--------------------------------

### brushSVGTSpan

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaGraphic.md

Function that paints zrender text as a Skia Paragraph.

```APIDOC
## `brushSVGTSpan`

### Description
Paints zrender text (`TSpan`) as a Skia `<Paragraph>`. Extracts `x`, `y`, `fontFamily` (default `DEFAULT_FONT_FAMILY`), `fontSize` (default `DEFAULT_FONT_SIZE`), `fontStyle`, `fontWeight`, `text`, `fill`, `textAlign`, `textBaseline` from `el.style`. Returns `null` when `text` is empty.

### Signature
```tsx
export function brushSVGTSpan(
  el: TSpan,
  scope: BrushScope
): ReactElement | null
```

### Parameters
- **el** (`TSpan`) - Required - The zrender text element to paint.
- **scope** (`BrushScope`) - Required - The brush scope for painting.

### Return Value
- `ReactElement | null` - A Skia `<Paragraph>` React element, or `null` when `text` is empty.

### Text Layout Details
- `ParagraphBuilder.Make({})` with `heightMultiplier: 1`, `fontFamilies: [fontFamily]`, numeric `fontSize` (string sizes are parsed with `parseInt`), `color: Skia.Color(fill)` when `fill` is a string.
- `fontStyle.weight` — `createFontWeight`: `'normal'` → `FontWeight.Normal`, `'bold'` → `FontWeight.Bold`, `'bolder'` → `FontWeight.ExtraBold`, `'lighter'` → `FontWeight.Light`, other strings parsed as `parseInt`; numbers pass through.
- `fontStyle.slant` — `createFontSlant`: `'italic'` → `FontSlant.Italic`, `'oblique'` → `FontSlant.Oblique`, default `FontSlant.Upright`.
- Alignment offsets: `textAlign` `'center'` shifts x by `-textWidth / 2`; `'start'`/`'left'` → `0`; otherwise `-textWidth`. `textBaseline` `'middle'` shifts y by `-textHeight / 2`; `'top'` → `0`; otherwise `-textHeight`.
- `fill-opacity` is copied to `opacity`.
```

--------------------------------

### getViewportRootOffset()

Source: https://github.com/wuba/react-native-echarts/blob/main/_autodocs/api-reference/SkiaPainter.md

Returns the constant offset of the viewport root.

```APIDOC
## getViewportRootOffset()

### Description
Returns the constant offset of the viewport root.

### Returns
- **object** - `{ offsetLeft: 0, offsetTop: 0 }`.
```
Tokens:
Raw