Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.

[jason102]

Hi all, I'm new to React Native and I'm getting the error in the title.

Perhaps this is related to another previous post made 1 month ago:
" Invariant Violation: Native component for "RNCWKWebView does not exist" "

[jason102]

I'm using Expo as well. Are they the same issue? If it is, how do I use the new webview component without Expo?

[jason102]

If I can't use Expo with this component, maybe I can just go ahead and use the old webview component assuming that Expo will eventually support it and then later switch to this one before RN removes the old one? I really would prefer not to have to do all the complicated Android Studio/Xcode setup work. I have Expo working just fine for everything else and think it's quite convenient....

[lunarraid]

I am not using expo and am running into this.

[jamonholmgren]

Hey folks, you won't be able to use this with Expo unless you eject.

If you are not using Expo or you have already ejected and you're still getting this issue, it may be because you forgot to run react-native link react-native-webview.

If you're still having trouble, feel free to file another issue or update this one. Thanks!

[lunarraid]

Closing the issue on the assumption that we're simply not following instructions is a bit premature. As I stated, I am not using Expo, and as I am capable of both understanding and following instructions, I did indeed run react-native link react-native webview. The link command stated it was successful, but failed to link the binaries to the project, which I had to do manually to make this work.

[jamonholmgren]

@lunarraid Apologies, did not intend to insinuate you're not following instructions. I closed the issue because the OP is using Expo and thus this particular issue is not relevant to your issue despite the similar error message.

If you can provide a minimal reproduction of this problem please do file a new issue.

[Titozzz]

@lunarraid I'm indeed interested in understanding what went wrong so please open an issue if you can provide a reproduction.

[lunarraid]

If I can find some time I'll see if I can reproduce it in a blank project. If it helps, my project is using pods, and the initial install link failed. I was able to get the link step to not fail by adding the # Add new pods below this line comment to my podfile, but even with the link 'succeeding' and the podfile addition, the library code was still not found at runtime. I had to remove the podfile entry and link it manually by adding the project and linking with the binary in Build Phases before it would work.

[Titozzz]

Ok, are you linking react with the pods or manually ?

[AndreevskiAleksandar]

Same thing is happening here. I have ejected the project from expo, did the react-native link react-native-webview and I get the "Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager." error. Reverting to the old webview until this is fixed.

[Titozzz]

Are you using cocoapods @AndreevskiAleksandar ?

[Titozzz]

Wait a minute RNCWebView does not exists, it's either RNCUIWebView or RNCWKWebView. There must be a bug 🤔

[lunarraid]

@Titozzz I have entries in my podfile for the react code, since react-native-webview refuses to build without them. They look like this:

  rn_path = '../node_modules/react-native'

  pod 'React', path: rn_path, subspecs: [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket'
  ]
  pod 'yoga', path: "#{rn_path}/ReactCommon/yoga"
  pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
  pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
  pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"

Annoyingly enough, I cannot reproduce this on a fresh project, though getting CocoaPods in general to work with react native (even on a fresh install) is such a pain in the rear. At the very least, using

# Add new pods below this line

was a requirement to get this working properly. Since I was unable to repro on a fresh project, I am going to assume that there is some library conflict or version issue that made the link step fail, and just keep my current manual link fix for my project. Feel free to hit me up if you have any more questions.

[Titozzz]

That is weird given that I have nearly the same podfile 🤔

[AndreevskiAleksandar]

@Titozzz no, I am not using CocoaPods.. Its a direct eject from Expo, without any tinkering around with that (just followed the basic docs). After that I just linked it and made sure all the dependencies are in the gradle and settings file (I tested it for Android only). I ll take a look again at this in a few days..

[Titozzz]

So I did :
react-native init test
yarn add react-native-webview
react-native link react-native-webview

and everythings work without cocoapods.

On my project I use cocoapods without issues too.

[kafaichoi]

I have this problem for android only . trying to troubleshoot
If its android, maybe u can check if the react native link properly

[Titozzz]

you probably did not add it inside the MainApplication.java

import com.reactnativecommunity.webview.RNCWebViewPackage;

and add new RNCWebViewPackage() to the packages list.

This often fail if you change MainApplication too much (using wix native navigation for example)

[jamonholmgren]

