I tried many commands to solve this issue, but i couldnt find the answer, nothing worked. Last, i used
npm install react-navigation-tabs
react-native start --reset-cache
but they didnt work, i still get the same error.
I installed it as
npm install #react-navigation/material-top-tabs react-native-tab-view#^2.16.0
and imported this import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs'; but still no, it doesn't work.
this is my package.json as i thought there may be a problem with;
{
"name": "smarthome",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-navigation/material-bottom-tabs": "^5.3.15",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.4",
"native-base": "^2.15.2",
"react": "17.0.1",
"react-native": "0.64.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-paper": "^4.8.1",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.1.1",
"react-native-vector-icons": "^8.1.0",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
npm uninstall react-native-cli
npx rm -rf node_modules
npm install -i -g --force react-native-cli
those codes solved my problem.
Related
Error: While trying to resolve module native-base from file C:\Users\byambadorj\Desktop\LoginEx\src\LoginScreen.js, the package C:\Users\byambadorj\Desktop\LoginEx\node_modules\native-base\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (C:\Users\byambadorj\Desktop\LoginEx\node_modules\native-base\src\index. Indeed, none of these files exist
C:\Users\byambadorj\Desktop\LoginEx\node_modules\native-base\src\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
C:\Users\byambadorj\Desktop\LoginEx\node_modules\native-base\src\index\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
at DependencyGraph.resolveDependency (C:\Users\byambadorj\Desktop\LoginEx\node_modules\metro\src\node-haste\DependencyGraph.js:311:17)......
This is my package.json
{
"name": "LoginEx",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-navigation/native": "^6.0.6",
"native-base": "^3.2.2",
"react": "17.0.2",
"react-native": "0.66.4",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-size-matters": "^0.4.0"
},
"devDependencies": {
"#babel/core": "7.16.7",
"#babel/runtime": "7.16.7",
"#react-native-community/eslint-config": "2.0.0",
"babel-jest": "26.6.3",
"eslint": "7.14.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.66.2",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
Try stopping metro and restart it by clearing cache.
npm start --reset-cache
I have a Small problem getting this to work without warnings or Errors
I stumbled into this Error trying to get this to work, following a step by step tutorial on here from this tutorial https://medium.com/#ritikjain1272/making-drawer-navigator-and-a-splash-screen-on-your-react-native-app-2fb561ee17f1
Now I have installed everything correctly, then it gives me this warning interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead
How Can I resolve this , Downgrading gives a further Error.
This is what the Package.json Looks like
{
"name": "**********",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "17.0.1",
"react-native": "0.64.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.1.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.1.1",
"react-native-vector-icons": "^8.1.0",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.0",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "7.13.15",
"#babel/runtime": "7.13.10",
"#react-native-community/eslint-config": "2.0.0",
"babel-jest": "26.6.3",
"eslint": "7.14.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.64.0",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
Edit
The image after downgrading I get
You have installed the latest stable react-native-reanimated version, whilst in the tutorial the version 1.7.0 is being used.
So you'll have to change your react-native-reanimated version to 1.7.0. Change the version in your package.json file:
"dependencies": {
...
"react-native-reanimated": "^1.7.0",
...
}
And then run npm install and npx pod-install/cd ios && pod install if you're running it on iOS.
I'm getting an error when a run my react-native project in Android device.
I already tried many things. Remove node_modules, clear npm cache, yarn too, use yarn and npm to install, and don't resolve it.
What is happening?
Error: Unable to resolve module `util` from `node_modules/multer/lib/multer-error.js`: util could not be found within the project.
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
Already tried the suggestions indicated in the error message too.
package.json
{
"name": "svm",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/datetimepicker": "^2.3.2",
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/drawer": "^5.4.0",
"axios": "^0.19.2",
"formik": "^2.1.4",
"moment": "^2.24.0",
"native-base": "^2.13.8",
"react": "16.9.0",
"react-native": "^0.62.2",
"react-native-elements": "^1.2.7",
"react-native-ftp": "^1.0.1",
"react-native-gesture-handler": "^1.5.6",
"react-native-image-picker": "^2.3.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-masked-text": "^1.13.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.2",
"react-native-screens": "^2.0.0-beta.2",
"react-native-sound": "^0.11.0",
"react-native-vector-icons": "^6.6.0",
"react-native-youtube": "^2.0.1",
"react-navigation": "^4.1.1",
"ssh2-sftp-client": "^5.1.2",
"styled-components": "^5.0.1",
"yup": "^0.28.1"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"multer": "^1.4.2",
"multer-sftp": "^1.1.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
Multer is listed as dev dependency. I guess you have build the app for production when testing it. So the package is not loaded.
Moving the "multer": "^1.4.2" dependency to "dependencies" from "devDependencies" should probably resolve it.
I am getting an error that #react-navigation/native could not be found within the project. I tried to install it and my package.json file says. I am not sure what to do next to get it running. Cheers {
"name": "sample",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/native": "^5.5.1",
"#react-navigation/stack": "^5.5.1",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.0.4",
"react-native-screens": "^2.8.0"
},
"devDependencies": {
"#babel/core": "^7.10.2",
"#babel/runtime": "^7.10.2",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.0.1",
"eslint": "^7.2.0",
"jest": "^26.0.1",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
I get that problem sometimes as well, when I restart the app the problem is gone. I don't know why it happens, though.
I am upgrading my React Native app from 0.59 to 0,61. What I did was to generate a brand new project from ground up with react-native init emps_fe6 and yarn add each module in package.json. Also copy the components and App.js over to the new project. Here is my new package.json file:
{
"name": "emps_fe6",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/async-storage": "^1.6.2",
"moment": "^2.24.0",
"react": "16.9.0",
"react-native": "0.61.1",
"react-native-cli": "^2.0.1",
"react-native-confirmation-code-field": "^3.9.0",
"react-native-device-info": "^3.1.4",
"react-native-elements": "^1.2.3",
"react-native-gesture-handler": "^1.4.1",
"react-native-gifted-chat": "^0.10.1",
"react-native-keychain": "^4.0.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal": "^11.4.0",
"react-native-modal-datetime-picker": "^7.6.0",
"react-native-segmented-control-tab": "^3.4.1",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"socket.io-client": "2.1.1"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
Then start on Android emulator with react-native run-android. It throws out the error of version mismatch:
I don't quite understand what causes the error, as there is no reference to version 0.59.9 in components and App.js copied. The project is started from brand new and each module is yarn add individually. Only thing from previous version is the components and App.js.
Maybe you had metro bundler running with a previous version of React Native which caused this issue. So, what I typically do when I face this problem is to start the bundler like npm start --reset-cache. Make sure to stop any metro bundler running.
If problem persist try restarting your machine.