React-native-svg: React/UIView+React.h file not found

[uriklar]

Installed latest version using yarn add react-native-svg. Using React v15.3.1 and RN v0.39.2.
Ran react-native link react-native-svg and everything seemed to be working.

When building in XCode I'm getting the following error:
Lexical or Preprocessor Issue: React/UIView+React.h file not found

I checked and libRNSVG.a is in Link Binary With Libraries

Any ideas what i'm doing wrong? Thanks

[julienfouilhe]

I've got the same issue when updating to 4.5.0 with react-native 0.40.0 and react 15.4.1

[uriklar]

Seems like it's related to the first breaking change here:
https://github.com/facebook/react-native/releases/tag/v0.40.0
Which could explain why it doesn't work with 0.39.2, but then I would expect it to work with 0.40.0

[julienfouilhe]

Sorry, it may be because I forgot to pod install, trying

[gen4sp]

any news?

[uriklar]

Using [email protected] worked for me (with [email protected])

[magicismight]

You have to upgrade the react-native to 0.40.0 or downgrade react-native-svg to 4.4.x
The iOS native code is not compatible between 0.40.0 and the versions below.

[email protected] and above is only supported on [email protected].

You can find the related change logs in here

[julienfouilhe]

@magicismight It still didn't work for me when using 0.40.0, it works if I link the React.framework to the RNSVG target:

I'm using react native and react native svg in an existing iOS app

[xiaxiazhu]

react-native: 0.38.1 , rnsvg:4.6.1. still not work.. any news?

[ghost]

react-native: 0.38.1 , rnsvg:4.4.1 , react:15.4.1. still not work.. any news?

[magicismight]

@superstarwulinreact-native-svg >= 4.5.0 only supports react-native >= 0.40.0 and react >= 15.4.0
You can upgrade react-native to 0.40.0 or downgrade react-native-svg.

After upgrading [email protected] and react-native-svg>=4.5.0 try:
Clean XCode project and run

react-native upgrade
react-native link

[grubstarstar]

I am getting this error with [email protected] and [email protected], any ideas why?

[anddygon]

react-native: 0.43.3 , rnsvg:4.5.0 , react:16.0.0-alpha.6. still not work.. any news?
I use it in a already existed app that base on swift, cocoapods

[ferologics]

getting this at random project change on "react-native-svg": "^5.1.8" & "react-native": "0.45.1" and it's kinda driving me nuts b/c the CI keeps failing on it as well. Would be great to fix this for good.

[julienfouilhe]

@ferologics What's in your podfile ?
Also, from the README:

react-native-svg >= 5.2.0 only supports react-native >= 0.45.0 and react == 16.0.0-alpha.12

I'd try to upgrade if I were you

[iroth]

I am having the same issue, and I do not think its a version issue, but some setup of the project. I am using react-native-svg 5.3.0 and react-native 0.46.1 with react 16.0.0-alpha.12.
The react-native link react-native-svg command adds the library to the XCode project, and when it tries to compile the sources I get the above error.

[pcompassion]

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

same issue here..

https://github.com/react-native-community/react-native-svg/issues/277

removes the error but React/RCTConvert.h file is not found now;

[ant-fx]

Same here:

"react": "16.0.0-alpha.12",
"react-native": "^0.46.1",
"react-native-svg": "^5.4.1"

Any update on this?

[xutm]

same here:

"react-native": "0.50.4",  
"react-native-svg": "^6.0.0"

pod 'RNSVG', :path => '../../node_modules/react-native-svg', :inhibit_warnings => true 
pod 'React', :git => '../../node_modules/react-native', :inhibit_warnings => true, :subspecs => [
'Core',
'BatchedBridge', # needed for loading bundle I think
'DevSupport', # needed for debugging menu
'RCTAnimation', # needed for react-navigation
'RCTImage', # needed for react-navigation
'RCTLinkingIOS', # needed for linking libraries
'RCTText',
'RCTNetwork',
'RCTWebSocket', # needed for debugging
] 
pod 'yoga', :path => '../../node_modules/react-native/ReactCommon/yoga', :inhibit_warnings => true

when pod install, throw error

anyone help me??
thanks!!!

[msand]

@xutm Seems you've upgraded react without running pod install or pod update.

The other problems in this issue are probably version incompatibilities between react-native and react-native-svg, check the compatibility table in the readme. Otherwise reopen.

[heks]

I still seem to be getting this issue with

"react-native-svg": "^5.5.1"
"react-native": "^0.51.0",
"react": "^16.0.0",

[msand]

Can you post a full reproduction as a git repo?

[heks]

@msand
this is weird because this library was working earlier for me and then it broke when I was trying to fix something else (unrelated like trying to add a react-native-picker lib)

So regardless I found the issue when you do the react-native link install process and the Podfile install process, so I just removed the Pod install stuff used react-native link and it worked. Also make sure to reset ur cache npm start -- --reset-cache

[patrick-samy]

Still having the same problem with:

"react": "16.3.1",                                                                                                                                                                                                                    
"react-native": "~0.55.2",                                                                                                                                                                                                            
"react-native-svg": "^6.4.1", 

In file included from /Users/patrick/Projects/span/app/node_modules/react-native-svg/ios/ViewManagers/RNSVGCircleManager.m:9:
In file included from /Users/patrick/Projects/span/app/node_modules/react-native-svg/ios/ViewManagers/RNSVGCircleManager.h:9:
In file included from /Users/patrick/Projects/span/app/node_modules/react-native-svg/ios/ViewManagers/RNSVGRenderableManager.h:9:
In file included from /Users/patrick/Projects/span/app/node_modules/react-native-svg/ios/ViewManagers/RNSVGNodeManager.h:9:
/Users/patrick/Projects/span/app/node_modules/react-native-svg/ios/RNSVGNode.h:9:9: fatal error: 'React/Views/UIView+React.h' file not found
#import <React/Views/UIView+React.h>
        ^~~~~~~~~~~~~~~~~~~~~~~~~~~~