I tried spinning up a bare Expo app and ejecting immediately with ExpoKit, but got this error:

`Task 'installDebug' not found in root project 'android'.`

> Configure project :app 
Could not find google-services.json while looking in [src/prod/min/sdk/dev/kernel/debug, src/prod/min/sdk/dev/debug, src/prod/min/sdk/dev/kernel, src/prod/min/sdk/dev/kernelDebug, src/prod/min/sdk/debug, src/prod/min/sdk/dev, src/prod/min/sdk/devDebug, src/prod/min/debug, src/prod/min/sdk, src/prod/min/sdkDebug, src/prodMinSdkDevKernel/debug, src/debug/prodMinSdkDevKernel, src/prod/debug, src/prod/min, src/prod/minDebug, src/prodMinSdkDevKernel, src/debug, src/prodMinSdkDevKernelDebug, src/prod, src/prodDebug]
registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
Could not find google-services.json while looking in [src/prod/min/sdk/dev/kernel/release, src/prod/min/sdk/dev/release, src/prod/min/sdk/dev/kernel, src/prod/min/sdk/dev/kernelRelease, src/prod/min/sdk/release, src/prod/min/sdk/dev, src/prod/min/sdk/devRelease, src/prod/min/release, src/prod/min/sdk, src/prod/min/sdkRelease, src/prodMinSdkDevKernel/release, src/release/prodMinSdkDevKernel, src/prod/release, src/prod/min, src/prod/minRelease, src/prodMinSdkDevKernel, src/release, src/prodMinSdkDevKernelRelease, src/prod, src/prodRelease]
registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
Could not find google-services.json while looking in [src/prod/min/sdk/prod/kernel/debug, src/prod/min/sdk/prod/debug, src/prod/min/sdk/prod/kernel, src/prod/min/sdk/prod/kernelDebug, src/prod/min/sdk/debug, src/prod/min/sdk/prod, src/prod/min/sdk/prodDebug, src/prod/min/debug, src/prod/min/sdk, src/prod/min/sdkDebug, src/prodMinSdkProdKernel/debug, src/debug/prodMinSdkProdKernel, src/prod/debug, src/prod/min, src/prod/minDebug, src/prodMinSdkProdKernel, src/debug, src/prodMinSdkProdKernelDebug, src/prod, src/prodDebug]
registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
Could not find google-services.json while looking in [src/prod/min/sdk/prod/kernel/release, src/prod/min/sdk/prod/release, src/prod/min/sdk/prod/kernel, src/prod/min/sdk/prod/kernelRelease, src/prod/min/sdk/release, src/prod/min/sdk/prod, src/prod/min/sdk/prodRelease, src/prod/min/release, src/prod/min/sdk, src/prod/min/sdkRelease, src/prodMinSdkProdKernel/release, src/release/prodMinSdkProdKernel, src/prod/release, src/prod/min, src/prod/minRelease, src/prodMinSdkProdKernel, src/release, src/prodMinSdkProdKernelRelease, src/prod, src/prodRelease]
registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
Could not find google-services.json while looking in [src/dev/min/sdk/dev/kernel/debug, src/dev/min/sdk/dev/debug, src/dev/min/sdk/dev/kernel, src/dev/min/sdk/dev/kernelDebug, src/dev/min/sdk/debug, src/dev/min/sdk/dev, src/dev/min/sdk/devDebug, src/dev/min/debug, src/dev/min/sdk, src/dev/min/sdkDebug, src/devMinSdkDevKernel/debug, src/debug/devMinSdkDevKernel, src/dev/debug, src/dev/min, src/dev/minDebug, src/devMinSdkDevKernel, src/debug, src/devMinSdkDevKernelDebug, src/dev, src/devDebug]
registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
Could not find google-services.json while looking in [src/dev/min/sdk/dev/kernel/release, src/dev/min/sdk/dev/release, src/dev/min/sdk/dev/kernel, src/dev/min/sdk/dev/kernelRelease, src/dev/min/sdk/release, src/dev/min/sdk/dev, src/dev/min/sdk/devRelease, src/dev/min/release, src/dev/min/sdk, src/dev/min/sdkRelease, src/devMinSdkDevKernel/release, src/release/devMinSdkDevKernel, src/dev/release, src/dev/min, src/dev/minRelease, src/devMinSdkDevKernel, src/release, src/devMinSdkDevKernelRelease, src/dev, src/devRelease]
registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
Could not find google-services.json while looking in [src/dev/min/sdk/prod/kernel/debug, src/dev/min/sdk/prod/debug, src/dev/min/sdk/prod/kernel, src/dev/min/sdk/prod/kernelDebug, src/dev/min/sdk/debug, src/dev/min/sdk/prod, src/dev/min/sdk/prodDebug, src/dev/min/debug, src/dev/min/sdk, src/dev/min/sdkDebug, src/devMinSdkProdKernel/debug, src/debug/devMinSdkProdKernel, src/dev/debug, src/dev/min, src/dev/minDebug, src/devMinSdkProdKernel, src/debug, src/devMinSdkProdKernelDebug, src/dev, src/devDebug]
registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
Could not find google-services.json while looking in [src/dev/min/sdk/prod/kernel/release, src/dev/min/sdk/prod/release, src/dev/min/sdk/prod/kernel, src/dev/min/sdk/prod/kernelRelease, src/dev/min/sdk/release, src/dev/min/sdk/prod, src/dev/min/sdk/prodRelease, src/dev/min/release, src/dev/min/sdk, src/dev/min/sdkRelease, src/devMinSdkProdKernel/release, src/release/devMinSdkProdKernel, src/dev/release, src/dev/min, src/dev/minRelease, src/devMinSdkProdKernel, src/release, src/devMinSdkProdKernelRelease, src/dev, src/devRelease]
registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)


