SkiaChart: Texts including axis labels, tooltips, toolbox and legend are not rendered.

[nipunadodan]

Describe the bug
Texts including axis labels, tooltips, toolbox and legend are not rendered.

To Reproduce
Steps to reproduce the behaviour:

• Try a minimal example using SkiaChart with the below library versions.

"@wuba/react-native-echarts": "^1.3.1",
"@shopify/react-native-skia": "^0.1.241",
"echarts": "^5.5.0",
"react": "18.2.0",
"react-native": "^0.73.4",

Expected behaviour
Texts on axis labels, tooltips, legends and toolbox should be visible.

Screenshots
This is how it looks like when it is rendered using SkiaChart

This is how it is expected to look (screenshot taken after rendered using SVG)

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: N/A
• Version: 22.04.4

Smartphone (please complete the following information):

• Device: Samsung A12
• OS: Android 13
• Browser: N/A
• Version: N/A

Additional context
Sample code: Github gist

[zhiqingchen]

use rnsvg or lower version of rnskia

[zhiqingchen]

Shopify/react-native-skia#2404

[AlejandroRM-DEV]

use rnsvg or lower version of rnskia

I switched to SvgChart and it worked, but is there any implication I should be aware of?

Thank you.

[zhiqingchen]

#16
@AlejandroRM-DEV

[nipunadodan]

use rnsvg or lower version of rnskia

I switched to SvgChart and it worked, but is there any implication I should be aware of?

Thank you.

Yes, I'm aware. SvgCharts works but it's slow to respond to gestures. That's why I explicitly need SkiaChart to work.

[Jay2009]

@nipunadodan yes I am having exactly same issue with you.
so any solution yet?

[liamjones]

@Jay2009 Below is what we've done as a workaround for now. It's not ideal but might help you (as long as you don't need react-native-skia for anything bar react-native-echarts on iOS).

@shopify/react-native-skia 0.1.234 is the last version that will render text in react-native-echarts. That version will crash/lock up an iOS app on RN 0.73.8 (the version of RN we're using, I haven't tried 0.74.x yet) but seems to work fine on Android. We want Skia rendering for slow Android devices as it's faster than SVG rendering. The iOS devices will use SVG rendering for now (since they have generally stronger performance).

How to set this up:

• Downgrade @shopify/react-native-skia to 0.1.234 in your package.json.
• Disable auto-linking of the module on iOS only by putting the following in your react-native.config.js (there's no point linking it if we can't use it):

module.exports = {
    dependencies: {
        '@shopify/react-native-skia': {
            platforms: {
                ios: null
            }
        }
    }
}

• Update our React component to use either SkiaChart or SvgChart depending on platform:

const SomeComponent = () => {
    const PlatformSpecificChartTag = Platform.OS === 'ios' ? SvgChart : SkiaChart
    return <PlatformSpecificChartTag option={...} etc />
}

[liamjones]

Now that react-native-skia have documented that text in ImageSVG tags is not going to be supported could we add that to the known issues on #16?