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.
Related
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!
Got this error when try running npm run android.
Component Exception
Can't find variable SafeAreaProvider in files App.js and navigation/index.js.
I dont even have SafeAreaProvider included or used in the files. It looks strange to me, any ideas ?
App.js
import React from 'react';
import Providers from './navigation';
const App = () => {
return (
<Providers/>);
}
export default App;
navigation/index.js
import React from 'react';
import { AuthProvider } from './AuthProvider';
import Routes from './Routes';
const Providers = () => {
return (
<AuthProvider>
<Routes />
</AuthProvider>
);
}
export default Providers;
Apart from installing npm install #react-navigation/native, you will also need to install its dependencies, which you can do by running npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view.
If we are supposed to implement the navigation in the react-native application we must have to install all the libraries described in the npm documentation.
So be sure that you have installed all the peer-dependencies and followed the documentation properly.
for the stack navigation implementation, we must have to install the following libraries as per the documentation.
#react-navigation/native
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-native-safe-area-context
#react-native-community/masked-view
#react-navigation/stack
for more information check out the official documentation to crash the issue.
https://reactnavigation.org/docs/getting-started
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)
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
I am getting the following error in react native - fontFamily "ionicons" is not a system font and has not been loaded through Font.loadAsync.
If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
I am trying to import the expo vector icons.
import { Ionicons } from '#expo/vector-icons';
and using the icon
<Button transparent>
<Ionicons name="md-checkmark-circle" size={32} color="green" />
</Button>
but getting the above mentioned error.
Another possible solution I happened upon after of hours of looking at code that should work and which is identical to the sample and the excellent previous answer.
If you have been upgrading Expo this may be your answer.
Delete node_modules
Delete package-lock.json
run expo install
run expo start -c
If nuking node_modules is not working, then make sure you don't have installed multiple versions of expo-font.
Remove expo-font from node_modules/expo/node_modules/expo-font/.
Remove expo-font form list of dependencies from node_modules/expo/package.json.
Run expo r -c
For details Expo cannot load a font due to multiple versions of expo-font installed.
The library #expo/vector-icons is only installed by default on the template project that get through expo init -- it is part of the expo package .
If you created your project using react-native init use react-native-vector-icons instead
Installation
npm i react-native-vector-icons
react-native link react-native-vector-icons
Usage
import Icon from 'react-native-vector-icons/Ionicons';
<Button transparent>
<Icon name="md-checkmark-circle" size={32} color="green" />
</Button>
OR
try loading Ionicons using Font.loadAsync in your App.js
async componentDidMount () {
await Expo.Font.loadAsync({
Ionicons: require('#expo/vector-icons/fonts/Ionicons.ttf'),
});
Adding Iconicons in loadAsync solved this bug for me.
async componentDidMount () {
await Expo.Font.loadAsync({
Ionicons: require('#expo/vector-icons/fonts/Ionicons.ttf'),
});
I solved this problem by removing <Icon\> tag in my code.
After leaving only <Ionicons\> tags for icons, I got saved.
I have fixed this issue by expo upgrade just in case anyone else would see that.
Remove expo-font from package.json.
delete node_modules and package.lock.json .
Run npm install or yarn install
Run npm start or yarn start.
None of the suggestions worked for me. I found the ionicons.ttf file here, downloaded and copied it to my fonts folder and linked it this way:
let [fontsLoaded] = useFonts({
'Ionicons': require('./assets/fonts/ionicons.ttf'),
});
if (!fontsLoaded) {
return ( ... );
} else {
return ( ... )
}
Hope this helps someone.