FAILURE: Build failed with an exception.

* What went wrong:
Task 'installDebug' not found in root project 'android'.

So I'll wait for a repro to clone down first.

[levi-beers]

Not using Expo, I still have the issue with Android even though my MainApplication.java is fixed and react-native-webview is linked.

[Titozzz]

can you tell me more ?

[Shragenator]

Experiencing this issue in ejected expo after a successful link (by running react-native link react-native-webview and then confirming that RNCWebViewPackage() is imported and linked in MainApplication.java as according to @Titozzz ).

For myself the error is: "Invariant Violation: Invariant Violation: Invariant Violation: Native component for "RNCWebView" does not exist

Going to investigate the source for the react-native-webview module to see if I can spot the problem.

UPDATE: my issue was simply from putting webview inside another view in render. It needs to be returned on its own.

[mog3n]

How I got it to work with cocoapods:
I ran react-native link react-native-webview, which for some reason did not fully link the libraries. I got the error that all you guys are experiencing when recompiling the app after linking.

I went to manually link the library.

1. Drag the xcodeproj from node_modules/react-native-webview/ios/ into XCode my_app/Libraries
2. Under build phases -> link binary with libraries, add libRNCWebView.a
   Here's my Podfile

platform :ios, '9.0'
target 'spark' do
  # Pods for spark
  pod 'Firebase/Core', '~> 5.3.0'
  pod 'Firebase/Auth', '~> 5.3.0'
  # pod 'Firebase/Database', '~> 5.3.0'
  # pod 'Firebase/Performance', '~> 5.3.0'
  pod 'Firebase/Messaging', '~> 5.3.0'
  pod 'react-native-webview', :path => '../node_modules/react-native-webview'
end

This seemed to work for me. Hope this helps any noobies such as myself. At first it didn't work. So then I unlinked it react-native unlink react-native-webview, then redid the process. I'm not sure what changed but it worked! I built using Xcode rather than react-native run-ios

[lunarraid]

@mog3n You will likely need to remove the pod reference if you are linking under build phases. It didn't trigger for me, but this caused duplicate symbol errors for other people pulling down my project afterwards. Removing the pod reference fixed it for everyone.

[Sbphillips19]

Mine works in IOS but I haven't been able to get it to work in android. I have already followed everything above and see these in my MainApplication file:

import com.reactnativecommunity.webview.RNCWebViewPackage;
new RNCWebViewPackage()

Not really sure what else to try. Have trying rebuilding and linking many times.

[MSSPL-PiyaleeMaiti]

There is a linking section in the readme

