react-devtools for react-native - react-native

Recently I started developing in react-native. When trying to debug using the react-devtools extension on the browser (Chrome) I only get access to the console, because all the components and elements are the ones displayed in the devtools web-page (http://localhost:8081/debugger-ui/)
So now I am trying using the react-native standalone version but it is "waiting for React to connect.."
and I get a message at the bottom saying "The server is listening on the port 8097".
I don't know much about ports but it looks to me that the application is on one port (8081) whereas the react-devtools is listening to another (8097).
I tried using adb reverse tcp:8097 tcp:8097 before running the react-devtools but it made no difference.
How do I check what port my app is listening to?
How can I make the standalone devtools run?
And if anyone can link me to a good documentation about ports for people with no background it would be very nice as well.

you are on the right track, after assigning port 8097.
Run Command+d to open the development menu and it is automatically detected by react-devtools.

Related

React Native Debugger prevents network requests

I'm working on a React Native app, testing in an android emulator. I've used the standalone React Native Debugger app as well as the debugger that opens in Chrome. In the Chrome window, the Network tab shows no activity, so that's no help. In the standalone debugger, the same is true until you right-click and choose Enable Network Inspect. The problem I'm having is that after I enable network inspecting in the debugger, all network requests fail - the inspector shows their status going from Pending to Canceled after a few seconds. I can see in my server logs that no requests are coming in. It's like debugger itself is somehow blocking the requests.
I've set up adb to run as root. When I run react-native run-android the output includes Running adb -s emulator-5554 reverse tcp:8081 tcp:8081, so I think things are starting up fine. The network requests from the app (login etc.) work fine (a typical URL would be http://10.0.2.2:2080/api/LoginScreenController/GetIdentityStatus), until I choose "enable network inspect" in the debugger, at which point all network requests fail as described above.
Any suggestions would be appreciated.
I know that I'm too late but perhaps it will save time for somebody.
During the update of the react-native, I did update the version of the react-native-reanimated from v1 => v2, and after it, I faced the same behavior.
Version 2 requires to enable Hermes engine if it won't be enabled then all the requests will be in pending status

Stop exp from switching to LAN URL when tunneling

When trying to run exp start --tunnel in a react-native project, I often see the warning:
22:15:31 [exp] Your URL is: exp://192.168.200.83:19000
....
22:15:31 [exp] Switched to a LAN URL because the tunnel appears to be down. Only devices in the same network can access the app. Restart with exp start --tunnel to try reconnecting.
This is a problem since none of my devices or the AVD can connect to this URL to download the project.
The problem does not seem to related to any firewall settings as it does not occur every time (just very consistently). When the error does not happen, I get a URL that I can work with that looks like:
22:44:38 [exp] Your URL is: exp://en-ux3.myexpousername.myapp.exp.direct:80
Is there something that can be done about this to get it to stop switching? What causes this switching exactly? Is there some way to get devices to be able to use this URL instead (I have an android device connected to same wifi, but seems to be unable to download the project from the LAN URL)?
** Totally new to react-native and expo, so if I am missing evidence of any common debugging steps for this kind of problem, please let me know what they may be in the comments so I can update the question.
UPDATE:
A similar question to this is addressed in the expo forums: https://forums.expo.io/t/switched-to-a-lan-url-because-the-tunnel-appears-to-be-down-only-devices-in-the-same-network-can-access-the-app-you-can-restart-the-project-to-try-reconnecting/4483.
I was having the message
Switched to a LAN URL because the tunnel appears to be down. Only devices in the same network can access the app. You can restart the project to try reconnecting.
And I've solved it closing Visual Studio (then pressing the Restart button from Expo XDE)

Unable to connect Android phone to my project with Expo

I created my project in react native by CLI:
_npm install -g create-react-native-app
_create-react-native-app AwesomeProject
_cd AwesomeProject
_npm start
Then I installed expo in my Android phone, and scanned a QR code on my computer screen.
However, my phone can't connect to project, and I don't know why. It just loads and fails. This is error message:
Could not load exp:// 192.168.56.1:19000. Network response timed out.
This is view error:
"Uncaught Error: java,not.SocketTimeoutException: faild to connect to/192.168.56.1 (port 19000) after 10000 ms.
I'm trying to fix it, but still can't get it working. My phone and my laptop are on the same network. What can I do now?
I had the same problem but solved by running expo start --tunnel
Select LOCAL instead of LAN.
I kicked myself when I fixed this.
I had the same issue, turns out my firewall was blocking my connection to the development server port (for me it was 19000). Solved it by disabling firewall.
Choose Tunnel Instead of LAN or Local in connection tab. This solved the issue for me.
Keep a look on this issue for the answer:
https://github.com/react-community/create-react-native-app/issues/60
Make sure that your device and computer are one same LAN/Wifi. It will work.
Also use LAN option.
check open port using
ufw status verbose
And if you don't see the port You are working on
for example 19000 => expo
try this
ufw allow 19000
I've had a similar problem on iOS - the project showed up in the Expo app but didn't want to connect.
Here's what I did:
Connect your PC to your device through USB cable
Download the newest xde from: https://github.com/expo/xde/releases
Install XDE, create a new project from the gui (do NOT use your old project from create-react-app, as it may also show up in XDE) and click the newly created (in XDE) project under "My Projects".
Now your project should show up in the Expo app on your phone. If it doesn't try sending yourself the link to your app over email (to your own inbox, and open the link on your phone), mine looks like this: exp://5c-gp9.[accountname].my-new-project.exp.direct:80
I had this problem when my phone was connected via wifi and my destop was connected via LAN. I changed the connection mode in the browser window to tunnel, reloaded the expo app and was able to connect to my application. This was on my iOS device.
I got this issue on Win 10 with android and solved by the adding a firewall rule for my device (device IP as remote). I was using ESET NOD antivirus and it was block the device from accessing node.exe
for local testing e.g comnputer , simulator
expo start
for Real mobile device
expo start --tunnel
I'm on windows 10.
My network was set to public, but it needed to be private - so that it could safely expose devices like printers and in this case the Expo connection.
I went in my Wifi setting and clicked on Private:
If you are using windows 10 do the following. It worked for me
1. Check if your phone and pc are sharing the same router/hotspot/wifi connection. better still you can connect your pc to your phone hotspot.
2. Configure the network you are using as private. you can do so using this link https://www.digitalcitizen.life/how-set-your-networks-location-private-or-public-windows-10/
3. Off your windows defender and any other antivirus. The windows and other antivirus defender acts as a firewall and prevents expo client from working.
It will work I assure you
I was having the same issue, the solution is easy just make a Firewall rule that allows connection from your mobile device to your PC. open port number 19000 and in the IP put your phone IP address then allow the connection TCP/UDP in both directions, and everything will be OK.
Usually, you can edit the Firewall rules through your antivirus installed on your PC.
Careful don't disable your firewall, it will hurt you a lot.
This problem is due to the sdk version of the project is not compatible with the expo go ,so go to app.json of your project and edit to the latest version of sdk

Using react native build on device red screen is coming .Android error “Could not connect to the server” on start of app.

I am new in react native language first time run the build on the physical device the red screen is comming how to resolve this
It may be a bundle error.
You can run command react-native-start. Then open this link in browser
http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false
It will bundle the package with development server.
or It may be an issue with adb not running
Only applicable for physical mobile device
incase you are still our of luck ... follow these steps
usually its port forwarding which causes this
so ensure you have already executed
adb reverse tcp:5000 tcp:6000
(OVER here your port number can be same or different depending upon how do you run your program, in my case i keep both of the same)
And if your issue is solved.
identify your machine ip address
goto mobile device (ensure wifi is turned on and you are on same network)
open any browser and see whether your ip is accessible by using following url
{ip address}:{port}
Example: 10.98.1.1:9001
If you see page can't be displayed, Do following -
Still run the application on device which will show red color error screen
Shake the device
Goto Dev settings
Open Debug server host & port for device
Enter
localhost:{port number} instead of ip address
You are done.

Android server not available at http://localhost:8085/wd/hub

I am in the means of setting up of android web driver and followed the same steps as mentioned in the url : http://code.google.com/p/selenium/wiki/AndroidDriver
1) Downloaded the android SDK for windows and unpacked and placed in the path of selenium repository
2) Set up the emulator and created the new AVD ( android virtual device )
3)Installed the webdriver apk 4)port forwarding in order to forward traffic from the host machine to the emulator.
In a terminal type:
$./adb -s forward tcp:8085 tcp:8085(since 8080 is occupied I'm using 8085)
5) This will make the android server available at //localhost:8085/wd/hub from my system.
But when i went to localhost:8085/wd/hub it displayed could not connect to www.localhost.com:8085. May I know why? Kindly help me to fix this.
When you say, "But when I went to" do you mean you visit the url in your browser? It sounds like your browser does not know what to do with the url and tries to be smart for you and assume you mean www.localhost.com:8085. If so, just add a protocol to your request. In stead of localhost:8085/wd/hub use http://localhost:8085/wd/hub.