Any suggestions? I've tried pretty much everything in this issue.

[maxkomarychev]

@patrick-samy how are your react-native and react-native-svg installed? with pods or without?

[patrick-samy]

@maxkomarychev react and react-native come from an ejected CRNA app and react-native-svg is installed with pods.

I've also tried the manual install without success.

[maxkomarychev]

disclaimer: I've never used crna so I am not 100% sure here.

@patrick-samy There are issues using projects which combine both manual and cocoapods setup. I usually use cocoapods-based setup when everything (including react-native) is installed with cocoapods.

Can you rollback all your changes you made in ios project so far and just run react-native link react-native-svg? It is supposed to be smart enough to chose between static and pod setup and react-native-svg's docs seems a bit outdated

cc @msand it worth reviewing installation instruction sometime soon

[patrick-samy]

FYI upgrading react-native to 0.55.4 fixed the header issue but crashing at runtime.

@maxkomarychev will try that from a fresh CRNA project

[patrick-samy]

@maxkomarychev same error with a fresh working codebase and using react-native link react-native-svg.

It adds pod 'RNSVG', :path => '../node_modules/react-native-svg' to my Podfile and running pod install adds the RNSVG and React pods.

[patrick-samy]

One thing seems strange:

patricks-macbook-pro:app patrick$ grep 'version' ios/Pods/React/package.json 
  "version": "0.11.0",

Not sure why this version is pulled by pod install

patricks-macbook-pro:app patrick$ cat node_modules/react-native-svg/RNSVG.podspec 
require 'json'

package = JSON.parse(File.read(File.join(__dir__, 'package.json')))

Pod::Spec.new do |s|
  s.name             = 'RNSVG'
  s.version          = package['version']
  s.summary          = package['description']
  s.license          = package['license']
  s.homepage         = 'https://github.com/magicismight/react-native-svg'
  s.authors          = 'Horcrux Chen'
  s.source           = { :git => 'https://github.com/magicismight/react-native-svg.git', :tag => s.version }
  s.source_files     = 'ios/**/*.{h,m}'
  s.requires_arc     = true
  s.platforms        = { :ios => "8.0", :tvos => "9.2" }
  s.dependency         'React'  
end

[maxkomarychev]

@patrick-samy can you post your Podfile here? React is now supposed to be installed as _development_ pod from local file system, it should not exist in ios/Pods/React.
Here's the guide on how to integrate React with cocoapods: https://facebook.github.io/react-native/docs/integration-with-existing-apps

Both static and cocoapods integration worked for me for app create with CRNA. You can find sample here: https://github.com/maxkomarychev/svg-integrate

[patrick-samy]

Interesting, my Podfile is completely different. Using CRNA 1.0.0, React doesn't seem to be integrated through cocoapods:

patricks-macbook-pro:old-app-3 patrick$ cat ios/Podfile
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'app' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for app
  pod 'GoogleSignIn'

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

end

How did you eject from CRNA?

[maxkomarychev]

@patrick-samy yarn run eject after this step react is integrated statically. it doesn't take care of pods. if you need to use it with pods - follow this guide https://facebook.github.io/react-native/docs/integration-with-existing-apps

[lhang]

my version is correct, but had same problem. and I solve this by:

1. react-native unlink react-native-svg
2. add pod 'RNSVG', :path => '../node_modules/react-native-svg' to my pod file

[ghost]

_I solved this issue like following._
When we search #import <React/UIView+React.h> in the search box at the Xcode' project, we can see many linked libraries include the line. If you go to the any one of working library' project, build setting/header search part, you can find this lines:
$(SRCROOT)/../../../React
$(SRCROOT)/../../react-native/React
Include the lines to the RNSVG.xcodeproject, TARGETS: RNSVG, BuildSettings/ header search path with recursiveoption. refer the screenshot please.

[msand]

You seem to be running quite an old version. Performancebezier and quartzbookpack haven't been included for quite some time. But thanks for the info anyway!

[ghost]

Hi _msand_, thank you for your comment.
Did you reply to me? or to others?

If it is for me, What do you mean "old version" ?
Following is my version:

    "react-native-svg": "6.3.1"
    "react": "16.3.2",
    "react-native": "0.55.3",
XCODE 10.0 , MacOS High Sierra 10.13.6

Could you explain about this in detail?

Performancebezier and quartzbookpack haven't been included for quite some time.

How do I include them and what they is needed for?

[msand]

@Aurelyn10 Yes I was replying to you, as I looked at your screenshot and noticed the old dependencies. The latest version of react-native-svg is v7.1.2
If you want to stay on version 6 I would still recommend running at least v6.5.2
Lots of bugs have been fixed since v6.3.1 and the Performancebezier and quartzbookpack dependencies (which you currently have in use) have been removed.

[shreyasb07]

@Aurelyn10
I tried what you had suggested in the screenshot above, about adding to the Header paths, but I still continue to face the same error and the build fails.

My react-native version is 0.43.3 and react-native-svg is at 5.1.6

Do I need to update these to a later version as @msand has suggested?

[msand]

I would recommend upgrading to the latest version of both react-native and react-native-svg

[mattslight]

upgrading fixed for me. Came here with an issue on

react-native-svg 9.3.5 and react-native 0.60

Upgrading to react-native-svg 9.12.0 fixed this issue for me