@Titozzz There is react-native-link for automatic linking. But there should be explain about manual linking. In our project automatic linking not working always(in Android), so I was needed the manual linking in MainApplication.java. That's why I am telling. The manual linking should be in readme.

[Titozzz]

@MSSPL-PiyaleeMaiti https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md#2-link-native-dependencies

Did you see that part?

[MSSPL-PiyaleeMaiti]

@MSSPL-PiyaleeMaiti https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md#2-link-native-dependencies

Did you see that part?

No, not seeing this part. Sorry. 🙃 it's my mistake.

[Titozzz]

What should we update so that everyone sees it?

[MSSPL-PiyaleeMaiti]

You can update the brief details in readme instead of article link, then give article link to follow details. Piyalee Maiti Thanks & Regards

…

On Wed, 20 Mar 2019, 7:36 pm Thibault Malbranche, ***@***.***> wrote: What should we update so that everyone sees it? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#140 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ATvL-ZWtOydPKC62Jlwy8N600-zTJlTlks5vYkBxgaJpZM4Yl_ti> .

[waqaramjad]

same issue in expo

[TommyLeong]

I was facing the similar issue Invariant Violation: requireNativeComponent:xxx not found in UIManager

Issue seems to be the dependent is not linked to your project, hence 2 solutions for this issue (depending on your 'dependency')

1. run react-native link in terminal/cmd at your project path.
2. Manual append the dependency in your MainApplication.java as shown below:

@Override
    protected List<ReactPackage> getPackages() {      

      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for 
      packages.add(new RNFirebaseAnalyticsPackage());
      packages.add(new xxxPackage());
    }

[dennisclementino]

After trying so hard to make it

yarn add react-native-webview

react-native link react-native-webview,

cd ios && pod install && cd ..

[TommyLeong]

@dennisclementino Do your podfile has the following line?
pod 'react-native-webview', :path => '../node_modules/react-native-webview'

[luatnd]

I'm facing a similar issue:

Invariant Violation: requireNativeComponent: "RNCUIWebView" was not found in the UIManager.

react-native@0.61.x
react-native-webview@8.0.3

I'm using auto-link

[itolegmysin]

I'm facing a similar issue:

Invariant Violation: requireNativeComponent: "RNCUIWebView" was not found in the UIManager.

react-native@0.61.x
react-native-webview@8.0.3

I'm using auto-link

Hey, I'm facing a similar issue as well, following manual linking steps help me at least:

1. android/settings.gradle:

include ':react-native-webview'
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')

2. android/app/build.gradle:

