2.x

example/package.json

@@ -12,10 +12,10 @@
     "@expo/webpack-config": "~19.0.1",
     "@shopify/react-native-skia": "1.2.3",
     "echarts": "^5.5.0",
-    "expo": "~51.0.0",
+    "expo": "~51.0.28",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.1",
+    "react-native": "0.74.5",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-svg": "15.2.0",
     "react-native-web": "~0.19.6",

example/src/App.tsx

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import { StyleSheet, View, Dimensions } from 'react-native';
 import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
-import { SVGRenderer, SkiaChart, SvgChart } from '@wuba/react-native-echarts';
+import {
+  SVGRenderer,
+  SvgChart,
+  SkiaRender,
+  SkiaChart,
+} from '@wuba/react-native-echarts';
 import * as echarts from 'echarts/core';
 import { BarChart, LineChart } from 'echarts/charts';
 import {
@@ -17,6 +22,7 @@ echarts.use([
   TooltipComponent,
   GridComponent,
   SVGRenderer,
+  SkiaRender,
   // ...
   BarChart,
   LineChart,
@@ -31,9 +37,9 @@ function SkiaComponent({ option }: any) {
   useEffect(() => {
     let chart: any;
     if (skiaRef.current) {
-      // @ts-ignore
       chart = echarts.init(skiaRef.current, 'light', {
-        renderer: 'svg',
+        // @ts-ignore
+        renderer: 'skia',
         width: E_WIDTH,
         height: E_HEIGHT,
       });
@@ -51,7 +57,6 @@ function SvgComponent({ option }: any) {
   useEffect(() => {
     let chart: any;
     if (svgRef.current) {
-      // @ts-ignore
       chart = echarts.init(svgRef.current, 'light', {
         renderer: 'svg',
         width: E_WIDTH,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wuba/react-native-echarts",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "description": "Echarts for react native.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -74,13 +74,13 @@
     "pod-install": "^0.2.2",
     "prettier": "^3.2.5",
     "react": "18.3.1",
-    "react-native": "0.74.1",
+    "react-native": "0.74.5",
     "react-native-builder-bob": "^0.23.2",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-svg": "15.2.0",
     "react-test-renderer": "^18.3.1",
     "release-it": "^17.2.1",
-    "sharp": "^0.33.3",
+    "sharp": "^0.33.5",
     "typescript": "^5.0.4",
     "zrender": "^5.5.0"
   },

skiaChart.d.ts

@@ -1,2 +1,2 @@
-export * from './lib/typescript/skiaChart';
-export { default } from './lib/typescript/skiaChart';
+export * from './lib/typescript/skia/skiaChart';
+export { default } from './lib/typescript/skia/skiaChart';

src/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SkiaChart Component does not render Canvas when svgString is not provided 1`] = `null`;
-
 exports[`SkiaChart Component does not render GestureHandler when handleGesture is false 1`] = `
 <View
   style={
@@ -14,7 +12,7 @@ exports[`SkiaChart Component does not render GestureHandler when handleGesture i
 />
 `;
 
-exports[`SkiaChart Component renders Canvas when svgString is provided 1`] = `
+exports[`SkiaChart Component renders GestureHandler when handleGesture is true and useRNGH is ture 1`] = `
 <View
   style={
     {
@@ -25,18 +23,7 @@ exports[`SkiaChart Component renders Canvas when svgString is provided 1`] = `
   testID="component"
 >
   <View
-    onMoveShouldSetResponder={[Function]}
-    onMoveShouldSetResponderCapture={[Function]}
-    onResponderEnd={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderReject={[Function]}
-    onResponderRelease={[Function]}
-    onResponderStart={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    onStartShouldSetResponderCapture={[Function]}
+    collapsable={false}
     style={
       {
         "backgroundColor": "rgba(0,0,0,0)",
@@ -45,12 +32,12 @@ exports[`SkiaChart Component renders Canvas when svgString is provided 1`] = `
         "width": "100%",
       }
     }
-    testID="pan-responder-handler"
+    testID="gesture-handler"
   />
 </View>
 `;
 
-exports[`SkiaChart Component renders GestureHandler when handleGesture is true and useRNGH is ture 1`] = `
+exports[`SkiaChart Component renders PanResponderHandler when handleGesture is true and useRNGH is false 1`] = `
 <View
   style={
     {
@@ -61,7 +48,18 @@ exports[`SkiaChart Component renders GestureHandler when handleGesture is true a
   testID="component"
 >
   <View
-    collapsable={false}
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
     style={
       {
         "backgroundColor": "rgba(0,0,0,0)",
@@ -70,12 +68,12 @@ exports[`SkiaChart Component renders GestureHandler when handleGesture is true a
         "width": "100%",
       }
     }
-    testID="gesture-handler"
+    testID="pan-responder-handler"
   />
 </View>
 `;
 
-exports[`SkiaChart Component renders PanResponderHandler when handleGesture is true and useRNGH is false 1`] = `
+exports[`SkiaChart Component renders correctly 1`] = `
 <View
   style={
     {
@@ -111,10 +109,6 @@ exports[`SkiaChart Component renders PanResponderHandler when handleGesture is t
 </View>
 `;
 
-exports[`SkiaChart Component renders correctly 1`] = `null`;
-
-exports[`SvgChart Component does not render Canvas when svgString is not provided 1`] = `null`;
-
 exports[`SvgChart Component does not render GestureHandler when handleGesture is false 1`] = `
 <View
   style={
@@ -163,77 +157,6 @@ exports[`SvgChart Component does not render GestureHandler when handleGesture is
 </View>
 `;
 
-exports[`SvgChart Component renders Canvas when svgString is provided 1`] = `
-<View
-  style={
-    {
-      "height": 100,
-      "width": 100,
-    }
-  }
-  testID="component"
->
-  <RNSVGSvgView
-    align="xMidYMid"
-    bbHeight={100}
-    bbWidth={100}
-    focusable={false}
-    height={100}
-    meetOrSlice={0}
-    minX={0}
-    minY={0}
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "borderWidth": 0,
-        },
-        {
-          "flex": 0,
-          "height": 100,
-          "width": 100,
-        },
-      ]
-    }
-    vbHeight={100}
-    vbWidth={100}
-    width={100}
-  >
-    <RNSVGGroup
-      fill={
-        {
-          "payload": 4278190080,
-          "type": 0,
-        }
-      }
-    />
-  </RNSVGSvgView>
-  <View
-    onMoveShouldSetResponder={[Function]}
-    onMoveShouldSetResponderCapture={[Function]}
-    onResponderEnd={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderReject={[Function]}
-    onResponderRelease={[Function]}
-    onResponderStart={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    onStartShouldSetResponderCapture={[Function]}
-    style={
-      {
-        "backgroundColor": "rgba(0,0,0,0)",
-        "height": "100%",
-        "position": "absolute",
-        "width": "100%",
-      }
-    }
-    testID="pan-responder-handler"
-  />
-</View>
-`;
-
 exports[`SvgChart Component renders GestureHandler when handleGesture is true and useRNGH is ture 1`] = `
 <View
   style={

src/__tests__/chart.test.tsx

@@ -12,10 +12,10 @@ declare global {
 import React, { useEffect, useRef } from 'react';
 import { ReactTestInstance } from 'react-test-renderer';
 import { render, fireEvent, act } from '@testing-library/react-native';
-import SkiaComponent from '../skiaChart';
-import SVGComponent from '../svgChart';
+import SkiaComponent from '../skia/skiaChart';
+import SVGComponent from '../svg/svgChart';
 import { dispatchEventsToZRender } from '../components/events';
-import { SVGRenderer } from '../SVGRenderer';
+import { SVGRenderer } from '../svg/SVGRenderer';
 import * as echarts from 'echarts/core';
 import { BarChart, LineChart, GraphChart, ScatterChart } from 'echarts/charts';
 import {

src/__tests__/index.test.tsx

@@ -4,8 +4,8 @@
 // tests for basic props
 import React from 'react';
 import { render } from '@testing-library/react-native';
-import SkiaComponent from '../skiaChart';
-import SVGComponent from '../svgChart';
+import SkiaComponent from '../skia/skiaChart';
+import SVGComponent from '../svg/svgChart';
 const Components = [SkiaComponent, SVGComponent];
 const svg = `<svg width="100" height="100" viewBox="0 0 100 100">`;
 const node = {
@@ -24,20 +24,6 @@ Components.forEach((Component) => {
       expect(toJSON()).toMatchSnapshot();
     });
 
-    it('renders Canvas when svgString is provided', () => {
-      const { queryByTestId, toJSON } = render(
-        <Component svg={svg} node={node} />
-      );
-      expect(toJSON()).toMatchSnapshot();
-      expect(queryByTestId('component')).not.toBeNull();
-    });
-
-    it('does not render Canvas when svgString is not provided', () => {
-      const { queryByTestId, toJSON } = render(<Component />);
-      expect(toJSON()).toMatchSnapshot();
-      expect(queryByTestId('component')).toBeNull();
-    });
-
     it('renders GestureHandler when handleGesture is true and useRNGH is ture', () => {
       const { queryByTestId, toJSON } = render(
         <Component svg={svg} node={node} useRNGH />

src/index.tsx

@@ -1,4 +1,3 @@
-export { default as SkiaChart } from './skiaChart';
-export { default as SvgChart } from './svgChart';
-export { SVGRenderer } from './SVGRenderer';
+export { default as SkiaChart, SkiaRender } from './skia/skiaChart';
+export { default as SvgChart, SVGRenderer } from './svg/svgChart';
 export * from './types';