feat: rn 74 & expo 51

Signed-off-by: tony chen <tony.zq.chen@gmail.com>

Author: zhiqingchen

example/package.json

@@ -10,19 +10,19 @@
   },
   "dependencies": {
     "@expo/webpack-config": "~19.0.1",
-    "@shopify/react-native-skia": "0.1.221",
+    "@shopify/react-native-skia": "1.2.3",
     "echarts": "^5.5.0",
-    "expo": "~50.0.7",
+    "expo": "~51.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.4",
-    "react-native-gesture-handler": "~2.14.0",
-    "react-native-svg": "14.1.0",
+    "react-native": "0.74.1",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-svg": "15.2.0-rc.0",
     "react-native-web": "~0.19.6",
     "zrender": "^5.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.24.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-module-resolver": "^4.1.0"
   },

example/src/App.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, View, Dimensions } from 'react-native';
 import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import { SVGRenderer, SkiaChart, SvgChart } from '@wuba/react-native-echarts';
 import * as echarts from 'echarts/core';
-import { BarChart } from 'echarts/charts';
+import { BarChart, LineChart } from 'echarts/charts';
 import {
   TitleComponent,
   TooltipComponent,
@@ -19,6 +19,7 @@ echarts.use([
   SVGRenderer,
   // ...
   BarChart,
+  LineChart,
 ]);
 
 const E_HEIGHT = 250;
@@ -72,11 +73,18 @@ const option = {
   yAxis: {
     type: 'value',
   },
+  tooltip: {
+    trigger: 'axis',
+  },
   series: [
     {
       data: [120, 200, 150, 80, 70, 110, 130],
       type: 'bar',
     },
+    {
+      data: [220, 100, 180, 160, 150, 120, 110],
+      type: 'line',
+    },
   ],
 };
 function App() {

example/yarn.lock

@@ -55,10 +55,10 @@
   "devDependencies": {
     "@arkweid/lefthook": "^0.7.7",
     "@commitlint/config-conventional": "^17.0.2",
-    "@react-native-community/eslint-config": "^3.0.2",
-    "@react-native/babel-preset": "0.73.19",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@react-native/babel-preset": "0.74.81",
     "@release-it/conventional-changelog": "^5.0.0",
-    "@shopify/react-native-skia": "0.1.221",
+    "@shopify/react-native-skia": "1.2.3",
     "@testing-library/react-native": "^12.4.3",
     "@types/jest": "^29.5.11",
     "@types/react": "~18.2.14",
@@ -74,13 +74,13 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "18.2.0",
-    "react-native": "0.73.4",
+    "react-native": "0.74.1",
     "react-native-builder-bob": "^0.20.0",
-    "react-native-gesture-handler": "~2.14.0",
-    "react-native-svg": "14.1.0",
+    "react-native-gesture-handler": "~2.16.0",
+    "react-native-svg": "15.2.0-rc.0",
     "react-test-renderer": "^18.2.0",
     "release-it": "^15.0.0",
-    "sharp": "^0.33.2",
+    "sharp": "^0.33.3",
     "typescript": "^5.0.4",
     "zrender": "^5.5.0"
   },

package.json

@@ -50,9 +50,15 @@ export function vNodeToString(
   const S = opts.newline ? '\n' : '';
   function convertElToString(el: SVGVNode): string {
     const { children, tag, attrs } = el;
-    // fix: https://github.com/Shopify/react-native-skia/issues/888
-    if (attrs['stroke-width'] === 0) {
-      attrs['stroke-opacity'] = 0;
+    if (tag === 'path') {
+      // fix: https://github.com/Shopify/react-native-skia/issues/888
+      if (attrs['stroke-width'] === 0) {
+        attrs['stroke-opacity'] = 0;
+      }
+      // fix: https://github.com/wuba/react-native-echarts/issues/161
+      if (attrs.fill === 'transparent') {
+        attrs['fill-opacity'] = 0;
+      }
     }
     if (tag === 'text') {
       if (typeof attrs.style === 'string') {