Open faisstzera opened 6 months ago
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.
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
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 toTouchableOpacity
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
return (
<>
<TouchableWithoutFeedback
onPress={togglePress}
style={styles.Container}
>
<Icon width={4} height={18} />
</TouchableWithoutFeedback>
<View style={[styles.Main, { display: isOpen ? "flex" : "none" }]}>
{children}
</View>
</>
);
return (
<>
<Ripple
onPress={togglePress}
style={styles.Container}
>
<Icon width={4} height={18} />
</Ripple>
<View style={[styles.Main, { display: isOpen ? "flex" : "none" }]}>
{children}
</View>
</>
);
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>
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:
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