Exception thrown while executing UI block

[rickyhonline]

Unexpected behavior

ERROR: "Exception thrown while executing UI block: =[NSCFNumber firstObject]: unrecognized selector sent to instance ... ".

I'm working on the same project with the same code base as friend and we have copy pasted the react-native-svg example from the github page and we are using version 9.9.2. His works and mine doesnt. My error is being produced when I add any props (e.g stroke, fille etc..) to the circle or rect items from the examples. When i remove these props i get no errors but nothing shows up in the app.

React native info output:

Binaries:
Node: 12.13.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.17.3 - C:\Users\ricky\AppData\Roaming\npm\yarn.CMD
npm: 6.12.1 - C:\Program Files\nodejs\npm.CMD

npmPackages:
react: ~16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4
react-native-svg: 9.9.2

Describe what you expected to happen:

1. Since I am using the same code base and version of react-native-svg as my friend (it works for him), i expect the react-native-svg github example to work for me as expected.

[msand]

Not much to go on here, can you make a reproduction? Did you use expo install react-native-svg to install it?

[mattmattvanvoorst]

I've had the same happen to me. I run a managed Expo app, that after updating to SDK 37 produced this error. Had to revert from 11.0.1 to 9.13.3. Issue happens on both iOS and Android devices, Android throws a more descriptive error. I've attached a screenshot of both my emulators.

This is a simplified version of how I implemented it. I import an svg and pass the XML to an Icon component:

import { SvgXml } from 'react-native-svg'

<SvgXml
        xml={icon}
        role="presentation"
        aria-hidden="true"
        focusable="false"
        fill={color ? color : null}
        color={color ? color : null}
        width={width}
        height={height}
      />

[0xAlwaysDumpling]

I am also having the issues described above.
Just running expo install react-native-svg and trying to render a simple circle throws the above exception.
EXPO SDK 36.0.0

[msand]

Can you provide the svg content that triggers this?

[Jongkeun]

It's totally the same with me.
I'm using expo sdk 36.0.0 too.

[Jongkeun]

After changed react-native-svg version to 9.3.3, it was solved. 👍

[chialuka]

I have this same problem. However, it happens when I try to render svg with Storybook. I switched to 9.13.6 and it started working

[bakeruk]

The same issue using,

react-native-svg: "^12.1.0"
Expo SDK: 36.0.0.
yarn: 1.19.1
Node: 12.16.1

FIXED with "react-native-svg": "9.13.3"

[virgil9306]

Using an old version is NOT a solution, why is the new version not working, or why is expo pointing to a broken version?

I also just installed the version from expo install then drew a circle and got this error on iOS, but not expo-web. And Expo now warns me I'm using an old version that isn't the expected 11.0.0.

[foloinfo]

Same issue here.
I tried to find which version causes this issue and it seems like v11.0.1 is the one.

• 11.0.1 -> Not working
• 11.0.0 -> It works

@msand
Here is the svg content I used. (logo of Google photos)
https://upload.wikimedia.org/wikipedia/commons/archive/4/4f/20190930190015%21Google_Photos_icon.svg

expo SDK 36.0.0
yarn 1.22.4
node 12.16.3

I use react-native-svg-transformer to render this svg as a component.

edited: My setup was corrupt. My app.json had sdkVersion 36, though package.json says 37. It seems like using SDK37 with 11.0.1 fixes this issue.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[BradMcEvilly]

I am facing this issue as well. This is painful. Hopefully I'll be able to follow up with a solid solution here.

[AlexGrafe]

Having the same issue with v40.
Everything works fine on web but when I use any of my two iPhones or the Xcode iOS Simulator I get the issue.

package.json

{
  "homepage": "___",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^12.0.0",
    "@react-native-async-storage/async-storage": "^1.13.2",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.2",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "dayjs": "^1.9.6",
    "expo": "^40.0.0",
    "expo-application": "~2.4.1",
    "expo-asset": "~8.2.1",
    "expo-constants": "~9.3.3",
    "expo-font": "~8.4.0",
    "expo-linking": "~2.0.0",
    "expo-localization": "~9.1.0",
    "expo-random": "~10.0.0",
    "expo-screen-orientation": "~2.1.0",
    "expo-splash-screen": "~0.8.1",
    "expo-status-bar": "~1.0.3",
    "expo-web-browser": "~8.6.0",
    "i18n-js": "^3.8.0",
    "luxon": "^1.25.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-svg": "12.1.0",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@expo/config": "^3.3.3",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "jest-expo": "^40.0.0",
    "typescript": "~4.0.0"
  }
}

[luiss2113-dev]

(https://user-images.githubusercontent.com/62814020/130643952-7e01b8b3-cc6e-4a45-9eb7-31dbf4656cac.jpeg)

help me, please

[BradMcEvilly]

(https://user-images.githubusercontent.com/62814020/130643952-7e01b8b3-cc6e-4a45-9eb7-31dbf4656cac.jpeg)

help me, please

You're vendor locked into a higher version of react-native-svg via Expo so you'd have to npm run eject first, then reinstall the lower target dependency version described above (react-native-svg 9.13.3) without Expo (so run npm i [email protected].
NOTE: USE CAUTION - Always ensure you have a backup. I would do this from scratch in a separate directory so you don't lose any work or stash existing changes. From there, you can always cherry pick your new features, etc (depending on your standards and workflow).

This works for me.

[alzalabany]

i'm having this issue on §"react-native-svg": "^12.3.0",§
in android app crash, on ios it just show that warning.. any solution ?

[panc0051]

solution
expo install react-native-svg

[egorbedunkevich]

npm i [email protected] worked for me :)

[TijsM]

When I Installed react-native-svg using yarn add react-native-svg it installed the latest version (13.2.0)

When installing it using the expo cli expo install react-native-svg it installed the correct version (12.3.0)

[dtomaszewski]

Same issue here, it's working with 9.13.3 but it's not real solution to use deprecated version

[kbqdev]

For me 9.13.3 not working also latest not working. Get same issue please help.

[bohdanprog]

Hello,
If anyone is still facing that problem, please open a new issue and include a simple example. This will make it easier for us to assist you.

Thank you.