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

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

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

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

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

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.

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.

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'
...

I had the same issue before , I tried this:
pod 'react-native-webview', :path => PROJECT_PATH + 'react-native-webview'

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

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"

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.

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

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

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

Related

Execution Failed for task :app:compileDebugJavaWithJavac in React Native

i install react navigation version 6 and i want to use drawer navigation in project
for that install all packages of drawer navigation and make changes in
babel.congile file = plugins: ["react-native-reanimated/plugin"],
Second change in MainActivity.java file
"import android.os.Bundle;"
"import com.facebook.react.bridge.JSIModulePackage"
"import com.swmansion.reanimated.ReanimatedJSIModulePackage"
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
#Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();
}
}
also i changes the andrion app buid.gradlew
project.ext.react = [
enableHermes: true, // clean and rebuild if changing
]
when remove all these changes then Project buid succeeded and run
when i use the JS Module Packages then i face the above error
so My React native version 0.67
so any body can helper
hi #waqas i think you are using the latest version of react native reanimated.
please try to downgrade react native reanimated version to
"react-native-reanimated": "^1.13.2",
may be helps this;
Please refer to this GitHub thread https://github.com/facebook/react-native/issues/35210. It worked for me!
The steps I followed:
Deleted node_modules
Changed "react-native" package version (in the package.json file) from "0.70.1" to the latest patch I found in the thread (that was "0.70.5" for me)
Ran npm install to generate again the node_modules folder (you may want to use yarn install if your project is based on yarn packages)
Then cd android && ./gradlew clean
Finally cd .. (back to root folder) and npm run android to build the app.
Note that I followed the instructions for React Native >= 0.63 (version)
Hope this works for somebody else too!

Check if device is jailbroken/rooted using Jail Monkey in React Native fails module is 'undefined'

In React Native I found two plugins to check if a device (iOS/Android) is jailbroken/rooted:
Jail Monkey
react-native-is-device-rooted
I have firstly tried the npm package react-native-is-device-rooted but it doesn't work and it seems to be outdated. So I tried Jail Monkey, but I get this following error:
The code is:
import JailMonkey from 'jail-monkey'
export default class Welcome extends Component {
render() {
return (
...
<View style={styles.lowerView}>
<CustomButton text={"Jail Monkey"} onPress={() => this.printJailMonkey()}/>
</View>
...
);
}
printJailMonkey = () => {
console.log("Jail Monkey library content: " + JailMonkey.isJailBroken())
}
}
I have checked carefully the manual link of the package (using Xcode, pod install, and so on...). Nothing worked, does someone can help me?
JailMonkey uses Native Modules and thus cannot run in an Expo managed app. You need to eject it to ExpoKit for JailMonkey to work.
Solved but doing manually the linking.
Try following steps for manual linking.
Navigate to root folder in terminal enter commands:
react-native link
cd ios
pod update

React native Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager

i am currently working a small app i have just started working on and i keep getting this error:
Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager.
This error is located at:
in RNCViewPager (at ViewPager.js:150)
in ViewPager (at createAnimatedComponent.js:151)
in AnimatedComponent (at react-native-scrollable-tab-view/index.js:253)
in RCTView (at View.js:45)
I am using import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view'; and i guess this is where the error is getting from, i have searched on stackoverflow and found that i have to install #react-native-community/viewpager which i did, but still getting the same error in the Android emulator (the Ios emulator works)
here is my code:
import React from 'react';
import {
Text
} from 'react-native';
import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
//import ViewPager from '#react-native-community/viewpager'
export default () => {
return <ScrollableTabView
style={{ marginTop: 20 }}
initialPage={1}
renderTabBar={() => <DefaultTabBar />}
>
<Text tabLabel='Tab #1'>
</Text>
<Text tabLabel='Tab #2'>favorite</Text>
<Text tabLabel='Tab #3'>project</Text>
</ScrollableTabView>;
}
Thank you !
Install the below NPM library
npm i react-native-pager-view
Because, "#react-native-community/viewpager" is Deprecated.
if you use yarn
yarn add react-native-pager-view
if not, then
npm i react-native-pager-view
then you have to do
pod install
yarn ios or npx react-native run-ios
Please run the following command in your terminal
=> npm i #react-native-community/viewpager
Install the following package
npm i react-native-pager-view
After that open the ios folder in the terminal and run pod install. After the installation restart your project with npx react-native start.
Kindly install this package first
npm i react-native-pager-view
You need to make sure of your node & npm version. In my case, I used node v.16.13.0 (npm v.8.1.0). If npm didn't work, try using yarn
yarn add react-native-pager-view
after that. cd ios && pod install
Then you need to rebuild the app on android. If the issue still exists, then try deleting node_modules & pods, then reinstall them again.

Can't link assets (fonts) in react native >= 0.60

