Exception thrown while executing UI block: - [RNSVGSvgView setOnClick]: unrecognized selector sent to instance 0x01071ca460

🐛 Bug Report

After upgrading to SDK 50 and React Native 0.73, I'm getting the following error:

Exception thrown while executing UI block: - [RNSVGSvgView setOnClick]: unrecognized selector sent to instance 0x01071ca460

To Reproduce

Render any <Icon /> with any props, using the following dependencies:

expo: 50.0.4 react: 18.2.0 react-native: 0.73.2 react-native-svg: 14.1.0 @eva-design/eva: 2.2.0 @ui-kitten/components: 5.3.1 @ui-kitten/eva-icons: 5.3.1

Expected behavior

Should render the icon.

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.2.0
@ui-kitten/components	5.3.1

Environment information

  expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 13.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
      Yarn: 4.0.2 - ~/.nvm/versions/node/v18.13.0/bin/yarn
      npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
    Managers:
      CocoaPods: 1.14.3 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
    IDEs:
      Xcode: 15.2/15C500b - /usr/bin/xcodebuild
    npmPackages:
      @expo/metro-config: ~0.17.1 => 0.17.3 
      babel-preset-expo: ^10.0.0 => 10.0.1 
      expo: ^50.0.0 => 50.0.4 
      react: 18.2.0 => 18.2.0 
      react-dom: 18.2.0 => 18.2.0 
      react-native: 0.73.2 => 0.73.2 
      react-native-web: ^0.19.10 => 0.19.10 
    npmGlobalPackages:
      eas-cli: 7.1.1
    Expo Workflow: managed

Stacktrace

Simulator Screenshot - iPhone 15 Pro Max - 2024-01-31 at 08 58 37

Solution

After debugging I found the problem is a prop onClick is passed to the Icon file (SVG), which seems to be an invalid property. I fixed it by applying the following patch:

diff --git a/ui/icon/icon.component.js b/ui/icon/icon.component.js
index 5a2e5969cf5d9d3722441eb143f920480269faeb..7b9c360fa765ee088fe6af0d8325c67ecce900fa 100644
--- a/ui/icon/icon.component.js
+++ b/ui/icon/icon.component.js
@@ -76,6 +76,7 @@ class Icon extends react_1.default.Component {
     };
     render() {
         const { name, pack, animation, animationConfig, ...iconProps } = this.props;
+        delete iconProps.onClick;
         const registeredIcon = iconRegistry_service_1.IconRegistryService.getIcon(name, pack);
         const iconElement = registeredIcon.icon.toReactElement(iconProps);
         if (!this.animation) {

However some questions remain open:

Who's sending this prop?
Should react-native-svg accept the prop?
Which library triggered the error?

akveo / react-native-ui-kitten