React native running on the device error - javascript

my react native app wont run when the device is connected on my laptop.. but the app will run successfully on genymotion. I dont know what the problem is. Can anyone suggest me some solutions to this problem. Thank you
This is problem i get on my device, but no problem when running on genymotion

check this out, probably you not set up your dev server
https://facebook.github.io/react-native/docs/running-on-device-android.html#configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi
Make sure your laptop and your phone are on the same Wi-Fi network.
Open your React Native app on your device. You can do this the same way you'd open any other app.
You'll see a red screen with an error. This is OK. The following steps will fix that.
Open the Developer menu by shaking the device or running adb shell input keyevent 82 from the command line.
Go to Dev Settings.
Go to Debug server host for device.
Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081). On Mac, you can find the IP address in System Preferences / Network. On Windows, open the command prompt and type ipconfig to find your machine's IP address (more info).
Go back to the Developer menu and select Reload JS.

what your android version device ?
the first think should you do after your plugg in your device via usb, check that your device is properly connecting to ADB by running adb devices.
Open your cmd find your adb directory path example : C:\Users\your_name\AppData\Local\Android\sdk\platform-tools
Run $ adb devices and see list devices attached. U must have one devices only one device connected at a time.
After check devices are connected and then run your app $ react-native run-android.
If your android version 5.0 lollipop running the following in your cmd $ adb reverse tcp:8081 tcp:8081 and you can reload your aplication, but if still error you can run via wi-fi, you can use this tutorial if you run via wi-fi, but you'll first need to install the app on your device using a USB cable.

Related

'expo start' or 'npm start' command stuck at ''Starting metro bundler"

I am using react native expo for building mobile app. I followed below steps:-
expo init myapp
cd myapp
expo start
After running above 3 commands everything was working fine few days ago. But from today it gets stuck on "Starting Metro bundler".
It should proceed further to "Building javascript bundle". But It is stuck with "Starting Metro bundler".
Try to restart your PC. It works for me. I think it happens to me everytime I install new packages while the Metro Bundler is running.
This happened to me because I reset my network settings on my phone earlier today which wiped out my all Wi-Fi connections. So my root cause was simple- my phone just wasn't on the same network as my PC anymore.
If you know you're on the right network, there are more details and potential solutions here: https://github.com/expo/expo-cli/issues/2934 and I think it's important to note that bundling won't start until you click the link from the QR code.
Most likely, it is a network access issue.
I had similar problem several times. To me the previous answers are legit and an even simpler measure also worked for me: just tap phone screen to disconnect wifi of my phone and after a few seconds tap again to reconnect wifi, this solved the problem for me.
More info: the error message on my phone was
Uncaught Error: java.net.ConnectException: Failed to connect to /192.168.1.69:19000
My pc and phone are connected via wifi to the same router. Pc runs windows and phone runs Android.
what I did was restart my computer,
then I shared a network (hotspot) from my computer and connected again the android and iPad, and it worked.
also, connecting your computer to the same router with your devices is also the same,
always remember to log in with expo login command

ReactNative port 8081 issue : 403 Forbidden

While developing using ReactNative on Windows, I am getting below 403 error. This is because port 8081 which ReactNative uses by default is being used by another program. In my case it was McAfee (Thanks McAfee for making this harder).
Command to run the project : react-native run-android
I searched around a lot and finally figured out how to run this project on a different port. If you have any Antivirus software installed then it may help if you disable the firewall while developing or allow connections manually through settings.
Start ReactNative on a different port
react-native start --port 9080
This will open a new command prompt and start the metro bundler on port 9080 (you can use any other port you want). Wait for the dependency graph to be fully loaded.
Now in a different command prompt (project directory) use the below command to build and install the app on device
react-native run-android
Now once the app is loaded on device you will see the 403 error along with the red screen. To make the device communicate on a different port use below command.
adb reverse tcp:8081 tcp:9080
or if you have multiple device connected then provide the device id (e.g. FA6AA0301277)
adb -s FA6AA0301277 reverse tcp:8081 tcp:9080
To know the list of devices connected use below command
adb devices
That's it, now you should be able to see the index page :)
Happy Coding :)

