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

Question

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;

The same situation. Reinstalling the package react-native-svg with "expo install" helped me. — Javlon Tulkinov, Mar 05 '20 at 16:55
If you installed it using npm, remove the package first using `npm uninstall`. Then use `expo install` as @JavlonTulkinov mentioned. — Kewal Shah, Apr 03 '20 at 11:45
For anyone encountering this problem with `react-native-svg-charts` and expo make sure to uninstall both `react-native-svg-charts` and `react-native-svg`, then first do `expo install react-native-svg`, then `npm install --save react-native-svg-charts`. Lost my entire day to this. — Jesse, Jun 21 '20 at 13:20
I have solved a simillar problem here for Victory Native: https://stackoverflow.com/a/73302893/614065 — Olcay Ertaş, Aug 10 '22 at 08:15
@Jesse u may have lost a day but u most certainly saved me one :) — Jeffery Tang, Nov 08 '22 at 03:11

score 9 · Accepted Answer · answered Jul 17 '20 at 14:24

9

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

answered Jul 17 '20 at 14:24

Abdelrhman Elmahdy

1,571
14
15

score 1 · Answer 2 · answered Oct 01 '22 at 03:11

I was having same issue when using react-native-heroicons version 3.2.0. https://github.com/ecklf/react-native-heroicons

I downgraded react-native-svg which also gets installed with react-native-heroicons from 13.0.0 to 12.3.0 which then started to work.

To uninstall and install 12.3.0 version of react-native-svg follow below:
npm uninstall react-native-svg
npm install react-native-svg@12.3.0

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

2 Answers2