can't connect anymore with expo client on ubuntu - react-native

I had been working on a react-native project for about a week on my main computer, which is Ubuntu. After having some reloading issues, I tried running on my macbook, and that has been working fine. However, I can't get my expo client to connect at all now on my Ubuntu, which is what I'm trying to solve here.
What happens is that I run npm start and it starts up normal. When I scan the QR code, it doesn't load and in the "View Error Log" at the bottom it says Uncaught Error: Packager is not running at http://192.168.1.4:19001 I also try to enter the exp://192.168.1.4:19000 address it suggests I can enter as the url instead of scanning the QR code. This also gives me the same error.
I noticed the port is different, but even when putting in 19000 it says the packagager is not running on 19001 which is confusing me.
This all started happening after the first time I ran expo on my macbook, which I believe has something to do with this error, but I can't tie it together yet - and maybe it doesn't have anything to do with it. I tried turning off my macbook, turning off my ubunut, turning off my phone, turning off my router, and then hiding in the closet for 5 minutes.
After turning my router, Ubuntu and phone back on and getting the expo packager running on my Ubuntu, the same error persists when trying to connect via the expo client on my phone. This error has not been something temporar - it seemed like one of those that would just go away, but it has been about a week now with this same error.
Any ideas?
Edit: The other thing I've tried is changing the port my expo server is running on by changing the script in package.json. I've tried changing to PORT=19001 react-native-scripts start and react-native-scripts start --port 19001 but neither of those have changed the port according to the server output address after starting up.

Related

Error runing npm start (expo) - error listen EADDRINUSE: address already in use :::19000 - But it looks like the program itself is using such port

I've lost two days now trying to find a solution for my problem with no success. I hope someone can help me out!
Since I upgraded my Expo yesterday, I can't open my project running npm start / expo start.
The error is: error listen EADDRINUSE: address already in use :::19000
I read the I should find out what was running in this port and kill it.
So I ran netstat -ano -p tcp to search for the PID.
However, I notice that before running npm start this port wasn't shown in the list, as you can see in the following image:
It's only after running npm start that it appears. Even then, there's no PID.
How can I fix this?
If in one hand I need to kill the process that is using the port but in the other hand it looks like to program itself is using the port.
As this problem started after upgrading expo, I followed the upgrading process explained in https://blog.expo.io/expo-sdk-42-579aee2348b6.
Then, I got a new error regarding to { AppLoading } from 'expo', because now it has its own package, so I installed that and the App finally opened.
Still, it didn't fix all of my problems, as the AppLoading for example now creates many timeouts, each with a huge amount of seconds, creating many warnings like:
Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground.
(Saw setTimeout with duration 418605ms).
Another break that I've noticed is related with the image picker.
So for now, I'm trying to fix theses...

Major issues trying to run react native, expo, vs code, android studio

I am brand new to React-Native and have been consistently having major issues getting things up and running. I am using VS Code, Expo, Chrome, and Android Studio. I have encountered at least a dozen major issues trying to get a simple "Hello World" app running and none of the solutions to the particular problems has really worked leading me to believe there is a bigger issue going on. I'll try to run through a few of the issues I've had so far but as I said I'm totally new to this so I can't really understand/remember every issue that has come up.
I have consistently had issues getting metro bundler/expo and the Android Virtual Devices connecting. Sometimes they work, but most of the time I get the warning message "Couldn't adb reverse: device 'adb' not found" followed by the error message "Couldn't start project on Android: Error running adb: device 'adb' not found." If the device does work, if I try to reload from the developer menu or debug from the developer menu, expo crashes on the virtual device. Often I get a blank white screen and the developer menu will no longer open. I've had occasional success stopping the virtual device, restarting it, closing all expo windows, and trying to "run on android" from metro bundler. When this doesn't work, I've tried wiping the virtual device. Sometimes this works. Most often I have to delete the device and create a new one.
When I tried to run the debugger in Chrome, the times it appeared to work, I got console screens that didn't match any guides I've found online. Trying to force errors to understand the Chrome debugger completely crashed the virtual device. Had to close VS Code, Chrome, and delete the virtual device to be able to even begin again.
When I tried to follow guides to debug in VS Code I couldn't get that to work either. Regardless if I put in break points or not when I tried to run "attach to packager" it wouldn't output anything but I could hear my machine running really hard and VS Code seemed like it was trying to do something. I would have to close VS Code to get it working again. The other issue I would get an error telling me that Packager was running outside of VS Code. I would try to close down Android Studio and restart and I would get the same error. One time I almost got it working but the virtual device completely crashed and started flashing a white screen and had to be deleted.
I've had tons of other random errors that have only happened once or twice including some warning message about the binary of the android devices being obsolete or something like that.
Anyone have any idea what could be causing all of this? I've been dealing with this for almost two weeks and it has become incredibly frustrating.

Why can't I get React Native debugging to work in VSCode?

