I found lots of threads about this problem, but non of them helped me out.
So sorry for writing another thread for the same problem.
I am new to react-native and frankly packange.json is really painful for me to match version of dependencies.
My package.json file is as follows.
And, error message is
console.error: "React Native version mismatch.
JavaScript version: 0.55.4
Native version: 0.57.1
....."
I tried delete cache and node_modules and reinstall those things using following command.
"watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/haste-map-react-native-packager-* && rm -rf node_modules/&& npm install"
What I found from googling, in most cases, it was version mismatch between expo and react-native. But I believe I am using matched version of react-native and expo from expo website Here
{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"babel-core": "^7.0.0-bridge.0",
"expo": "^30.0.0",
"native-base": "^2.8.1",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
"react-navigation": "^2.11.2"
},
"devDependencies": {
"#babel/core": "^7.1.6",
"regenerator-runtime": "^0.13.1"
}
}
It is better to check app.json file as well.
sdkVersion in app.json should be matched to your version.
run expo update. this will update all the dependencies in package .json to their latest most stable releases. this worked for me
Just check your package.json.
Your version of 'expo' and 'react-native' must match, and remove node_modules and package-lock.json
If you are using Expo,try to run expo update in your project directory
If using Expo CLI - try to run expo upgrade to upgrade the project packages and config (check that you do have the matching versions in package.json first)
Related
Forgive me if this sounds silly or obvious, but I have been working fine on my various projects using expo for a while now, but then all of a sudden, midway into my project, whenever I start the metro bundler using expo start and try running on android device, I suddenly get an error saying packager is not running at 19001, and whenever it happens, i notice the metro bundler is slightly different as shown below where it says "Starting webpack on port 19006 in development mode" Webpack metro bundler instead of the normal "Starting Metro Bundler on port 19001". But then when I try opening my previous projects using expo start or starting a brand new project, the error does not occur and the normal metro bundler shows up and everything works fine(at least initially)
This is the package.json of my current error project
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~38.0.1",
"expo-status-bar": "^1.0.0",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.0.tar.gz",
"react-native-web": "~0.11.7",
"react-redux": "^7.2.0",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
Any advice would be appreciated
webpack is used for web, metro is used for ios and android. hopefully one day one bundler will be usable for all platforms without any limitations, but for now this is needed.
I solved it. It was a blunder on my part. The issue was coming from my installation of redux. While installing redux, i used npm install redux instead of npm install --save redux. I had to uninstall redux and react-redux using npm uninstall --save redux react-redux and reinstalled them using npm install --save redux react-redux . Everything works fine now
I am new in react-native and I have, for the first time, created my own module(npm).
I have tried to create my own module(npm) for common components and individually it works fine. However once I install, link it in our app, and try to use those components, it gives an error like this:
Unable to resolve module `<Module-name>` from `<file>`: Module `<Module-name>` does not exist in the Haste module map.
(Note: I have tested using Android Emulator only)
I have followed the below steps for module and test app creation
For Module
react-native init <module-name>
Add simple code of component in main index.js
And set pacakge.json like this:
{
"name": "<module-name>",
"version": "0.0.1",
"private": true,
"main": "index.js",
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"build": "echo 'build script executed'"
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4"
},
Now I check this component (react-native run-android), it will work fine.
Now I have tried to use in an app with the below steps
For Test App
Create new fresh app (react-native init <app-name>)
Install created npm with full path like;
npm install <full path of component>
Now I try react-native link <full path of component>, I have also tried simple react-native link, but nothing happens.
Now I run app using react-native run-android, however every time it gives the same error like;
Unable to resolve module <created-module name>
test app package.json
{
"name": "<app-name>",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-my-library": "^1.0.2",
"<created-module-name>": "file:../<created-module-name>"
},
"devDependencies": {
"#babel/core": "7.5.5",
"#babel/runtime": "7.5.5",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "6.1.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Created module successfully installed but I think it is not linked properly and it will gives error.
So what is wrong here ?
Please give me suggestion / help.
Thanks.
I am assuming your module is successfully published in npm repository. Otherwise you can not use npm install <full path of component>.
If you are using
npm install <full path of component>
command for installing your module to a Test App from npm repo. Specify in your package.json like
"<created-module-name>": "file:../<created-module-name>"
is wrong. You need to remove that line from your package.json and try to install like;
npm install --save <full path of component>
This will automatically create a line in your package.json. You can now manually link your module.
For manual linking you can follow that guide.
Edited:
If you are using in your local computer,
Then no need to npm install.
Just copy your module into your project node_modules folder.
Then in you package.json add;
"dependencies": {
...
"your_module_name": "your_module_version"
...
}
Then, you just follow the manual linking process that I mentioned above.
after I ran expo build:android i got the apk file built successfully but when I try to install it in many devices, it is not being installed and it shows "App not installed" error [image].
here is my package.json:
{
"name": "some-app",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"axios": "^0.18.0",
"expo": "^31.0.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-navigation": "^3.1.2",
"react-redux": "^6.0.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
}
}
the problem was in the android packager name in my app.json
so it was like that:
"package": "com.<myName>.<appName>"
i replaced myName with the appName like that :
"package": "com.<appName>.<appName>"
and it worked like a magic and I was able to successfully build and install the app on multiple devices
Make sure to uninstall any previous version of the App installed as they may have the same package name.
On your main screen of the phone, scroll down the status bar of the phone.
Select the “Airplane Mode”, and press “Turn ON”
Now go and try to install your application
While installing a notification may appear about “Blocked by Play Protect”
Then press “Install anyway”
The solution for me was the disk space of my phone.
Solution:
-> Try to uninstall some apps and after this try to install. ;-) worked fine for me
Those two solutions didn't make it for me. What made it for me was just to install the last Os on my phone and the apk install finally worked. Hope my answer can help someone as it took me a long time to find out why.
Also check if your mobile device has space. I cleared up about 2GB of dummy data on my device and the app installed.
I want to eject my react-native so I can install mobx but running both 'yarn run eject' and 'npm run eject' doesn't work.i think this is new issue and so couldn't find help online. any help would be appreciated.
this is my package.json file and the error given below.
{
"name": "a2x",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-react-native-stage-0": "^1.0.1",
"jest": "^22.4.4",
"jest-react-native": "^18.0.0",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest",
"eject": "react-native run-eject"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"axios": "^0.18.0",
"mobx": "^5.5.0",
"mobx-react": "^5.2.8",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-elements": "^0.19.1",
"react-navigation": "^2.0.1"
}
}
Try npm run eject..not npm run-eject
But if you trying to add native dependencies later i think better to start project using react native init. not using create-react-native-app.
Actual command is react-native eject.
It will create new folder for android and iOS to run it seperately on native.
As you said you are getting error of Both the iOS and Android folders already exist!, so please delete it and try with this command.
If you already have android and ios folder with some native implementation, there is no need to use eject command at all.
regarding npm run reject command, I guess this will be more useful to clear everything.
Always working for me, only follow two steps
first install in your project
yarn add react-native-eject
and then run
react-native eject
make sure you have install yarn in your pc
I'm creating a react native app using create-react-native-app
npm create-react-native-app
I updated react-native version to 0.44.0, which requires to update react version to 16.0.0-alpha.6
This is my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "0.0.29",
"jest-expo": "^0.4.0",
"react-test-renderer": "~15.5.4"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/ex-navigation": "^2.11.1",
"babel-preset-react-native-stage-0": "^1.0.1",
"expo": "^16.0.0",
"react": "~16.0.0-alpha.6",
"react-native": "0.44.0"
}
}
Running npm install gives me following errors
C:\dev\repo\test>npm install
npm WARN lottie-react-native#1.1.1 requires a peer of react#>=15.3.1 but none was installed.
npm WARN react-native-maps#0.12.2 requires a peer of react#>=15.4.0 but none was installed.
npm WARN react-native-svg#4.4.1 requires a peer of react#>=15.4.0 but none was installed.
npm WARN react-static-container#1.0.1 requires a peer of react#^0.13.0 || ^0.14.0 || ^15.0.0 but none was installed.
It looks like react version 16.0.0-alpha.6 is not recognized by lottie-react-native, react-native-maps, react-native-svg, and react-static-container. I'm not sure if major version (15) must be met, or the alpha version 16 is not picked up by those libraries, or something else. Does anyone know how to fix this? Thanks.
I have a similar problem, actually right now I get this problem, whenever I try to create a new application with create-react-native-app.
The only solution (hack) I have found right now is:
Delete node_modules (for me it's not enough to just do npm install)
Do npm install
I just solve the same issue by removing the react-native folder in node_modules and reinstall the react-native by run this command
Delete the react-native folder in node_modules
Reinstall react-native by run npm install react-native
I think is more simply than deleting the entire node_modules as only the react-native packages and its package.json is missing.