dependencies {
    implementation project(':react-native-webview')
    ....

3. MainApplication.java:

import com.reactnativecommunity.webview.RNCWebViewPackage;
....

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNCWebViewPackage(),
          ....

4. ios/Podfile.

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

5. react-native.config.js (I'm using 0.61.5 version of react-native):

....
'react-native-webview': {
      platforms: {
        android: null, // disable Android platform, other platforms will still autolink if provided
      },
    },

[LusineGasparyan98]

@itolegmysin I have tried the same as you did without changing react-native-config.js file and it succeeded. I think if you undo that file, it will work

[Ericnsamba]

Clean your build file, this worked for me.
if you're using xcode, In Xcode navigate to:
Product > scroll down to Clean > Press and hold Option ⌥ then click on clean

[tresf]

I'm documenting how I got to this failure here in hopes to identify why this message occurs.

Edit: I think it was the SDK. Posted solution here #140 (comment).

Detailed steps that were NOT working

Edit: Posted solution here #140 (comment).


Platform: MacOS 10.15 Catalina, Android Studio 3.6.1, Android SDK 29, Nexus 5X API 29 x86, AdoptOpenJDK11 (from Adopt's website, not homebrew)

From the Getting Started guide...

• Started following the Expo guide.
  • When I realized it required a special app to run, stopped, deleted the project.
• Starting following the React Native guide.
  • I had already had Android Studio installed and working with another Hello World (written in Java) so some steps were skipped. The one missing step was adding the Android SDK Command Line Tools which was skipped on initial install.
  • The above problem was observed because of errors regarding agreeing to the license.
• Got the React Native example running.

Next, I started using the LogRocket tutorial for setting up the WebView component.

• Without yarn, I followed the npm steps
• I had misread the linking step...

  "From react-native 0.60, auto-linking will handle the linking process, but don’t forget to run pod install."

  • I'm not using pods, and I didn't know if this meant auto-linking was going to handle this. I tried the command but it failed on zsh, which is the recommended shell for macOS 10.15.
  • Knowing that tools might be coded for bash, I switched to bash, ran the command: react-native link react-native-webview. It said it was successful.
• The error Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager. still persists, so I read each recommendation and comment here.
• Per above recommendations I followed the guide Demystifying react-native modules linking to no avail. I noticed the article recommends a change to getPackages(), but it didn't seem to work, the same error persists.

I'm sure something above involves an out-of-place step or wrongly followed instructions, but due to the number of people affected by this, I feel there's something awry that's easy to stumble upon, or common steps to make mistake on. I'm a completely newbie at React Native, but I'm evaluating it against Java for a project.

Note, I didn't know how to follow the above XCode fixes since I'm not using that as an IDE. If there's an equivalent for Android Studio, please let me know so that I can try it. 🍻

[tresf]

Update to the above...

• Started over with React Native Guide using bash (probably not relevant)
• Installed Android 9.0 "Pie 28" (I had Android 10.0 "Q 29", a step I had skipped over because Android Studio was already installed)
  • Android Studio -> Preferences -> Appearance and Behavior -> System Settings -> Android SDK -> Android 9.0 (Pie) 28
• Created new project under new name (probably not relevant)
• Followed the LogRocket tutorial

... and now it works. Would the Android SDK cause this error? If so, why didn't it occur when running a vanilla React Native app?

Edit: Apologies for all the details above, I was hoping that tracing steps would help others. 🥂

[chris-hut]

So I was running into this similar issue on android while converting an existing android app into a react native one, and my good friend @Afroholic78 realized that within the onCreate of our ReactNative activity, we need to add the package there as well!

mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .addPackage(new RNCWebViewPackage()) // this saved our lives
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

I wasn't able to see this documented anywhere, but this is seemingly the only thing that fixed it for us!

[JakinTayo]

This library has frustrated me I have done everything. Please help with this library or help with alternative libraries. Please.

[sebgam]

This library has frustrated me I have done everything. Please help with this library or help with alternative libraries. Please.

I have the same problem did you manage to solve it?

[akshay9]

I was facing this same error, fixed it by re-running
npx react-native run-android

[akshaypunchh]

I think you did not link react-native-webview so link it first.
react-native link react-native-webview
Just check the dependency added or not in your MainApplication class.

import com.reactnativecommunity.webview.RNCWebViewPackage;
new RNCWebViewPackage(),

[Majdi-Alkhusha]

install react-native-screens work for me
npm i react-native-screens

[genialkartik]

These steps worked for me:

1. Rebuild the App. Run: npx react-native run-android.
2. Run: react-native link react-native-webview
3. Check if RNCWebViewPackage is imported in MainApplication.java file.

Note: I'm using react-native@0.64.2.

[ghost]

Same for me guys, it started with react-native-math-view, since I couldn't use it I wanted to move to this as a fallback.

I DON'T THINK this is a webview problem itself, but a react one...

[muhammadasadullahtariq]

Have you tried to link manually?

Go to ../node_modules/react-native-webview/ios and drag and drop the RNCWebView.xcodeproj to Libraries folder on Xcode, right after, Go to Build Phases tab (on Xcode) in the section "Link binary With libraries" add the libRNCWebView.a (inside Libraries/RNCWebView.xcodeproj/Products). Try to build and run

[cancmgz]

There is nothing left that I haven't tried for hours.
"react-native link -react-native-webview",
I ran "react-native link".
"pod install" in ios folder.

restart project, restart macos, i try everything.

but I still get the error "RNCWebView does not exist".

[iboxgithub]

same here

[MaxJadav]

Getting crash after generating aab file "react-native-webview": "^11.22.3"
Fatal Exception: com.facebook.react.common.JavascriptException: Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager.

When run app as release mode working fine.
After generating aab file. Download from internal testing.

[aiya000]

I had a same issue.
Below step fixes the issue.

-    "react-native-webview": "^13.10.5"
+    "react-native-webview": "^13.8.6"

[Be-Que]

Run this on your terminal and reload the project
npx expo install react-native-webview
This worked for me!