Path onPress prop not triggered since upgrading to expo 54

[EveJulliard]

Description

Since we update our app to expo 54, the path of my Svg are not pressable anymore.
On real android device, the onPress function is never called but surprisingly it is on android emulator. I reckon it is because user presses are not handled the same wether it is on a real device or on an emulator.

Steps to reproduce

1. Add an SVG with paths on your app
2. Add an onPress callback on the paths
3. Presses on on path

Expected result : the onPress callback is triggered
Result : nothing append

Snack or a link to a repository

https://snack.expo.dev/@healico/react-native-svg-path-not-pressable

SVG version

15.13.0

React Native version

0.81

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

Huawei P30 Lite / Google Pixel 9A

Acknowledgements

Yes

[kacperzolkiewski]

Hi @EveJulliard,

Thanks for reporting the issue!

There's indeed an issue with the new architecture when it comes to handling onPress events on Android devices.
As a temporary workaround you can use onPressIn instead of onPress for your Path component like this:

        <Path
          d={rightHalf}
          fill={rightActive ? '#E74C3C' : '#F5B7B1'}
          stroke="#000"
          onPressIn={() => {
            console.log('Right half pressed');
            setRightActive(v => !v);
          }}
        />

[EveJulliard]

Amazing, thanks @kacperzolkiewski !
Do you happen to know where this issue comes from? I tried debugging it, but I couldn’t quite figure out the root cause.

[kacperzolkiewski]

@EveJulliard I think that might be some error inside React Native: facebook/react-native#48387 (comment). Because currently when I debug code inside SVG, hitTest returns proper id of Path component during press action.

The difference between pressing with a finger (touch) and clicking with a mouse is in how Android reports the input events.
Finger touch involves three actions:

1. ACTION_DOWN – when your finger first touches the screen
2. ACTION_MOVE – as your finger moves slightly while still touching (this action somehow breaks press event)
3. ACTION_UP – when you lift your finger off the screen

Mouse click has only two actions:

1. ACTION_DOWN – when the mouse button is pressed
2. ACTION_UP – when the mouse button is released

[kacperzolkiewski]

Hi @EveJulliard,

I've created PR that should resolve your issue: #2802.
Can you test it and let me know if it works properly?