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

Question

Hello friends i got this error after linking react-native-webview to my project

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

    This error is located at:
        in RNCWebView (at WebView.android.js:250)
        in RCTView (at WebView.android.js:253)
        in WebView (at App.js:7)
        in App (at renderApplication.js:45)
        in RCTView (at AppContainer.js:109)
        in RCTView (at AppContainer.js:135)
        in AppContainer (at renderApplication.js:39)

And there is my code

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

export default class App extends Component {
  render() {
    return (
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    );
  }
}

Error Image in my android

Can you tell us some more about the project you want to use it in and its code? Have you checked what the lines in the files (i.e. in WebView.android.js) mentioned in the errors are saying? You could give us this code, maybe it is a start to dig in. Thank you. — rank, May 16 '20 at 12:17

score 17 · Accepted Answer · answered May 16 '20 at 10:00

17

run react-native link react-native-webview

check: https://github.com/react-native-community/react-native-webview/issues/140

answered May 16 '20 at 10:00

user13142973

625
1
6
11

4

This is not needed anymore if you are using React Native 0.60+, simply `cd ios` and `pod install`, maybe restart xCode, possibly in Xcode click in the menu on Product > Clean Build Folder, and you should be good to go – Raphael Pinel Jan 28 '21 at 09:17

Raphael Pinel · Answer 2 · 2021-01-28T09:22:10.363

13

With React Native 0.60+, no need to add anything to the podfile. Try again cd ios && pod install

If it doesn't help, try restarting the simulator and rebuilding the app. Restarting Xcode is also a good idea.

You could optionally clean the build Folder in XCode

edited Jan 28 '21 at 09:22

answered Dec 30 '20 at 20:47

Raphael Pinel

2,352
24
26

correct answer in case react-native version > 0.0.60 with autolinking – nima Jan 26 '21 at 10:17

score 5 · Answer 3 · edited Jan 08 '21 at 12:46

5

Try these steps.

Delete pods folder and podfile.lock
npm uninstall react-native-webview
npm i react-native-webview
cd ios
pod install
(npx) react-native run-ios
Reset cache

edited Jan 08 '21 at 12:46

tripleee

175,061
34
275
318

answered Nov 07 '20 at 10:05

Ruban Dharmaraj

985
1
8
11

2

I forgot the pod install bro – Sky Sakthi Nov 09 '20 at 03:12
1

Don't forget to also restart the simulator and rebuild your app – Raphael Pinel Dec 30 '20 at 20:52

score 4 · Answer 4 · answered Jul 24 '20 at 09:23

4

I had the same issue. Try Add this line to your podfile :-

pod 'react-native-webview', :path => PROJECT_PATH + 'react-native-webview'

then go to ios folder cd ios and install pods pod install

It has resolved this problem for me.

answered Jul 24 '20 at 09:23

Akshita Agarwal

235
3
4

I did run link and I think it automatically added the line to my podfile, had to only cd ios adn pod install and it finally worked – cherucole Sep 16 '20 at 13:34
I would not do that with React Native 0.60+. Only `cd ios` and `pod install` is enough – Raphael Pinel Jan 28 '21 at 09:18

score 4 · Answer 5 · answered Mar 27 '21 at 09:58

4

Make sure you did:

npx pod-install
npx react-native run-ios

After installing the package you. need to update pods and then run the project again.

answered Mar 27 '21 at 09:58

Chaudhry Talha

7,231
11
67
116

score 2 · Answer 6 · answered Nov 20 '20 at 15:46

my solution for this problem was the following:

Android

1 add this in your android/settings.gradle

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

2 add this in your android/app/build.gradle

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

3 in your MainApplication.java:

import com.reactnativecommunity.webview.RNCWebViewPackage;//add this import
....

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(),//add line
          ....

IOS

1 add the following line in your ios/Podfile and then open your terminal, go to your project ios folder and run pod install

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

Thanks bro... but I can't understand why it's not mentioned in the Library Itself? — Alpesh Trivedi, Mar 29 '22 at 09:16

score 1 · Answer 7 · edited Jan 10 '21 at 14:25

1

I had the same issue before , I tried this:

pod 'react-native-webview', :path => PROJECT_PATH + 'react-native-webview'

edited Jan 10 '21 at 14:25

SLDem

2,065
1
8
28

answered Jan 08 '21 at 20:20

ABDULRAHMAN RAIES

13
2

score 1 · Answer 8 · answered Apr 06 '22 at 12:44

1

I update webView to the latest (11.18.1) and it was fixed without any additional linking steps.

answered Apr 06 '22 at 12:44

AHMED Ashraf

11
1

score 0 · Answer 9 · edited Nov 10 '20 at 11:42

0

I have done below steps:

 1. cd ios
 2. rm Podfile.lock
 3. pod install

This installed the missing library i.e. react-native-webview and added below line to Podfile file.

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

environment which I am working on:

"react": "16.9.0",
"react-native": "0.61.5"

edited Nov 10 '20 at 11:42

Dharman

30,962
25
85
135

answered Nov 10 '20 at 11:36

amit pandya

1,384
13
22

1

Don't modify the Podfile if you are using React Native 0.60+. There is now autolinking. – Raphael Pinel Dec 30 '20 at 20:49

score 0 · Answer 10 · answered Sep 19 '21 at 06:18

Follow these simple steps worked for me:

Rebuild the App. Run:

npx react-native run-android

Run:

react-native link react-native-webview

Check if RNCWebViewPackage is imported in MainApplication.java file, which looks something like this:

import com.reactnativecommunity.webview.RNCWebViewPackage;

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

score 0 · Answer 11 · answered Oct 25 '21 at 16:50

0

There is no need to add anything or use the link for React Native 0.60+. In my case, which was android, I simply build the project again using: $ npm run android

answered Oct 25 '21 at 16:50

Gilad M

942
10
12

score 0 · Answer 12 · answered Mar 02 '22 at 19:18

0

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

answered Mar 02 '22 at 19:18

f180362 Asad Ullah

39
4

1

Thanks bro, but this project was for andoird, and solved by npm link, thanks lot for support bro – Sky Sakthi Mar 03 '22 at 10:59

score -1 · Answer 13 · answered Feb 05 '21 at 21:32

-1

try to re-build your project after installation and link of webview package (npx react-native run-android)

answered Feb 05 '21 at 21:32

Golden Mapungo

1

I already fixed that issue, thanks for the support bro. – Sky Sakthi Feb 06 '21 at 14:10

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

13 Answers13

Linked