Using React native skia with flashlist or flatlist. (Strange Error)

[AlekPacul]

I'm going to build interactive candlestick chart with react native, react native skia, and d3.js. I got strange error till this day, strangely it only happen in my remote work desktop (debian). But, when I add opaque to the canvas sometimes it work sometimes it freeze the emulator (can't do anything in the emulator). I'm using flashlist (same problem with flatlist), this is not a problem when I use react-native-svg so I migrate there. But when I try locally in my pc (windows) it worked perfectly fine without adding opaque or anything... but the problem is when using react-native-svg the JS thread drop pretty hard

Note : I'm using the latest version of react native skia.
React Native: 0.73.11
Flatlist: latest version

my code will be like this

 <>
              <View
                style={{
                  height: 400,
                  width: Dimensions.get('screen').width,
                }}>
                <AnimatedFlashList
                  ref={candleListRef}
                  horizontal
                  data={data}
                  renderItem={renderCandle}
                  onContentSizeChange={() => {
                    if (volumeListRef.current?.scrollToIndex && data.length > 0) {
                      volumeListRef.current?.scrollToIndex(data.length - 1)
                    }
                  }}
                  viewabilityConfigCallbackPairs={
                    viewabilityConfigCallbackPairs
                  }
                  estimatedItemSize={300}
                  onScroll={scrollHandler}
                  onLoad={() => setLoaded(true)}
                  pinchGestureEnabled={false}
                  extraData={visibleData}
                  removeClippedSubviews={false}
                  scrollEventThrottle={0}
                  keyExtractor={(item, index) => `${index.toString()} 2`}
                  contentContainerStyle={styles.flatListContainer}
                />
              </View>

and for the renderCandle is like this

const renderCandle = ({item, index}) => {
      const rectHeight = Math.abs(yScale?.(item.open) - yScale?.(item.close));
      const maxY = yScale?.(d3.max([item.open, item.close]));
      const highY = yScale?.(item?.high);
      const lowY = yScale?.(item?.low);
      const barWidth = 10;
      const center = barWidth / 2;
      const isBullish = item.close > item.open;


      return (
        <Canvas style={styles.candle}>
          <Group>
            <Rect
              x={0}
              y={maxY}
              width={6}
              height={rectHeight}
              color={isBullish ? 'green' : 'red'}
              style="fill"
            />
        
          </Group>

        </Canvas>
      );
    }

this is for other code

const visibleData = useMemo(() => {
    if (viewableIndices.length === 0) {
      return [];
    }
    const minIndex = Math.min(...viewableIndices);
    const maxIndex = Math.max(...viewableIndices);
    return data.slice(minIndex, maxIndex + 1);
  }, [viewableIndices, data]);

  // Calculate scale based on visible data
  const yScale = useMemo(() => {
    // Add padding to the scale range
    const min = d3.min(visibleData, d => d.low) || 0;
    const max = d3.max(visibleData, d => d.high) || 0;
    // Add 5% padding to top and bottom
    const padding = (max - min) * 0.05;
    return d3
      .scaleLinear()
      .domain([min - padding, max + padding])
      .range([400 - 10, 30]); // Chart height
  }, [visibleData]);

It's pretty weird that if I do that in my remote desktop (debian) it like have 2 second and freeze the emulator and even I cannot do npm run android again when it's freeze. I need to close the emulator and then npm run android again. can you guys help me? Thank you