Performance: Render lot of skia candlestick with pan gesture (laggy)

[AlekPacul]

Hello guys, this is my first QnA and I just wonder is there any chance to have smooth pan gesture like trading apps with this library?

Before using react-native-skia I use react native svg but it was awful when I do dragging so I change it to this library and when I change to this library it much faster but still I still don't have smooth pan gesture when do dragging the chart and the indicator.

Note: I'm using d3.js to do scaling the height of the candlestick

My code in overall like this

const Chart = () => {
  const [chartConfig, setChartConfig] = useState({
    //other object key,
    sourceData: [], //will be lot of array of data (can be 1000),
    start: 0,
    end: 0,
  });

  //other function

  const visibleData = useMemo(() => {
    const data = chartConfig.sourceData.slice(startIndex, endIndex);
    return data;
  }, [chartConfig.startIndex, chartConfig.endIndex]);

  const onGestureEvent = event => {
    const x = event.nativeEvent.x;
    const movement = touchX - startTouchX.value;
    const transformPosition = movement + yShared.value;
    const moves = ~~(transformPosition / chartConfig.candleWidth);
    yShared.value = transformPosition % chartConfig.candleWidth;
    moveCandle(moves);
  };

  const moveCandle = moves => {
    const editedMoves = moves / 5;
    const temp_start = chartConfig.startIndex - editedMoves;
    const temp_end = temp_start + (chartConfig.end - chartConfig.start);
    if (temp_start >= 0 && temp_end <= chartConfig.sourceData.length) {
      setChartConfig(prevState => ({
        ...prevState,
        start: temp_start,
        end: temp_end,
      }));
    } else if (temp_start >= chartConfig.sourceData.length) {
      setChartConfig(prevState => ({
        ...prevState,
        start: chartConfig.sourceData.length - 1,
      }));
    }
  };

  const onHandlerStateChange = event => {
    try {
      if (event.nativeEvent.numberOfPointers === 2) {
      } else {
        if (event.nativeEvent.state === panGestureState.BEGAN) {
          startTouchX, (value = event.nativeEvent.x);
        } else if (event.nativeEvent.state === panGestureState.ACTIVE) {
          gestureX.value = event.nativeEvent.translationX;
        }
      }
    } catch (e) {}
  };
  //other function
  return (
    <View>
      //other component
      <View>
        <PanGestureHandler
          onGestureEvent={onGestureEvent}
          minPointers={1}
          maxPointers={1}
          activeOffsetX={[-10, 10]}
          onHandlerStateChange={onHandlerStateChange}>
          <View>
            <Canvas>
              <Group>
                <RenderCandleStick
                  chartConfig={{...chartConfig, data: visibleData}}
                  Scale={{yScale: yScale, xScale: xScale}}
                />
              </Group>
            </Canvas>
          </View>
        </PanGestureHandler>
        // other component
      </View>
    </View>
  );
};

for render candlestick it will be like this

const RenderCandleStick = ({
Scale, chartConfig
}) => {
 const {xScale, yScale} = Scale
 const candleWidth = 6
 const handleColor =(v, i) => {
  if (v.open > v.close) return 'red'
  return 'green'
 }

 return (
  <Group>
   {chartConfig.data.map((item, index) => {
    const bar = chartConfig.selectCandle
    ? xScale(index)
    : chartConfig.selectCandle = index
    ? xScale(index) - 2
    : xScale(index)
    
    const barWidth = chartConfig.selectCandle
    ? candleWidth
    : chartConfig.selectCandle = index
    ? candleWidth - 2
    : candleWidth
    
    const maxY = yScale(d3.max([item.open, item.close]));
    const height = Math.abs(yScale(item.open) - yScale(item.close))
    return (
     <Group key={index}>
      <LineSkia
      p1={vec(xScale(index) + candleWidth /2, yScale(item.low)}
      p2={vec(xScale(index) + candleWidth /2, yScale(item.high)}
      strokeWidth={1}
      style="stroke"
      color={handleColor(item, index)}
      />
      <RectSkia
      x={bar}
      y={maxY}
      height={height}
      width={barWidth}
      color={handleColor(item,index)}
      style="fill"
      >
       <Paint
       color={handleStrokeColor(item, index)}
       strokeWidth={1}
       style="stroke"
       />
      </RectSkia>
     </Group>
    )
   }
  </Group>
 )
}
export default memo(RenderCandleStick)

if you wonder why I don't use Gesture.Pan or useAnimatedGesture handler, I have tried it and it much slower so I change to current code. If you guys can help me, I really appreciate it because this is almost 1 month I only work on this

here's a video of it. in emulator seems pretty good but in real device it don't. also if you asked why your code like this, because at first this is my code in react.js and it work perfectly fine (smooth gesture) and not stutter but when I try to migrate it to react native the performance is not very good.

Screen.Recording.2024-12-17.155717.mp4

[luxsush]

Did you find a solution