Why am I suddenly having the webpack metro bundler instead of the normal metro bundler? - react-native

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

Related

Object is not a function in Expo(react-native) app

My App is not starting. Please help me. Is that the problem with the libraryies ot with the code?
edit 1:
another mistake when doing render
Error: Problem validating fields in app.json. See https://docs.expo.io/workflow/configuration/
• should NOT have additional property 'nodeModulesPath'.
app.json file:
{
"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/vector-icons": "^12.0.4",
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/bottom-tabs": "^5.11.10",
"#react-navigation/native": "^5.9.4",
"expo": "~41.0.1",
"expo-status-bar": "~1.0.4",
"firebase": "^8.2.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.0.0",
"react-native-stack": "^1.0.0-alpha11",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
"private": true
}
edit 2:
I uninstalled react-native-stack, but there is a mistake: Error: Module not found: Can't resolve 'react-native-stack'
I installed it again:
npm install react-native-stack
Then I have the same problem in the render (look the first picture) and this mistakes in console:
1 (yellow)
`Some of your project's dependencies are not compatible with currently installed expo package version:
- react-native-reanimated - expected version range: ~2.1.0 - actual version installed: ^1.13.2
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo install [package-name ...]`
2 (red)
`Error: Problem validating fields in app.json. See https://docs.expo.io/workflow/configuration/
• should NOT have additional property 'nodeModulesPath'.`
The render answer:
`√ Expo Webpack
Compiled successfully in 5.25s
i 「wds」: Project is running at http://0.0.0.0:19006/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from C:\Users\Лёха\AppData\Roaming\npm\node_modules\expo-cli\node_modules\#expo\webpack-config\web-default
i 「wds」: 404s will fallback to /
edit 3
I was wrong, so I deleted react-native-stack again
npm uninstall react-native-stack
Then I deleted the import in App.js file:
import {createStackNavigator} from 'react-native-stack'
I still have it in yarn.lock file, but I think rm -rf node_modules should work. I just don't understand, how to use it.
`
EDIT
you are probably not having react-native-screens in your node_modules? For react-navigation for each module you are using you have other modules that you need to import in addition. This is not done automatically.
old answer
You are using useScreens() outside of a component. By the way useScreens() is deprecated and should be replaced with enableScreens

"App not installed" error after building android app with "expo build:android"

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.

Expo + React Native version mismatch error ( JavaScript version: 0.55.4, Native version: 0.57.1 )

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)

Unrecognized command 'run-eject'

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

Hot Reload not working in react-native android

I tried it on windows 10 and Ubuntu 16.04. In both cases the Hot Reload only works with changes in jsx, but not, when I change a variabel or function or something else in javascript. The Hot Reload is enabled. Live reload is disabled. When I save a change in the Visual Studio Code Editor, the virtual Device (android studio) reloads, but the changes are not there. The same on physical device in EXPO App.
First I didn`t install watchman. Hot Relaod not working. After installing it Hot Reload not working too.
I startet the app with create-react-native-app. It is not ejected.
package.json:
{
"name": "NativeReduxSaga",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "25.0.0",
"react-native-debugger-open": "^0.3.17",
"react-native-scripts": "1.11.1",
"react-test-renderer": "16.2.0"
},
"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",
"postinstall": "rndebugger-open --expo"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#redux-offline/redux-offline": "^2.3.2",
"expo": "^25.0.0",
"prop-types": "^15.6.1",
"react": "16.2.0",
"react-native": "0.52.0",
"react-native-autocomplete-input": "^3.5.0",
"react-navigation": "^1.5.2",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-devtools-extension": "^2.13.2",
"redux-logger": "^3.0.6",
"redux-observable": "^0.18.0",
"redux-promise-middleware": "^5.0.0",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.2.0",
"rxjs": "^5.5.7"
}
}
watchman version
{
"version": "4.9.1",
"buildinfo": "94e66865386e844f2cffe52e355a94c96562d2e3 2018-03-12T19:58:02.0000000Z"
}
node version
v6.13.1
I read in some articles here, that it could help on Windows, to raise the MAX_WAIT_TIME. But I don´t have a \node_modules\react-native\node_modules\node-haste\lib\FileWatcher\ index.js file.
And why isn´t it working on Ubuntu , too?
Do I really need the watchman? How should it be configured? My .watchmanconfig file is an empty object like {}.
Is Hot Reload usually working with create-react-native-app?
Does anybody know what I can try here, to get the hot reload working?
Thanx for an help!
Actually there's a difference between Hot and Live Reloading.
Hot Reloading is instant reload while keeping the state of your application intact. However, it only works inside the render method and is only triggered on extensions of classes React.Component and Component
As in:
class A extends Component ...
class B extends React.Component ...
Live Reload on the other hand, rebuilds your application and discards your application state. It includes everything, from variables and methods to the simplest of string. That's why one will always start from the start screen of the application (because the state is lost).
Hope it helps!
Deleting the git index.lock file worked for me
rm -rf .git/index.lock
in android go to your MainApplication.Java
search for
#Override
public boolean getUseDeveloperSupport() {
return true;
}
Make sure it returns true. It might be the issue
I did the following steps to resolve this issue:
mkdir android/app/src/main/assets
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
Shake android device or cmd + d in the simulator you will get a menu.
Once enable and disable Hot reload.
clear whatever the IP address you are using in Dev settings -> Debugging -> Debug server host & port for device.
Enable Hot reloading.
In terminal go to your project directory -> react-native start
react-native run-android or run it directly in your android studio.
Alternative solution:
"scripts": {
- "start": "react-native-scripts start",
+ "start": "DEBUG=true react-native-scripts start",
},
To have it work, you should make sure this file wasn't changed:
// ./android/app/src/main/java/com/cubyn/storage/MainApplication.java
...
#Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
...
IMHO it's a better solution because it will be enabled only during dev, and not when bundled for production.
For me the problem was with the AndroidX, basically some time you need to migrate to AndroidX due to the react-native old versions
just open your project in the Android Studio
Refactor -> Migrate to Android X ... and flow the instructions
and don't avoid to make backup when it will be promoted for save side
For anyone experiencing this problem when using WSL 2, the files need to exist inside of the Linux subsystem instead of inside any mounted Windows folders for the file watching to work properly. Taken from this post on Reddit:
They changed the file sharing protocol, from using they own custom developed protocol to using the 9P protocol, which at this time might not support file changes event.
I believe you can fix this issue by putting your code on the Linux file system (ex: in your user's home directory), and access these files through the WSL share, \wsl$\DISTRO_NAME from Windows.
In the Windows explorer, if you go to \wsl$, you should see all your WSL Linux distros installed and can access all the files on their file systems.
I think this is strait forward
Also dont forget to run npm start in your text editor and not outside editor like git bash
Make sure you don't have an index.lock file in your .git directory :) Deleting it could solve your issue.