SyntaxError: Expected ",", [ \t\r\n], or [eE] but "-" found.

[SandeshVakale]

Bug

I am trying to use SvgCssUri or SvgUri but getting error below.
SyntaxError: Expected ",", [ \t\r\n], or [eE] but "-" found.

Url is working fine with browser
https://cdn.coinranking.com/B1N19L_dZ/bnb.svg

Environment info

React native info output:

System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
    Memory: 53.96 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.17.0 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.4 => 0.61.4 
  npmGlobalPackages:
    react-native-cli: 2.0.1
System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
    Memory: 53.96 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.17.0 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.4 => 0.61.4 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: ^12.0.3

Steps To Reproduce

Issues without reproduction steps or code are likely to stall.

<SvgCssUri
        width={100}
        height={100}
        uri={"https://cdn.coinranking.com/B1N19L_dZ/bnb.svg"}
      />

Describe what you expected to happen:
code gets crash. with these error
SyntaxError: Expected ",", [ \t\r\n], or [eE] but "-" found.

reportException | @ | ExceptionsManager.js:44
-- | -- | --
  | reactConsoleErrorHandler | @ | ExceptionsManager.js:124
  | console.error | @ | YellowBox.js:63
  | transformToMatrix | @ | extractTransform.ts:141
  | extractProps | @ | extractProps.ts:76
  | extract | @ | extractProps.ts:154
  | render | @ | Path.tsx:14
  | finishClassComponent | @ | ReactNativeRenderer-dev.js:13042
  | updateClassComponent | @ | ReactNativeRenderer-dev.js:12969
  | beginWork$1 | @ | ReactNativeRenderer-dev.js:15073
  | beginWork$$1 | @ | ReactNativeRenderer-dev.js:20459
  | performUnitOfWork | @ | ReactNativeRenderer-dev.js:19370
  | workLoopSync | @ | ReactNativeRenderer-dev.js:19347
  | renderRoot | @ | ReactNativeRenderer-dev.js:18997
  | runRootCallback | @ | ReactNativeRenderer-dev.js:18709
  | (anonymous) | @ | ReactNativeRenderer-dev.js:5642
  | unstable_runWithPriority | @ | scheduler.development.js:643
  | runWithPriority | @ | ReactNativeRenderer-dev.js:5591
  | flushSyncCallbackQueueImpl | @ | ReactNativeRenderer-dev.js:5638
  | flushSyncCallbackQueue | @ | ReactNativeRenderer-dev.js:5627
  | scheduleUpdateOnFiber | @ | ReactNativeRenderer-dev.js:18556
  | dispatchAction | @ | ReactNativeRenderer-dev.js:11484
  | tryCallOne | @ | core.js:37
  | (anonymous) | @ | core.js:123
  | (anonymous) | @ | JSTimers.js:289
  | _callTimer | @ | JSTimers.js:146
  | _callImmediatesPass | @ | JSTimers.js:194
  | callImmediates | @ | JSTimers.js:458
  | __callImmediates | @ | MessageQueue.js:407
  | (anonymous) | @ | MessageQueue.js:143
  | __guard | @ | MessageQueue.js:384
  | flushedQueue | @ | MessageQueue.js:142
  | invokeCallbackAndReturnFlushedQueue | @ | MessageQueue.js:138
  | (anonymous) | @ | debuggerWorker.js:69

[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.

[aliunco]

Unfortunately recently I've got the same problem with latest versions of node and react-native and react-native-svg

Environment info

System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Memory: 25.20 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.13.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 27, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.2
      System Images: android-28 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.2 AI-181.5540.7.32.5056338
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_121 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce (Updated)

<SvgWithCssUri 
      uri = "https://cdn.geekygames.it/ganjyab/init/store/emoji/emoji-CrocOrange/CrocOrange-1.svg" 
      width = "100" height = "100" />

Simply You should get crash!

[SyntaxError: Expected "(" or [ \t\r\n] but "3" found.] 

Please inform me if you have any information
Thanks

[MatthewCebenka]

I am receiving the same error.

"expo": "~41.0.1",

"react-native-svg": "^12.1.1"

[SyntaxError: Expected ",", [ \t\r\n], or [eE] but "-" found.]
[SyntaxError: Expected ",", [ \t\r\n], or [eE] but "-" found.]
[SyntaxError: Expected ")", ",", [ \t\r\n], [0-9], or [eE] but "-" found.]
[SyntaxError: Expected ",", [ \t\r\n], or [eE] but "-" found.]
[SyntaxError: Expected ",", [ \t\r\n], or [eE] but "-" found.]
[SyntaxError: Expected ")", ",", [ \t\r\n], [0-9], or [eE] but "-" found.]
[SyntaxError: Expected ",", [ \t\r\n], or [eE] but "-" found.]
[SyntaxError: Expected ",", [ \t\r\n], or [eE] but "-" found.]
[SyntaxError: Expected ")", ",", [ \t\r\n], [0-9], or [eE] but "-" found.]

[lyqht]

I'm getting a similar error here as well.

Dependencies

  "dependencies": {
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-svg": "^12.1.1"
  },

Code

import * as React from "react";
import { SvgUri } from "react-native-svg";

const TweetButton = () => {
    return (
        <SvgUri
            width="100%"
            height="100%"
            uri="https://api.iconify.design/ant-design:twitter-circle-filled.svg"
        />
    );
};

export default TweetButton;

Errors:

 ERROR  [TypeError: undefined is not a function (near '...transform.forEach...')]
 ERROR  [SyntaxError: Expected ")", ",", [ \t\r\n], [0-9], or [eE] but "d" found.] 

[bohdanprog]

Hello,
We already fixed that issue.
but if you still have that issue feel free to reopen.
Thank you.