Search code examples
react-nativeexporeact-native-svg

Exception thrown while executing UI block when using react-native-svg

My app suddenly started crashing and gave me that error:

Exception thrown while executing UI block: -[__NSCFNumber firstObject]: unrecognized selector 
sent to instance 0xb553069cd18775de`

After sometime I was able isolate the part that generates the error and found out that it has to do with the Svg component imported from react-native-svg.
I tried removing and reinstalling node_modules and I tried reseting the cache, and I even tried creating a new expo app from scratch that does nothing but render an Svg component, but the problem still persists.

And on android I get a different error message:

Error while updating property 'fill' of a View managed by: RNSVGGroup
null
java.Lang.Double cannot be cast to
java.Lang.String

Here's what my code looks like:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Svg } from 'react-native-svg';

const App = () =>  (
  <View style={styles.container}>
    <Svg width={100} height={100}>

    </Svg>
  </View>
);

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

export default App;

Error Screenshot

Solution

  • Based on Javlon's comment the solution is to remove the package using npm uninstall react-native-svg or yarn remove react-native-svg
    And then installing it again with expo install react-native-svg