Cannot attach debugger to chrome in React-native with unauthorized error - react-native

I am a newbie to React-native Development. I am able to run my app on android emulator by changing port to 8088 as my organization is using McAfee in port 8081. Everything is working fine but i am not able to debug my app in chrome. Whenever I press 'Debug JS remotely' I am getting unauthorised error in console and debugger-ui is not using react-native developer tools. I tried a lot and found some links to the problem.
This link addresses the problem but I am not getting how to pull the code from react-native master branch.
It has been two days and I am still struggling to find the solution. I will be thankful if someone helps me out there. Thanks in advance.

Remove "ALLOW-CONTROL-FLOW-ORIGIN" from chrome extention.
Uninstall build from device or Simulator/Emulator
Run Again
Hope it will be fixed.

Related

React Native project not opening Metro Bundler in Browser

App is working fine. Also working fine on Emulator and my mobile phone. But the problem is that it is not showing this page on my browser. Open Image
I created this project in react native, Using following commands.
expo init DoneWithIt
choses a Manage workflow with blank template
When I type "npm start" in terminal (using VS code terminal)
it shows Open Image
It is not opening in browser like this
Open Image
Have you tried opening your browser manually at localhost and port 19000? Or simply press "w" in the same terminal after it starts so it opens for you the browser as you can see in the second image.
The Web UI is now deprecated in favor of a more advance terminal interface: https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206
To me the "w" option is grey out but I can still run it and it will let me know that some dependencies are missing. I try to install them but it doesn't succeed. I guess just made sure that the Web UI will not work anymore.
You will see the below error if the 'w' option is grayed out or if the 'w' doesn't work,
It looks like you're trying to use web support but don't have the required dependencies installed.
Please install react-native-web#~0.18.9, react-dom#18.1.0, #expo/webpack-config#^0.17.2 by running:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2
If you're not using the web, please ensure you remove the "web" string from the platform's array in the project Expo config.
install the mentioned packages and re-start the app(npm start).
Enter w, this should work.
The reason why the application is not giving you the web browser ability is because you're missing some packages. Thus far this is the version that's support out there. Try and run this code below:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2

Android simulator is not loading on react-native application (Expo)

After the npm start, when the android simulator is open and running with Pixel3, if I 'click' a (for Android emulator), this error appears and the app does not open on the emulator
Trying to open the project on Android...
Installing Expo on device
-Couldn't start project on Android: Error running adb: Failed to install C:\Users\Atif\.expo\android-apk-cache\Exponent-2.16.1.apk:
Expo Press ? to show a list of all available commands.
|
This download is taking longer than expected. You can also try downloading the clients from the website at https://expo.io/tools
I also tried uninstalling and install again. Also I Tried Opening the emulator then run npm start.
Hope Someone Help me. But for whoever helped me i will appreciate their help. Thanks in Advance !!!
first, turn off AVD , then restart start the system, and open AVD and expo project. it will work mostly. If not delete the previous Pixel3 device , restart the system and take a new device and try.
This is because of access issue to open the emulator. Can you manually start a emulator device open, and check react-native run- android. Hopefully if the app is happy, it will install on the emulator.

getting error when i reload emulator in react native

yesterday my application was running very well I closed it when I open my project in vs code and run npm start and open an android studio and open emulator I connected it again but this error comes on emulator.
It looks like your app was made with expo. Instead of npm start, use expo start. I've had a similar problem where the JavaScript bundle keeps building over and over. I solved it by restarting the app.
If this doesn't work, try restarting your pc.
Hope this helps :)
I think it's because of require() or try restarting your pc.

React Native Remote Debugger shows cached bundles in Chrome

When I'm trying to use Remote JS Debugging in Google Chrome shows Cached Bundles. See the image below.
Remote Debugger UI Screenshot:
On my emulator its not connecting to remote debugger.
Android Emulator Screenshot
Is there anyone who encountered this problem?
I'm using React Native Version 0.47.
Thanks in advance.
If you use Chrome, clear cache from browser and reload app from react native. This fix my issue :)
Get rid of that final forward slash and it should kick you to the normal debug window. I'm running 64.0.3282.186 version of Chrome and this works for me. However, I know someone who says they get force redirected to the address with the forward slash, so I hope you're not in that boat.
To fix the error, you need to clear your cache in chrome and it will work again.
Close the packager and install the app again. This worked for me.

React-Native run-android basic Getting Java.Net.UnknownHostException

I am a beginner in React Native and i have followed all the steps carefully as suggested in react-native Get-Started. Once the project is initiated and i try to run the same using run-android command, I am getting "java.net.UnknownhostException". To be particular, this issue is happening during gradle(https://services.gradle.org/distributions/gradle-2.2.1-all.zip) download.
I am on a corporate network and I have done the proxy setup as well in gradle-home/properties. I have tried downloading the gradle file manually and it works fine in my browser.
Any leads in fixing this issue is highly appreciated.
I think this link can solve your problem:
https://github.com/facebook/react-native/issues/2726
Edit gradle.properties in android sub-folder with the following details:
systemProp.http.proxyHost=proxyHost
systemProp.http.proxyPort=proxyPort
systemProp.https.proxyHost=proxyHost
systemProp.https.proxyPort=proxyPort
systemProp.http.proxyUser=YOUR_USERNAME
systemProp.http.proxyPassword=YOUR_PASSWORD
systemProp.https.proxyUser=YOUR_USERNAME
systemProp.https.proxyPassword=YOUR_PASSWORD