I've looked at so many tutorials, and they seem so simple, but I just can't get debugging to work (running Expo, not ready to eject, that's a whole other level of craziness).
I've tried creating an app with create-react-native-app and also with expo-init which appear to be the same thing. I start running the app with yarn start and I can see the app in Expo. I select "Attach to Packager" in VSCode, and it fails every time.
I've added "react-native.packager.port": 19005 to my settings.json but I can't seem to find the right port. My Metro screen has so many different ports in so many different places:
The terminal where I ran yarn start says
Expo DevTools is running at http://localhost:19003
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler on port 19005.
Successfully ran `adb reverse`. Localhost URLs should work on the connected Android device.
Tunnel ready.
exp://192.168.1.5:19004
The chrome window is at localhost:19003
The first line of the Metro Bundler terminal says Starting Metro Bundler on port 19005.
Later in the terminal it says Opening exp://127.0.0.1:19004 in iOS simulator
In the sidebar it says exp://192.168.1.5:19004, which is reflected in the Dev settings screen in the iOS simulator.
I've tried changing the port in "react-native.packager.port": 19005 to every number between 19000 and 19005 and they all fail. They all say:
Could not debug. Cannot attach to packager.
Are you sure there is a packager and it is running in the port 19003?
If your packager is configured to run in another port make sure to add that to the settings.json. (error code 504)
with, of course, the currently set port.
HELP ME!!!
react-native.packager.port should be changed to the port the Browser's developer tool's is running on. Stopping and Restarting the npm server once again worked for me.

Could not connect to development server in genymotion

I got an issue with Genymotion, searched and tried a lot of ways from google but could not resolved this issue. The problem is two days ago, when I was coding and testing on genymotion, everything worked fine, suddenly, no reason, the red screen showed up.
I tried to clear npm cache, run react-native run-android, react-native start, enter my local IP address to debug server host and port for device, remove node_modules and installed again, remove virtual box, remove genymotion, install all again ... Many ways I tried but no success.
Lucky me, it's still working fine in my real phone, but not really convenient to use real phone to debug.

ReactNative custom port support for run-android command, McAfee workaround

I am trying to configure react native for windows for android app development but I am unable to use port 8081 as it is used by McAfee agent on my laptop.
I am able to start node js server on different port (8090)
react-native start --port=8090
But when I run the command:
react-native run-android
I am unable to specify port option. Looks to be that it is hardcoded with 8081.
Is there anyway I can start react-native run-android for custom port(8090) port on windows?
I am completely new to reactnative and following below link to configure sample Awesomeproject for android on windows.
https://facebook.github.io/react-native/docs/getting-started.html#content
There is a small work around for this. Anyone running this on a physical device(or even otherwise) can restart their adb session using a different port.
eg.
react-native start --port=1234
On a different cmd/terminal window.
react-native run-android
After which I am greeted by these messages.
BUILD SUCCESSFUL
Total time: 22.589 secs
Running C:\SDK/platform-tools/adb -s VY0025160560725694 reverse tcp:8081
tcp:8081
This runs it on default reverse port of 8081, which is blocked by McAfee.
Work around:
adb reverse tcp:8081 tcp:1234
Note: You may have to kill and re-open the app.
Currently I am unable to provide an answer for an emulated device since I do not have one installed on my system. But the steps should be similar.
Was setting up RN with android emulator. Had the same problem with company's laptop with McAfee installed and 8081 port occupied. 3 things i did to make it work.
run the packager server in a different port as you mentioned above, like 8090 port: react-native start --port=8090.
i use android emulator(VD), so i need to change the VD's debug server by: cmd+M in the emulator, Go to Dev Settings → Debug server host for device, enter ‘localhost:8081’. If you connect a real android device, this step may be skipped.
Last thing to do is to forward the request in our local VD’s 8081 port to our machine’s 8090 port which runs the packager server by doing: adb reverse tcp:8081 tcp:8090
More about adb reverse.
Now you should be able to change your index.android.js and hit r twice or cmd+M -> Reload to reload the VD.
I found a workaround that works (I am on Linux, but it should work on Windows also).
In a Terminal tab, from the project root, I run :
react-native start --port=8082
This kicks Node up on port 8082.
Then, I launch the app using :
react-native run-android
Once the app is launched, I update the development server's url and port to match the settings above (Cf. this answer if you don't know how).
It works !!
Finally It Worked! I also faced the same issue where my 8081 port was being used by McAfee and after reading and trying all the solution only the following steps worked for me where I able to run my project on 8088
Steps :
1. react-native init myproject(create myproject using react-native cli) then cd myproject(move to myproject)
2. open android studio - ctrl + R => Replace 8081 to 8088 from every file.
3. react-native run-android(simulator should be running).
4. Check your local IP ex : ipconfig in windows will give your IP
5. Check yourIP:8088 in your browser => It wil show(React Native packager is running.)
6. At this time in your simulator you will get 403 forbidden error or package manager not running error
7. Ok, Now you need to point your simulator to 8088 instead of 8081, So on your simulator type cntrl + m => Dev settings => Debugging => Set IP eg : yourIP:8080
8. Now stop package manager.
9. Now remove .babelsrc from your project.
10. Rerun the react-native run-android(If everything goes fine it will work).
I know its not the best way to solve this problem but until facebook team is not giving any better solution for it this may be a good approach since 8081 is hard coded everywhere.
Note : In some cases I have seen white screen comes without any error. For this issue please make sure that you have removed initially generated .babelsrc.
and stop server and restart should solve this issue.
For this
react-native start --port=1234
U just need to do this
react-native run-android --port=1234
That's it, worked for me.
update port for both commands, they should be same.
This is not currently supported, but there appears to be an active and open issue regarding this as well, but unfortunately the core team hasn't had a chance to merge in the PR...
https://github.com/facebook/react-native/issues/1429
This has also been reported on Product Pains, so be sure to up-vote it there...
https://productpains.com/post/react-native/allow-packager-port-to-be-configurable-change-from-8081/
Right now, it may be easier to change the port McAfee runs on. Sorry