RenderableViews inside SvgView call onPress when pressed outside of SvgView

[latekvo]

Description

Given any RenderableView which is larger than the SvgView that it's contained in, the RenderableView will be pressable even on the areas that are hidden due to the element overflowing out of the SvgView

Interesting thing to notice is that when the touches are done inside the bounds of SvgView, they are dispatched through hitTest. When touches are done outside the bounds of SvgView, the hitTest methods are never called, and yet the events are still dispatched by other means (i could not find the source of these events).

Screen.Recording.2024-12-20.at.12.32.26.mov

Steps to reproduce

• run the provided repro code in place of the EmptyExample
• press on the orange rectangle
• press outside of the orange rectangle
• see how the onPress is called on each callback regardless of the touch location

Collapsed example code

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Rect, Svg} from 'react-native-svg';

function EmptyExample() {
  return (
    <View style={styles.container}>
      <Svg
        height="150"
        width="250"
        onPress={() => console.log('SVG: clicked oob container')}>
        <Rect
          x="-3000"
          y="-3000"
          width="6000"
          height="6000"
          fill="tomato"
          onPress={() => console.log('SVG: clicked oob square')}
        />
      </Svg>
    </View>
  );
}
EmptyExample.title = '';

const icon = (
  <Svg height="30" width="30" viewBox="0 0 20 20">
    <Rect x="0" y="0" width="20" height="20" fill="none" stroke="black" />
  </Svg>
);
const samples = [EmptyExample];

export {icon, samples};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 48,
    backgroundColor: 'tomato',
  },
});

Snack or a link to a repository

Code provided in the reproduction steps

SVG version

15.10.1 - main

React Native version

0.76.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

Xiaomi Redmi Note 8T, Pixel 3a emulator

Acknowledgements

Yes