This question is to ionic 4 and I want to know how to run an ionic app using a real device.
i have this one on my command
[INFO] Development server running!
Local: http://localhost:8100
Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
Try running:
ionic serve --address 0.0.0.0
Or use other address of your local machine (192.168 etc).
Related
Running npm start or expo start launches the project as follows:
React You can now view My React Native App in the browser.
Local: http://localhost:19006/ On Your Network: http://157.201.29.49:19006/
Note that the development build is not optimized.
› To create a production build, run expo build:web › Press Ctrl+C to exit.
Expo Press ? to show a list of all available commands.
Launching the Expo web by pressing ‘w’ opens Chrome browser with the IP address URI http://157.201.29.49:19006/ as advised.
However because of the office VPN, Chrome browser fails to resolve the address. The error is:
This site can’t be reached
ERR_CONNECTION_TIMED_OUT
Replacing the URL in Chrome with http://localhost:19006 succeeds.
How can I start Expo such that pressing ‘w’ automatically launches with localhost rather than the IP address?
To fix, launch expo directly as follows supplying the localhost option:
expo start —-localhost
See Expo CLI docs for expo start:
--localhost Same as --host localhost
expo start --web
or
npm run web
It is no longer supported.
Update July 25, 2022: expo-cli#6.0.0 has been released with the web UI
removed. The last release to include the web UI is expo-cli#5.5.1.
learn more
I am new react native.i am developing a app which includes json data fetching by using axios. I made development connection through usb to my pc and app works fine but when i unplug the usb or close the react packager then there is a red screen on start of my app that says could not connect to development server.and then there is a error below in yellow bar that says unable to symbolicate stack trace...how can i get rid of these errors and run my app independently ?
I think according to your question you are closing the development server from commandline or cmd.
Once you disconnect you will have to restart the packager.
TO connect with Api
select the port number from API application url Example: http://localhost:44394
Step 1: Launch the emulator using command in terminal : npx react-native run-android
Step 2: open the app in emulator:
Step 3: enter the command in root terminal: adb reverse tcp:44394 tcp:44394
I am building React Native app.
It is working well when I launch the app in terminal on Mac using "react-native run-android".
But when I got the apk file and installed it on another android device manually, it does not work.
It looks like this.
If you are connected via cable, do the following:
1. Goto > Settings > About Device
2. Then Software Info
3. Then > Build Number
4. Now Tap (Click) multiple times on Build Number to Enable Developer Options
5. Here you go not the Developer Options will be visible in your Settings
6. Now Go inside the Developer Options and Enable USB Debugging Mode.
7. Open your terminal
On Windows open Android SDK Manger > Platform Tools
Type:
$ adb devices
This will show you the devices and simulator/virtual-devices that you have on you computer.
8. Forward requests from your device
Type:
$ adb reverse tcp:8081 tcp:8081
9. Run it
Type:
$ npm run android
The app should appear on your device
Looks like the source code in your APK is looking for the package server.
Read this on how to build APKs for react-native: React-Native - Generating Signed APK
If your devices is connected via cable:
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
Otherwise, you can still do this via Wifi by following the last point in the error:
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to your machine's IP address and
the port of the local dev server -e.g. 10.0.1.1:8081
Please find the below steps to run react-native code on a physical mobile device:-
Please make sure you are on the same wifi network(Mobile and Laptop).
Run your code and install it on the mobile through the Android Studio.
The app will install and asking you to change your "dev settings".
Shake your phone and go to "dev settings" and type your machine's IP address(192.16.XX.XXX:8081).
Close the app once and open again, in the terminal you will see like this
6. wait for a minute app will install and reflect the changes.
Get a list of all the devices:
adb devices
Then set the which device to run on:
adb -s <device name> reverse tcp:8081 tcp:8081
Then deploy the app:
react-native run-android
If you've upgraded your version of react-native since generating your android project files, you might want to regenerate those now. I think you can use react-native upgrade.
The following are required in order to run a React Native app on Android:
Android Studio
Android SDK
JDK 8 (installation instructions for macOS here and Windows here)
Answer Source: Make An App
We can run the React Native app on Android platform by running the following code in the terminal.
react-native run-android
Before you can run your app on Android device, you need to enable USB Debugging inside the Developer Options.
If you get a “bridge configuration isn’t available” error. Then use below command to solve
adb -s tcp:8081 tcp:8081
Now re-run the app using
react-native run-android
The command for correcting networking on the physical device should instead be:
adb -s reverse tcp:8081 tcp:8081
When USB Debugging is enabled, you can plug in your device and run the code snippet given above.
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
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.
The Native Android emulator is slow. We recommend downloading Genymotion for testing your app.
The developer menu can be accessed by pressing command + M.
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
when I code :
ti build --platform ios --target device
I got this issue :
[TRACE]/usr/bin/touch -c /Users/wind/workspace/yuehouse/build/iphone/build/Debug-iphoneos/yuehouse.app.dSYM
[TRACE] ** BUILD SUCCEEDED **
[INFO] Installing app on device: xxx iPhone
[ERROR] Failed to start "com.apple.syslog_relay" service (0xe800007f)
[ERROR] Project failed to build after 40s 884ms
[ERROR] Failed to start "com.apple.syslog_relay" service (0xe800007f)
Just disable wifi on your device while building
Try disable iTunes sync over Wi-Fi, it works for me.
That is a well known bug which is still open.
According to other users it may help to reboot your phone and/or your Mac. Other users tried to install it several times and suddenly it worked. It could also help to unplug your phone and plug it in again.
-- This is from TIMOB17595
(it just worked for me, perfectly)
Here's my workaround "ritual":
1- Unplug your device
2- Clean the project
3- Log out Appcelerator
4- Re-open Appcelerator and log in
5- Plug your device
6- Run the app