'React/RCTImageLoader.h' file not found

[idoor88]

After installing the version 9.11.1, I did pod install, I got the issue with react-native-svg:
'React/RCTImageLoader.h' file not found:

I have RN 0.61.2 and "react-native-svg": "^9.11.1"
I did fresh pod install with react-native-svg pod, also It was mentioned here that RCTImageLoader.h is removed from RCTImage:
pilot4u/react-native-fs@05097bc

So what is the solution?

Steps to reproduce:

1. npm install react-native-svg --save
2. react-native link react-native-svg
3. cd ios, check Podfile for
   pod 'RNSVG', :path => '../node_modules/react-native-svg'
4. remove Pods folder and Podfile.lock
5. pod install
6. open xcode with file myproj.xcworkspace
7. Clean and build

My System:
System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Memory: 436.19 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.4.0 - /usr/local/bin/node
npm: 6.4.1 - /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
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 27.0.3, 28.0.2, 28.0.3
System Images: android-22 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.2 => 0.61.2
npmGlobalPackages:
react-native-asset: 2.0.0
react-native-cli: 2.0.1
react-native-cn-richtext-editor: 1.0.33
react-native-git-upgrade: 0.2.7

[msand]

Can you try with this? #1136

[idoor88]

Tried, still the same error, also the above link does not address React/RCTImageLoader.h not found issue, the file RNSVGImage.m still uses RCTImageLoader.h, which does not exist in React folder, I am using react-native 0.61.2 version.

[rafaelbpa]

Same problem here. Not working for me either. Trying to upgrade RN from 0.60.6 to 0.61.0

[Eukki]

I tried to solve it myself, it works for me
instead #import <React/RCTImageLoader.h>
add this
#import <React/RCTImageURLLoader.h>
#import <React/RCTImageShadowView.h>
#import <React/RCTImageView.h>
#import <React/RCTImageLoaderProtocol.h>
and instead
_reloadImageCancellationBlock = [self.bridge.imageLoader ...
this
_reloadImageCancellationBlock = [[self.bridge moduleForName:@"ImageLoader" lazilyLoadIfNecessary:YES]...

[rafaelbpa]

@idoor88 I followed all your steps to create a new blank project with only RNSVG and when I ran the project got an error complaining about the dependency RNCAsyncStorage. So I added the lib

yarn add @react-native-community/async-storage
react-native link @react-native-community/async-storage
cd ios
pod install

Then my project started running again. Updated to 0.61 successfully

It wasn't necessary to modify the header file. So your code won't break after every pod install you do.

[omars94]

@Eukki I did as you instructed but i was confused what do the ... stand for and after compiling I didn't get 'React/RCTImageLoader.h' file not found but I got library not found -lART has it occured with you ?

[Eukki]

@omars94 Sorry, ... I wanted to show that the _reloadImageCancellationBlock method is not finished, but only the beginning of self.bridge.imageLoader in this method needs to be changed.

I met -lReact and a similar error and it was not related to the react-native-svg, and the problem was in General -> Frameworks, Libraries, and Embedded Content, I left there only JavaScriptCore.framework

[msand]

Has anyone tested if this patch works with older versions of react-native?
@zhonglaoban Have you tried using this patch? Is there anything preventing you from using that? Your attitude is of the kind that gets people to stop maintaining open source, if you appreciate that this library exists at all, drop that attitude, or do the work yourself.

[msand]

I just realized you're probably hitting the issue which is documented in the readme: https://github.com/react-native-community/react-native-svg#ios-pre-rn-060

If cocoapods is used and if error RNSVGImage.m:12:9: 'React/RCTImageLoader.h' file not found occurs:

Add the following entry in Podfile:

    pod 'React', :path => '../node_modules/react-native', :subspecs => [
        [...]
        'RCTImage', # <-- Add RCTImage
    ]

and run pod install from ios folder

[msand]

At least, when I make a clean project, and add react-native-svg, it builds fine, but gives a deprecation warning. And RCTImageLoader.h certainly exists in React-Core/CoreModulesHeaders/ and RCTImageLoader.mm in React-CoreModules/ in v0.61.2 of react-native

[msand]

Can you try with the latest commit from the develop branch? 5452144

[zhonglaoban]

in the [email protected]. React-RCTImage is a independent module. the pod file is like this

pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  

which dose not contain the file RCTImageLoader.h or RCTImageLoader.mm

[zhonglaoban]

thank you for replaying me. this commit 5452144 is really helped.

[msand]

@zhonglaoban My Podfile from the fresh project looks like this:

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'AwesomeProjectRN0612' do
  # Pods for AwesomeProjectRN0612
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  target 'AwesomeProjectRN0612Tests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

target 'AwesomeProjectRN0612-tvOS' do
  # Pods for AwesomeProjectRN0612-tvOS

  target 'AwesomeProjectRN0612-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

The files are in the React-CoreModules pod, not React-RCTImage, as they're part of the bridge.

[msand]

But I suspect this commit is a breaking change, I'm not sure when those files were introduced, or how it affects the cocoapods configuration in older versions of react-native. Should probably change it from a fix to breaking at least.

[msand]

I think i found a backwards compatible way to handle it now. So no need to mark it breaking.

[msand]

[zhonglaoban]

when using the React-CoreModules. the errors are gone. so don't need the breaking change 5452144

[msand]

Well, the change fixes a deprecation warning anyway, so no need to revert it either. Good to know the issue was Podfile related.

[msand]

🎉 This issue has been resolved in version 9.12.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[bmwertman]

After encountering this error while upgrading to RN 0.61.4 I bumped react-native-svg to 9.12.0(also tried 9.13.3) and got an error 'RNSVGContextBrush.h' file not found in both instances.

[msand]

Have you tried running pod install and cleaning the build?

[bmwertman]

Yes, no change.

On Sat, Nov 9, 2019 at 6:17 PM Mikael Sand ***@***.***> wrote: Have you tried running pod install and cleaning the build? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1141>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AATUMT2GZXWCBEFJX5OO5QDQS5AHVANCNFSM4I7ASZHQ> .

-- *Brad Wertman*

[bmwertman]

Sorry, I hadn't since installing with npm. That was it. Thanks!

[xtealer]

Ran into this issue with react-native 0.61.4

Fixed Adding these entries to Podfile:

  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"

then ran pod install
then edited on XCODE the React.podspec file (can be found at Pods/Development Pods/React/Pod/React.podspec) and added before the end tag the following lines:

  s.dependency "React-RCTActionSheet", version
  s.dependency "React-CoreModules", version