Problem (most likely with opacity) rendering legend, line chart, axes scales and tooltip coordinates.

[Jakub-Plan-d-k]

Describe the bug
After updating from react native 0.72.6 to 0.73.5 I have experienced a lot of issues at once with rendering of the charts. I am not 100% sure what is the exact cause, nor do I see anything exact in Logcat in android studio.

To Reproduce
Steps to reproduce the behavior:
So I generally followed the react native migration guide. This included updating java files to kotlin, adjusting gradle and whatnot. I have tried several different configurations, including the one you have in your project, but nothing seems to help.

I have ran ./gradlew clean, cleaned RN cache, removed package-lock.json and reinstalled node_modules, but nothing helped either.

I have ran the same app on my personal phone, made a release/debug apks and ran them on emulator, still to no avail.

Expected behavior
Please see the screenshot - a lot of stuff is missing or rendered wrong.

Screenshots

Desktop (please complete the following information):

• Windows

Smartphone (please complete the following information):

• Samsung Galaxy s8 (physical)
• Google pixel 3a (emulator)

[zhiqingchen]

Please provide your version of echarts, react-native-svg or react-native-skia

[Shasikhan]

Same issue happing with my app. Chart labels are no more shown, and line chart shows black area with it.

"react-native": "^0.73.0",
"echarts": "^5.4.3",
"@wuba/react-native-echarts": "^1.3.0",
"@shopify/react-native-skia": "^0.1.241",
"react-native-svg": "^15.1.0",

[Jakub-Plan-d-k]

@zhiqingchen Currently I have:

"@shopify/react-native-skia": "^0.1.221",
"@wuba/react-native-echarts": "^1.3.0",
"echarts": "5.5",
"react-native": "^0.73.2"

But I have also tried with various combinations, including:
"@shopify/react-native-skia": "^0.1.241",
"react-native": "^0.73.5"
"echarts": "5.4.1"

None of this worked.
Maybe this will be of help for you: in some other library, which got bugged after RN update to 0.73.5 the issue was supposedly caused by typescript update to v5

I am currently working on minimal reproduction example

[Jakub-Plan-d-k]

@zhiqingchen here comes minimal reproduction example:

• run npx react-native@latest init echartsexample
  package.json:
• "@shopify/react-native-skia": "^0.1.241",
  "@wuba/react-native-echarts": "^1.3.0",
  "echarts": "5.5",
  "react": "18.2.0",
  "react-native": "0.73.5",
  "react-native-gesture-handler": "^2.15.0"
• take the SkiaComponent from examples in react-native-echarts
• add the option value of the line chart from here https://echarts.apache.org/examples/en/editor.html?c=line-simple
  this is the result:
  

[zhiqingchen]

This problem does exist

[zhiqingchen]

We will find out the reason. You can use react-native-svg for rendering first, or try to use a lower version of skia.

[Jakub-Plan-d-k]

@zhiqingchen which version of skia works for you? I have tried down to 0.1.221 and it still did not work for me. I guess I will wait for you guys, not a critical issue for me as of now

[erenkan]

Same here! SVG renderer works but skia dont.

[zhiqingchen]

try version 0.1.196

[Jakub-Plan-d-k]

tried, cleaned with gradlew, removed node_modules, package-lock.json and installed all again, then ran react-native with --reset-cache.
Effects still the same.

[taatiq882]

Is there any update on this issue? I am facing the exact issue.

[zhiqingchen]

1.0.4 try RN skia

[Shasikhan]

1.0.4 try RN skia

I tried it on 1.0.4 version and still same issue, for time being changed renderer to svg.

[Jakub-Plan-d-k]

same here, 1.0.4 did not help.

[nemoneph]

same here with skia 0.1.221 , and 1.0.4

[Fungusjuice]

As soon as I bump my react-native to 0.73.6 I get this bug, also happens on other charts like Radar.
But if I downgrade back to react-native 0.73.2, it works fine.
"react-native": "0.73.6",

"react-native": "0.73.2",
"@wuba/react-native-echarts": "1.1.0-all.0",
"echarts": "^5.4.2",
"@shopify/react-native-skia": "0.1.221",

[ZhengKehang]

i got the solution:
"echarts": "5.4.3"
is useful;
you can check your echarts real version.

[rafalnawojczyk]

Same here with:
"react-native": "0.72.10",
"@wuba/react-native-echarts": "1.3.0",
"echarts": "5.5.0",
"@shopify/react-native-skia": "0.1.196",

[zhiqingchen]

There are two problems

1. The transparent part is shown as black. Add the following patch to fix it.
   68c325f

2.Text does not display and is not resolved.

[zhiqingchen]

try 1.3.1

[zachTrio]

try 1.3.1

This has resolved the issues previously mentioned.

I am however still having an issue with DataZoomComponent.

The graph does not render.

I can still interact normally with the component. (selecting ranges, scrubbing)

[nipunadodan]

try 1.3.1

"@wuba/react-native-echarts": "^1.3.1", does solve the blacked-out areas issue, but not the issue with texts not rendering. Any known solutions?

Screenshot: Texts are not shown.

[pbpraveen1988]

@nipunadodan use SvgChart instead of SkiaChart , it will work, faced the same issue before.

import { SvgChart } from '@wuba/react-native-echarts';

and return should be like ;