No targets shown in WEINRE (Cordova/PhoneGap)

I've been trying to connect my device to weinre, yet I cannot see any target device in it.
This are the steps I'm following:
Creating project in Cordova
Adding android platform to the project
Adding the weinre script to my project's index.html
Initiating weinre server in my computer
Pinging both devices IP from each other to ensure they can see each other over the network
Opening weinre server in my chrome browser
Running my App
No target ever appear
Please if I'm doing something wrong tell me, but can't see, to connect any target itno my weinre server.
Best regards.

Can't get Android device to be a target for Worklight application deployment

I have a Motorola DroidX that I want to use for testing my Javascript app that runs under Worklight. The DroidX is running Android 2.3.4. My Worklight project is configured for Android-8 (Android 2.2). I followed the tutorials for downloading the Goggle USB driver and including it in the Windows 7 device driver search. I also downloaded and installed the most recent Motorola USB drivers. I think I now have the right drivers in place to handle the USB for the DroidX.
I changed my DroidX settings to include USB debugging, and I've tried connecting to Worklight with both PC Mode and MASS Storage. I've issued the ADB devices command, and it shows that an Android device is connected to the PC. However, I never get any deployment dialog for the DroidX when I do the Build All and Deploy...
It seems like I'm missing some subtle item that is preventing the DroidX from being considered as a target for the Javascript application deployment.
How do I go about debugging - what is wrong?
Did you add an Android environment to your app?
After hitting "Build All and Deploy", are you going to the Android native project (it should be a folder below your WL project) and right-click "Run As > Android Application"?
After you do all that, do you get an errors/warnings in the console or in LogCat?
Can you see LogCat?
Finally, to make sure this is a WL issue, can you please create a Native HelloWorld Android app, and see if you can deploy that into your Droid X from your Eclipse environment. You may have an issue that has nothing to do with WL.

How to see Console log output in samsung galaxy S2

I am using samsung galaxy s2 version 2.3.3, i open a web page in android default web browser.
In the Page i put console.log("some info") to debug the page, but i am unable to see the console.log output in my device.Please help me in this.Thanks in advance.
Warning: No Longer Working!
This solution appears to no longer be functional as the web tool has not been maintained over the years.
Try using JSConsole.com. It's a remote debugger for JavaScript. The setup is basically just injecting a <script> tag in your page. Once connected you can read all the console.log calls from the remote page on JSConsole, as well as execute commands on the client.
Steps to Setup
Go to JSConsole Home Page, and type :listen.
Copy the resulting <script src="http://jsconsole.com/remote.js?..."></script>.
Drop that into the page you need to debug.
Open your page in any browser (phone, tablet, desktop, etc). All console.log calls will be forwarded to the JSConsole.com window.
There are more details plus a couple of useful videos on the Remote Debugging Page.
In Two ways we can see console.log messages
Using WEINRE
Using Eclipse
Method 1:
Use WEINRE remote WEb Inspector in REmote. it is a nodejs package. Steps to install WEINRE.
Install nodejs
run this command to install weinre :npm install -g weinre (for
MACsudo npm install -g weinre)
Then launch WEINRE: weinre --boundHost -all- --httpPort 8082, here
8082 is port number where WEINRE is launched.
Then add the following script tag in the HTML/web page you want to
debug or to see console messages, <script
src="http://xx.xx.xx.xx:8082/target/target-script-min.js#weinredemo"></script>
xx.xx.xx.xx is the IP of your machine.
weinredemo is the ID for your page and you can use any of our own.
Then open the page , where you want to see console messages in any mobile device.
Open this page any webkit
browser,http://localhost:8082/client/#weinredemo
There go to console tab and see the messages.
Method 2:
please connect your mobile via USB drive and see the phone listed in ECLIPSE and need to install ANDROID ADT plugin for eclipse to see the console messages in Eclipse.

Categories

Resources