Large Area Chart Use React Native Gesture Handler - Does not work on IOS

[uma-uc]

Describe the bug Trying to get the example large area chart to work in ios It is not working for ios, and not working in my local environment as well.

To Reproduce Steps to reproduce the behavior:

1. Use the example https://wuba.github.io/react-native-echarts/docs/expo-snacks/large-area-chart-use-rngh
2. Click on 'ios'
3. On the website expo snack, it seems to crash.
4. In my environment. there is no error, but the title, x-axis, and y-axis are not being rendered, and the chart is also not rendered

Expected behavior The area chart, x-axis and y-axis to be rendered

Screenshots

Desktop (please complete the following information):

• OS: ios

Smartphone (please complete the following information):

• OS: [e.g. iOS8.1]

Additional context

[zhiqingchen]

skia render

svg render

import * as React from 'react';
import { useRef, useEffect, useCallback, useState } from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SVGRenderer, SvgChart, SkiaChart } from '@wuba/react-native-echarts';
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  ToolboxComponent,
  DataZoomComponent,
} from 'echarts/components';

// register extensions
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  ToolboxComponent,
  DataZoomComponent,
  SVGRenderer,
  // ...
  BarChart,
  LineChart,
]);

const E_HEIGHT = 400;
const E_WIDTH = Dimensions.get('window').width;

let base = +new Date(1968, 9, 3);
let oneDay = 24 * 3600 * 1000;
let date = [];
let data = [Math.random() * 300];
for (let i = 1; i < 20000; i++) {
  var now = new Date((base += oneDay));
  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
  data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}

const option = {
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  title: {
    left: 'center',
    text: 'Large Area Chart'
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: date
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%']
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 10
    },
    {
      start: 0,
      end: 10
    }
  ],
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      symbol: 'none',
      sampling: 'lttb',
      itemStyle: {
        color: 'rgb(255, 70, 131)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 158, 68)'
          },
          {
            offset: 1,
            color: 'rgb(255, 70, 131)'
          }
        ])
      },
      data: data
    }
  ]
};

export default function App() {
  const skiaRef = useRef<any>(null);
  useEffect(() => {
    let chart: any;
    if (skiaRef.current) {
      chart = echarts.init(skiaRef.current, 'light', {
        renderer: 'svg',
        width: E_WIDTH,
        height: E_HEIGHT,
      });
      chart.setOption(option);
    }
    return () => chart?.dispose();
  }, []);
  const [isZooming, setIsZooming] = useState(false);
  const gesture = useCallback((defaultGestures) => {
    // Add long press to pan gesture
    defaultGestures[0].activateAfterLongPress(250);

    // Listen to pinch gesture
    defaultGestures[1].onStart(() => {
      setIsZooming(true);
    }).onEnd(() => {
      setIsZooming(false);
    });

    // Omit tap gesture
    return defaultGestures.slice(0, 2);
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <SkiaChart ref={skiaRef} useRNGH gesture={gesture} />
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

The new version of SkiaChart still has problems with the processing of text. You need to use a lower version of skia or Svgchart.

[zhiqingchen]

The situation where the chart is not rendered is not reproduced

[uma-uc]

Thanks a mil.. I was missing the echarts.use([..., LineChart, AreaChart]).

Also does this mean that I should SvgChart instead of SkiaChart until y-axis issue is resolved? Is there another ticket to track y-axis issue for SkiaChart?

[zhiqingchen]

https://github.com/wuba/react-native-echarts/issues/174 https://github.com/wuba/react-native-echarts/issues/190