react-native: 0.60.4,
react: 16.8.6,
npm: 6.10.1
XCode: 10.2.1
AndroidStudio: 3.4.1
I created a project using
npx react-native init awesomeApp --template typescript
I have put my assets in the
assets/fonts/<Bunch of .ttf files>
My Directory Structure
awesomeApp
|
+--android
+--ios
+--assets
| |
| +---fonts
| |
| +-- ProximaNova-Bold.ttf
+--react-native-config.js
then I ran
react-native link
Nothing happends, XCode not showing any added Resource neither the android, and when I'm running react-native run-ios showing error that the font is not found.
My react-native-config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts']
};
I have also tried
yarn react-native link and npx react-native link
Well,
finally, I linked my fonts,
I just renamed my file react-native-config.js to react-native.config.js and it worked.
I don't know if this is the right way, I just tried and it worked, for me at least.
Here is the complete walkthrough for linking custom fonts.
my react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'],
};
and logs:
info Linking assets to ios project
info Linking assets to android project
success Assets have been successfully linked to your project
but My mistake was:
Wrong way:
fontFamily: BYekan
Right way:
fontFamily: 'BYekan'
just put font name in ''
For React-native > 0.69, npx react-native link is no longer working
Use npx react-native-asset instead
Just to complement keyserfaty's answer, here is my react-native.config.js working using react-native link:
module.exports = {
dependencies: {
"react-native-gesture-handler": { platforms: { android: null, ios: null } }
},
assets: ['./src/assets/fonts']
};
Create a file in your react native project called react-native.config.js:
In it, paste
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/'],
};
assets: ['./src/assets/fonts/'], should be the path to wherever you stored your custom fonts in your project folder.
When you run the link command, it should work then.
Using RN 0.60.8 with a react-native-config.js file should allow you to link your fonts using react-native link.
My logs:
react-native link
info Linking assets to ios project
info Linking assets to android project
success Assets have been successfully linked to your project
Since you installed React Native using npx I'm guessing you maybe don't have react-native installed globally? Is running react-native link giving you any errors?
None of the above solutions work for me. The issue with what I was having is my Xcode project already had Resources group with a backed folder in it. The way react-native link is working as my understanding is it's creating a group without a folder and add it to your project and link to all your fonts from there. This approach doesn't work when you already have a Resources folder. The solution I could come up with was just renaming the Resources folder to something else and run react-native link again.
If you don't have such a setup, create react-native.config.js file and running react-native link works fine.
react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/']
};
change assets: ['./src/assets/fonts/'] to assets: ['/src/assets/fonts/']
or use
assets: ['./src/assets/fonts/'] but nameProject/assets
some times you have writed react-native.config.js correctlly
in such cases ; if you do this tasks
it helps you
1- delete react-native.config.js file
2- create this file with same code again
3- write react-native link in console
then you can see resources folder in Xcode
and you can see your fonts in info.plist and copy bundle resources
The "adding the font" should be done in your package.json. Add:
"rnpm": {
"assets": ["./assets/fonts/"]
}
Then run
react-native link
Source
EDIT: The above only works for react-native below 0.60.0

How to fix react-native-gesture-handler error not working

I create a new project in react-native ,then install (npm install --save react-navigation npm install --save react-native-gesture-handler),
the latest version (react-native: 0.60.0) auto linking so,I not link ,but still is showing error,
!https://prnt.sc/oaxxuc
Task :react-native-gesture-handler:compileDebugJavaWithJavac **FAILED**
After I uninstall gesture-handler this kind of error showing
!https://prnt.sc/oaxx8i
Please help to solve this error
The react-native latest version:-
System:
OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
react: 16.8.6 => 16.8.6
react-native: 0.60.0 => 0.60.0 npmGlobalPackages:
react-native-cli: 2.0.1
thanks
You should paste import 'react-native-gesture-handler'; on the top of index.js which is standard in react native out of the box.
the entry of your app. This is the file where you import your App.js file, its written clearly in the documentations.
documents here https://reactnavigation.org/docs/en/getting-started.html
This issue has been posted on github and you can apply the following solution.
It will work for the RN 0.60.0.
https://github.com/kmagiera/react-native-gesture-handler/issues/642#issuecomment-509113481
First, install the library using yarn:
yarn add react-native-gesture-handler
or with npm if you prefer:
npm install --save react-native-gesture-handler
Linking
react-native link react-native-gesture-handler
Android
Follow the steps below:
If you use one of the native navigation libraries (e.g. wix/react-native-navigation), you should follow this separate guide to get gesture handler library set up on Android. Ignore the rest of this step – it only applies to RN apps that use a standard Android project layout.
Update your MainActivity.java file (or wherever you create an instance of ReactActivityDelegate), so that it overrides the method responsible for creating ReactRootView instance and then use the root view wrapper provided by this library. Do not forget to import ReactActivityDelegate, ReactRootView, and RNGestureHandlerEnabledRootView:
package com.swmansion.gesturehandler.react.example;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
#Override
protected String getMainComponentName() {
return "Example";
}
+ #Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ #Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
iOS
There is no additional configuration required on iOS except what follows in the next steps.
Now you're all set. Run your app with react-native run-android or react-native run-ios
If you're on React Native >= 0.60, you need to disable autolinking for react-native-gesture-handler first. To disable autolinking for it, create a react-native.config.js file in the root of your project with the following content:
module.exports = {
dependencies: {
'react-native-gesture-handler': {
platforms: {
android: null,
ios: null,
},
},
},
};
As suggested by documentation
On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with gestureHandlerRootHOC
const ExampleWithHoc = gestureHandlerRootHOC(() => (
<View>
<DraggableBox />
</View>
);
);
export default function Example() {
return (
<Modal>
<ExampleWithHoc />
</Modal>
);
}
Here the documentation
for react-native-gesture-handle 2 version onwards we just need to following changes at App.js
import {GestureHandlerRootView} from 'react-native-gesture-handler';
export default function App() {
return <GestureHandlerRootView style={{ flex: 1 }}>{/* content */}</GestureHandlerRootView>;
}
Downgrade from 1.1.0 -> 1.0.16 and use exact version(-E):
npm i react-native-gesture-handler#1.0.16 -D -E