Pointer Events on iOS seemingly broken after expo sdk 52 update

[jmfp]

Description

It seems like there is an issue with pointer events for ios and fiber (Could be wrong about it's relation to Fiber). In my project, I'm using react-native-gifted-charts to render a pie chart and then react-native-svg to essentially cut a hole in the middle of the chart. Users should be able to click on the chart (which is behind the svg) and navigate to a drilldown screen of the data it represents.

Before upgrading to expo sdk 52, everything worked as expected, afterwards, this flow only works on android devices. After removing the svg that covers the chart, clicking is possible again, but due to stakeholder requirements the svg has to be there. I'll attach some code and screens to help illuminate the issue

here is my dependencies in my package.json

"dependencies": {
    "@bugsnag/expo": "^52.0.0",
    "@expo-google-fonts/inter": "^0.2.3",
    "@expo/vector-icons": "^14.0.2",
    "@hookform/resolvers": "^3.10.0",
    "@react-native-community/datetimepicker": "8.2.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "11.4.1",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "@reduxjs/toolkit": "^1.9.3",
    "async-mutex": "^0.4.0",
    "date-fns": "^2.30.0",
    "expo": "~52.0.36",
    "expo-application": "~6.0.2",
    "expo-constants": "~17.0.7",
    "expo-crypto": "~14.0.2",
    "expo-device": "~7.0.2",
    "expo-file-system": "~18.0.11",
    "expo-font": "~13.0.4",
    "expo-linking": "~7.0.5",
    "expo-local-authentication": "~15.0.2",
    "expo-localization": "~16.0.1",
    "expo-secure-store": "~14.0.1",
    "expo-status-bar": "~2.0.1",
    "lodash": "^4.17.21",
    "posthog-react-native": "^3.9.0",
    "react": "18.3.1",
    "react-hook-form": "^7.54.2",
    "react-native": "0.76.7",
    "react-native-calendars": "^1.1294.0",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-gifted-charts": "^1.4.46",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-pager-view": "6.5.1",
    "react-native-paper": "^5.13.1",
    "react-native-paper-dates": "^0.22.34",
    "react-native-paper-dropdown": "^2.3.1",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "4.7.0",
    "react-native-svg": "15.8.0",
    "react-native-webview": "13.12.5",
    "react-redux": "^8.1.3",
    "redux-persist": "^6.0.0",
    "yup": "^1.6.1"
  }

here is my code for using the component

<Svg
        width={wrapperSize}
        height={wrapperSize}
        style={styles.holeContainer}
        pointerEvents={Platform.select({ ios: "auto", android: "box-none" })}
      >
        <Circle
          stroke="none"
          fill={theme.colors.background}
          cx={wrapperSize / 2}
          cy={wrapperSize / 2}
          r={holeSize / 2}
        />
      </Svg>

Steps to reproduce

use pointerEvents prop on iOS

<Svg
        width={wrapperSize}
        height={wrapperSize}
        style={styles.holeContainer}
        pointerEvents={Platform.select({ ios: "auto", android: "box-none" })}
      >
        <Circle
          stroke="none"
          fill={theme.colors.background}
          cx={wrapperSize / 2}
          cy={wrapperSize / 2}
          r={holeSize / 2}
        />
 </Svg>

Snack or a link to a repository

N/A

SVG version

15.8.0

React Native version

0.76.7

Platforms

iOS

JavaScript runtime

None

Workflow

Expo Go

Architecture

Fabric (New Architecture)

Build type

None

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[jakex7]

Hey! I appreciate you reporting this issue. I can confirm it's a bug, but I'm not sure when it will be fixed. In the meantime, as a workaround, you can wrap the Svg component in a View and set pointerEvents="none" on that View.

[jakex7]

Minimal reproduction for future

function Example() {
  return (
    <>
      <TouchableOpacity onPress={() => console.log('onPress')}>
        <View style={{width: 400, height: 400, backgroundColor: 'red'}}></View>
      </TouchableOpacity>

      <Svg
        height="300"
        width="300"
        style={{marginTop: -350}}
        pointerEvents="none">
        <Rect width="100%" height="100%" fill="green" pointerEvents="none" />
      </Svg>
    </>
  );
}

[jmfp]

Hey! I appreciate you reporting this issue. I can confirm it's a bug, but I'm not sure when it will be fixed. In the meantime, as a workaround, you can wrap the Svg component in a View and set pointerEvents="none" on that View.

This worked for me (I don't know why I didn't think to try that 😂 ) Thank you. If I get some free time this weekend I'll poke around the library and see if I can find something. This specific case worked out with some styling kung fu but I can see this being a larger issue in other cases.

[kacperzolkiewski]

Hi @jmfp, Thanks again for reporting this issue!

I've created PR #2787, which should resolve your issue. Could you test it and let me know if it works for you?