react-native-svg

react-native-svg copied to clipboard

Minimal reproducible example

Can't reproduce in a minimal environment because it doesn't show where the error is

Summary

After upgrading to SDK 50 Expo/ React Native 0.73 I've been unable to run my application that uses react-native-svg: 14.1.0, I'm getting the following error when running ONLY on the iOS simulator and it crashes immediately after opening the app:

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

RCTSurfaceStageIsPreparing
    RCTUIManager.m:1205
RCTSurfaceStageIsPreparing
FEA36690-A000-3C55-B700-9120B05AA69B
FEA36690-A000-3C55-B700-9120B05AA69B
FEA36690-A000-3C55-B700-9120B05AA69B
_dispatch_main_queue_callback_4CF
5CDC5D9A-E506-3740-B64E-BB30867B4F1B
5CDC5D9A-E506-3740-B64E-BB30867B4F1B
CFRunLoopRunSpecific
GSEventRunModal
179501B6-0FC2-344A-B969-B4E3961EBE10
UIApplicationMain
main
CB3FF411-4762-34D2-86A4-ECA13F9FB6C3

Environment

expo-env-info 1.2.0 environment info: System: OS: Linux 4.4 Ubuntu 20.04.6 LTS (Focal Fossa) Shell: 5.0.17 - /bin/bash Binaries: Node: 21.1.0 - ~/.nvm/versions/node/v21.1.0/bin/node Yarn: 1.22.21 - ~/.nvm/versions/node/v21.1.0/bin/yarn npm: 10.2.4 - ~/.nvm/versions/node/v21.1.0/bin/npm npmPackages: 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.6 => 0.19.7 react-native-svg: 14.1.0 npmGlobalPackages: eas-cli: 5.9.3 Expo Workflow: managed

I already rolled back to a previous Expo/ReactNative/react-native-svg and everything is working fine, so the problem really is with the update

Seems to happen with TouchableWithoutFeedback in my case. I'm creating a reproducible example. Changing to TouchableOpacity does the job. I just came across this, so I don't have more info ATM.

My deps

expo: 50.0.7 expo-status-bar: 1.11.1 react: 18.2.0 react-native: 0.73.4 react-native-svg: 14.1.0 expo-dev-client: 3.3.8

App.js

import { SafeAreaView, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
import LogoSvg from './assets/logo.svg.js';

export default function App() {
	return (
		<SafeAreaView>
			<View style={styles.container}>
				<TouchableWithoutFeedback 
					onPress={() => console.log('pressed')}
				>
					<LogoSvg width={200} />
				</TouchableWithoutFeedback>
			</View>
		</SafeAreaView>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
});

Seems to happen with TouchableWithoutFeedback in my case. I'm creating a reproducible example. Changing to TouchableOpacity does the job. I just came across this, so I don't have more info ATM.

My deps

expo: 50.0.7 expo-status-bar: 1.11.1 react: 18.2.0 react-native: 0.73.4 react-native-svg: 14.1.0 expo-dev-client: 3.3.8

App.js

import { SafeAreaView, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
import LogoSvg from './assets/logo.svg.js';

export default function App() {
	return (
		<SafeAreaView>
			<View style={styles.container}>
				<TouchableWithoutFeedback 
					onPress={() => console.log('pressed')}
				>
					<LogoSvg width={200} />
				</TouchableWithoutFeedback>
			</View>
		</SafeAreaView>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
});

In my case too. I was getting that navigation error only on iOS and I fixed it by changing my component from TouchableWithoutFeedback to Ripple from MaterialUI

Before (with error)

return (
    <>
      <TouchableWithoutFeedback
        onPress={togglePress}
        style={styles.Container}
      >
        <Icon width={4} height={18} />
      </TouchableWithoutFeedback>
      <View style={[styles.Main, { display: isOpen ? "flex" : "none" }]}>
        {children}
      </View>
    </>
  );

After (error fixed)

return (
    <>
      <Ripple
        onPress={togglePress}
        style={styles.Container}
      >
        <Icon width={4} height={18} />
      </Ripple>
      <View style={[styles.Main, { display: isOpen ? "flex" : "none" }]}>
        {children}
      </View>
    </>
  );

Environment

Npm Packages

• "@expo/config": "~9.0.0",
• "@expo/config-plugins": "^8.0.4",
• "@expo/metro-config": "~0.18.1",
• "expo": "~51.0.9",
• "react-native": "0.74.1",
• "react-native-material-ripple": "^0.9.1",

System

• Android Studio: 2023.2.1 Patch 2
• Device: iOS 17.5.1

Globals

• yarn: 1.22.19
• npm: 9.8.1
• node: 18.17.0

React-native-svg 15.2.0 the same problem :(

@6ase can you share the reproduction of that problem? Thank you!

@6ase can you share the reproduction of that problem? Thank you!

The problem is happens if we have SVG component inside of TouchableWithOutFeedBack component. Propblem happend is only in IOS versions, and work fine in android version. I change TouchableWithOutFeedBack to TouchableOpacity, where we have inside SVG component and the error is gone.

Here is a simple repro:

<TouchableWithoutFeedback onPress={() => console.log('press')}>
      <Svg height={30} width={30} viewBox="0 0 512 512">
        <Mask id="a">
          <Circle cx={256} cy={256} r={256} fill="#fff" />
        </Mask>
        <G mask="url(#a)">
          <Path
            fill="#0052b4"
            d="M0 0h133.6l35.3 16.7L200.3 0H512v222.6l-22.6 31.7 22.6 35.1V512H200.3l-32-19.8-34.7 19.8H0V289.4l22.1-33.3L0 222.6z"
          />
          <Path
            fill="#ffda44"
            d="M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0z"
          />
        </G>
      </Svg>
    </TouchableWithoutFeedback>