React-native-svg: No component found for view with name "RNSVGCircle"

[eemebarbe]

On iOS, only using the example components from the repo. React v. 15.4.2, React-Native v. 0.42.0, and react-native-svg v. 5.1.5

(I did react-native link it)

import Svg, {     
    Circle,
    Ellipse,
    G,
    LinearGradient,
    RadialGradient,
    Line,
    Path,
    Polygon,
    Polyline,
    Rect,
    Symbol,
    Use,
    Defs,
    Stop } from 'react-native-svg';

class PieCircle extends Component{
    static title = 'Draw a Pie shape with circle';
    render() {
        return <Svg
            height="100"
            width="100"
        >
            <Circle
                cx="50"
                cy="50"
                r="40"
                fill="#ddd"
            />
            <Circle
                origin="50, 50"
                rotate="-90"
                cx="50"
                cy="50"
                r="20"
                stroke="#0074d9"
                strokeWidth="40"
                fill="none"
                strokeDasharray="80, 160"
            />
        </Svg>
    }
}

[mariobento]

up

[zuckeyM-17]

I have same problem.

[vongohren]

Any feedback from the creator on this?

[YanaKopyshchyk]

Have the same problem. Did someone find a solution?

[vongohren]

@YanaKopyshchyk you have to upgrade this svg library. It has been recently released

[mariobento]

how recently @Snorlock ? using "react-native-svg": "^5.1.6" and having the same problem

[vongohren]

Following these issues:
https://github.com/react-native-community/react-native-svg/issues/288
⬇️
https://github.com/react-native-community/react-native-svg/issues/259
They say that it should be fixed in 5.1.6

But i see that im currently using master:
"react-native-svg": "github:react-native-community/react-native-svg#master",
And it works

[mariobento]

Damn, no luck using master as well! :S

[YanaKopyshchyk]

@Snorlock I have the latest version 5.1.6, but, unfortunately, the problem is still there

[vongohren]

Thats weird, have you cleared derived data? Done a new pod install?
Im pretty sure atleast master works

[YanaKopyshchyk]

I deleted node_modules and reinstalled everything, maybe something wrong with react-native link. @eemebarbe Have you solved this problem?
With react-native 0.42.3 works, but not with 0.41.2

[vongohren]

I never used react-native link.
Do you use cocoapods and swift?
Or either or, @YanaKopyshchyk?

[YanaKopyshchyk]

I don't use cocoapods and swift. Anyway, I think the problem is in the mismatch of the versions :(

[mariobento]

@YanaKopyshchyk you solved the problem in any way?

[YanaKopyshchyk]

@mariobento yes, but the problem was not with react-native-svg. I use react-native-maps and everything started working when I updated it to 0.13.0. ( Before the update everything worked except svg, but I had 'build failed' )

[cmedinasoriano1]

I had this problem. I didn't remember that I used yarn to install react-native-svg and used brew (Homebrew) to install yarn, but then I updated yarn with brew by running in the terminal "brew upgrade yarn" and then ran "yarn upgrade" to save the new dependencies. After that, everything is working fine in yarn 0.24.4 and [email protected].

I really hope this helps anyone struggling as I did.

[bendyorke]

I'm running into this problem as well. Created a new project (react-native init), added react-native-svg, manually linked on iOS, reset the cache, cleared watchman, and tried all of the demos. Both the latest version (5.2.0 at time of writing) and master fail.

Has anyone come up with a solution?

dependencies:
react-native: 0.45.0
react: 16.0.0-alpha.12

PS:
It's not just RNSVGCircle that doesn't work - all of the named imports have their respective errors. However, just using <Svg /> in the codebase results in the following error in the console:

Warning: Native component for "RNSVGSvgView" does not exist

[Andregreen]

So the way I got around this problem was by individually importing in each component.
import Rect from 'react-native-svg';
import Svg from 'react-native-svg';
import Circle from 'react-native-svg';
etc...

[elainen]

I got the "No component found.." error as well.

I have:
react@16.0.0-alpha.12
react-native@0.45.1
react-native-svg@5.2.0

I tried linking and unlinking, reinstalling and restarting all the things. In my case, I noticed this error when running react-native run-ios:

