onPress causing Image flicker

[matthieunelmes]

Almost appears to be triggering a re-render of the component which causes the Image to flicker. This doesn't happen with react-native-svg and only seems to occur when wrapped with the ZoomableSvg component.

<ZoomableSvg
           align="mid"
           width={width}
           height={height}
           vbWidth={100}
           vbHeight={100}
           initialTop={0}
           initialLeft={0}
           initialZoom={1}
           meetOrSlice="meet"
           constrain={{
             combine: 'dynamic',
             scaleExtent: [1, 2],
             translateExtent: [[-10, -10], [110, 110]],
           }}
           svgRoot={({ transform }) => (
             <>
               <Svg
                 style={styles.absfill}
                 width={width}
                 height={height}
                 preserveAspectRatio="xMinYMin meet"
               >
                 <G transform={transform}>
                   <Image
                     width="100"
                     height="100"
                     preserveAspectRatio="none"
                     href={{ uri: diagram.image }}
                   />
                 </G>
               </Svg>
               <Svg
                 style={styles.absfill}
                 width={width}
                 height={height}
                 preserveAspectRatio="xMinYMin meet">
                 <G transform={transform}>
                   {diagram.polygons.map((polygon) => (
                     <Polygon
                       key={polygon.$id}
                       points={polygon.points.toString()}
                       fill="none"
                       stroke={activeSegment === segment.$id ? `red` : 'none'}
                       strokeWidth="1"
                       onPress={() => setActiveSegment(segment.$id)}
                     />
                   ))}
                 </G>
               </Svg>
             </>
           )} />

[matthieunelmes]

To add to the above, it doesn't appear to be the actual onPress event, but when the polygon components get their stroke color updated. So it seems all child components within ZoomableSvg get rerendered when this happens. The flicker appears to only happen on Image components which I assume is due to it being an external image.

@msand love this repo and everything you've done here but appreciate you might not have time to maintain this. If you could point me in the right direction I'm happy to have a go and PR?

[matthieunelmes]

On further investigation, this only appears to affect functional components. I've reverted back to a class component and the flickering has disappeared. Would be nice to get to the bottom of the re-render, but I'll close this for now.