Rendering Canvas in lists

[Bayramito]

Is it good idea to use a Skia draw in list components? Like FlashList., FlatList or ScrollView ?

I tested this scenario, i draw a path with gradient colors and used it as. border on my FlashList, which has 200 images with pagination. I use FastImage as image component. And each time i render 20 images, once i reach to 5th / 6th page the app starting to get slow...

I check the memory usage it is around 40 / 50MB...

If i keep scrolling, it gets even worse..

This is the component that i draw on each item...

     <Canvas style={[StyleSheet.absoluteFill, {zIndex: -1}]}>
              {/*<Group>*/}
              {/*  <Box box={outer} color="transparent">*/}
              {/*    <BoxShadow dx={0} dy={0} blur={2} color="rgba(0,0,0,.2)" />*/}
              {/*  </Box>*/}
              {/*</Group>*/}
              {strokeWidth > 0 && (
                <Group>
                  <SkiaLinearGradient
                    start={vec(0, 0)}
                    end={vec(width, 1)}
                    mode={mode || "clamp"}
                    colors={STROKE_COLORS}
                    // colors={["red", "green"]}
                    positions={positions || []}
                  />
                  <Path path={path} style="stroke" strokeWidth={strokeWidth} strokeCap={"round"} />
                </Group>
              )}
            </Canvas>

As you can see i tested with and without BoxShadow. Ofc, its affecting the performance but without the shadows the app still remains slow...

Thats why i am asking is it a good idea to draw a Canvas on each item?