2017-06-20 11:42:47.870 xcodebuild[60263:1870365] CFPropertyListCreateFromXMLData(): Old-style plist parser: missing semicolon in dictionary on line 1267. Parsing will be abandoned. Break on _CFPropertyListMissingSemicolon to debug.

2017-06-20 11:42:47.873 xcodebuild[60263:1870365] CFPropertyListCreateFromXMLData(): Old-style plist parser: missing semicolon in dictionary on line 1267. Parsing will be abandoned. Break on _CFPropertyListMissingSemicolon to debug.

2017-06-20 11:42:47.874 xcodebuild[60263:1870365] Error Domain=NSCocoaErrorDomain Code=3840 "Unexpected character / at line 1" UserInfo={NSDebugDescription=Unexpected character / at line 1, kCFPropertyListOldStyleParsingError=Error Domain=NSCocoaErrorDomain Code=3840 "Missing ';' on line 1267" UserInfo={NSDebugDescription=Missing ';' on line 1267}}

and in line 1267 in my project.pbxproj I saw:

HEADER_SEARCH_PATHS = "$(SRCROOT)/../node_modules/react-native-navigation/ios/**""$(SRCROOT)/../node_modules/react-native-svg/ios/**";

so I changed it to:

HEADER_SEARCH_PATHS = (
  "$(SRCROOT)/../node_modules/react-native-navigation/ios/**",
  "$(SRCROOT)/../node_modules/react-native-svg/ios/**",
);

Not exactly sure how that happened but it ended up working for me.

[bendyorke]

What eventually worked for me was building and running with Xcode (pressing play in Xcode vs react-native run-ios). After doing that once, react-native run-ios started working. :)

[oliviachang29]

Tried Andregreen's method, but I just get a red rectangle.

Xcode build keeps failing, so bendyorke's suggestion isn't working at the moment. ;(

Any other suggestions?

"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-svg": "^5.2.0",

[alanbo]

Same for me "No component found for view with name "RNSVGCircle". Andregreen fix outputs only red rectangles. Building in xcode fails with the error: "ld: library not found for -lRNSVG-tvOS
clang: error: linker command failed with exit code 1 (use -v to see invocation)"

[alanbo]

I run svg example on iOS simulator with Expo and it works fine: https://docs.expo.io/versions/v18.0.0/sdk/svg.html

[alanbo]

For me this solves the problem #387 . Remove “libRNSVG-tvOS.a” in xcode and restart the project. Svg will work just fine.

[ant-fx]

I resolved this issue by adding RNSVG into my pod file and rebuilding:

pod 'RNSVG', :path => '../node_modules/react-native-svg'

then
pod install

[dwilt]

I ran into this about a month ago and am really sad to see this is still outstanding. I haven't figured out a way to get around it.

"react-native": "0.52.0",
"react-native-svg": "^6.0.1-rc.2",

Tried a lot of the suggestions here but to no avail. Per @alanbo - libRNSVG-tvOS.a wasn't even in my project. After the react-native link ran, I didnt' have any changes to my project.pbxproj file. Per @ant-fx - that line was added already for me from react-native link.

[msand]

@dwilt Have you tried to run e.g. https://github.com/magicismight/react-native-svg-example or https://github.com/msand/SVGPodTest if you want cocoapods?

[dwilt]

@msand No, I haven't tried either of those. Regarding the cocoapods, I don't need that if I do the react-native link way of installing, correct? The readme seems to indicate that the CocoaPods are only used if you install manually.

[msand]

True, was thinking it might be good to eliminate some variables, by trying to build and run and known to work repo. Cocoapods is only needed if you want that to handle configuring your native dependencies for your xcode project, e.g. if you want fbsdk installed in a CI compatible way etc.

[dwilt]

So, I'm sure that repo works but it's also a RN version behind (it's last commit was 2 months ago). Are you saying I should try to install the CocoaPods and go from there?

[msand]

Either that, or you can checkout a few commits earlier: https://github.com/msand/SVGPodTest/commit/4e36ccd24de0f23d8cffd8fce0b0c640048d47cc
Before the cocoapods integration.

[msand]

Or, just do the steps I did:
react-native init SVGTest
cd SVGTest
yarn add react-native-svg
react-native link react-native-svg

Remove libRNSVG-tvOS.a manually using xcode.
Build and run.

[msand]

This should work if following the linking instructions. Closing for now.

[tandemloop]

Didn't work.